8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-12 02:54:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update echarts v4 to v5

Browse Source
This commit is contained in:
eilenexuzhe
2021-12-27 17:12:02 +08:00
parent 10b0a3dabb
commit 5ef8fff5bc
11 changed files with 137 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
kafka-manager-console/src/component/chart/line-chart.tsx
View File

@@ -1,25 +1,45 @@
import React from 'react';
import echarts, { EChartOption } from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/axis';
import * as echarts from 'echarts/core';
import './index.less';
// 引入柱状图
import { PieChart, LineChart } from 'echarts/charts';
// 引入提示框和标题组件
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
ToolboxComponent,
DatasetComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
// 注册必须的组件
echarts.use([
PieChart,
LineChart,
ToolboxComponent,
TitleComponent,
LegendComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
CanvasRenderer,
]);
export interface IEchartsProps {
width?: number;
height?: number;
options?: EChartOption;
options?: any;
}
export const hasData = (options: EChartOption) => {
export const hasData = (options: any) => {
if (options && options.series && options.series.length) return true;
return false;
};
export default class LineChart extends React.Component<IEchartsProps> {
export default class LineCharts extends React.Component<IEchartsProps> {
public id = null as HTMLDivElement;
public myChart = null as echarts.ECharts;
@@ -27,7 +47,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
public componentDidMount() {
const { options } = this.props;
this.myChart = echarts.init(this.id);
this.myChart.setOption(options);
this.myChart.setOption(options, true);
window.addEventListener('resize', this.resize);
}
@@ -41,7 +61,7 @@ export default class LineChart extends React.Component<IEchartsProps> {
public refresh = () => {
const { options } = this.props;
this.myChart.setOption(options);
this.myChart.setOption(options, true);
}
public resize = () => {
@@ -50,6 +70,6 @@ export default class LineChart extends React.Component<IEchartsProps> {
public render() {
const { height, width } = this.props;
return <div ref={id => this.id = id} style={{width: `${width}px`, height: `${height}px`}} />;
return <div ref={id => this.id = id} style={{ width: `${width}px`, height: `${height}px` }} />;
}
}