kafka-manager 2.0

kafka-manager-console/src/component/chart/doughnut-chart.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Spin } from 'component/antd';
+import echarts from 'echarts/lib/echarts';
+// 引入饼状图
+import 'echarts/lib/chart/pie';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+import 'echarts/lib/component/legend';
+
+interface IPieProps {
+  getChartData: any;
+}
+
+export class DoughnutChart extends React.Component<IPieProps> {
+  public id: HTMLDivElement = null;
+  public chart: echarts.ECharts;
+
+  public state = {
+    loading: true,
+    isNoData: false,
+  };
+
+  public getChartData = () => {
+    const { getChartData } = this.props;
+
+    this.setState({ loading: true });
+    const options = getChartData();
+    if (!options || !options.series || !options.series.length) {
+      this.setState({
+        isNoData: true,
+        loading: false,
+      });
+      return;
+    }
+
+    this.changeChartOptions(options);
+  }
+
+  public changeChartOptions(options: any) {
+    this.chart.setOption(options, true);
+    this.setState({ loading: false });
+  }
+
+  public componentDidMount() {
+    this.chart = echarts.init(this.id);
+    this.getChartData();
+  }
+
+  public render() {
+    return (
+      <>
+        <Spin spinning={this.state.loading} className="chart-content">
+          {this.state.isNoData ? <div className="nothing-style">暂无数据</div> : null}
+          <div className="doughnut-chart" ref={(id) => this.id = id} />
+        </Spin>
+      </>
+    );
+  }
+}