Commit 3f9a5d62 by zhaochengxiang

热力图优化

parent 65ae2cc8
import React from 'react'; import React from 'react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { Empty } from 'antd';
//https://echarts.apache.org/examples/zh/editor.html?c=treemap-show-parent&lang=js //https://echarts.apache.org/examples/zh/editor.html?c=treemap-show-parent&lang=js
class Thermodynamic extends React.Component { class Thermodynamic extends React.Component {
componentDidMount() { componentDidMount() {
const { data, onClick } = this.props; const { data, onClick } = this.props;
if (data) {
console.log('componentDidMount');
if (data && data.length>0 && (data[0].children||[]).length>0) {
this.graph = init(this)(this.elem, data, onClick); this.graph = init(this)(this.elem, data, onClick);
} }
} }
...@@ -15,7 +19,11 @@ class Thermodynamic extends React.Component { ...@@ -15,7 +19,11 @@ class Thermodynamic extends React.Component {
const { data, onClick, resize } = this.props; const { data, onClick, resize } = this.props;
if (data !== prevProps.data) { if (data !== prevProps.data) {
this.graph = init(this)(this.elem, data, onClick); if (!data || (data.length>0&&(data[0].children||[]).length===0)) {
this.graph?.clear();
} else {
this.graph = init(this)(this.elem, data, onClick);
}
} else if (resize !== prevProps.resize) { } else if (resize !== prevProps.resize) {
this.graph?.resize(); this.graph?.resize();
} }
...@@ -25,8 +33,14 @@ class Thermodynamic extends React.Component { ...@@ -25,8 +33,14 @@ class Thermodynamic extends React.Component {
graph = undefined; graph = undefined;
render() { render() {
const { data } = this.props;
return ( return (
<div ref={ref => this.elem = ref} style={{ position: 'relative', width: '100%', height: '100%' }}></div> <div ref={ref => this.elem = ref} style={{ position: 'relative', width: '100%', height: '100%' }}>
{
data && data.length>0 && (data[0].children||[]).length===0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ position: 'absolute', top: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }} />
}
</div>
); );
} }
} }
......
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Spin, Tooltip, Typography, Dropdown, Menu } from 'antd'; import { Spin, Tooltip, Typography, Dropdown, Menu } from 'antd';
import { useMount, useUnmount } from 'ahooks';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import { AssetManageReference, ResourceBrowseReference } from '../../../../util/constant'; import { AssetManageReference, ResourceBrowseReference } from '../../../../util/constant';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment