Merge pull request #416 from potaaaaaato/master

update echarts from v4 to v5
2025-12-24 11:52:08 +08:00 · 2022-01-13 10:55:34 +08:00
parent a8d7eb27d9 ec28eba781
commit 1f87bd63e7
12 changed files with 139 additions and 72 deletions
--- a/kafka-manager-console/package.json
+++ b/kafka-manager-console/package.json
@@ -3,7 +3,8 @@
  "version": "2.5.0",
  "description": "",
  "scripts": {
-    "start": "webpack-dev-server",
+    "prestart": "npm install --save-dev webpack-dev-server",
+    "start": "webpack serve",
    "daily-build": "cross-env NODE_ENV=production webpack",
    "pre-build": "cross-env NODE_ENV=production webpack",
    "prod-build": "cross-env NODE_ENV=production webpack",
@@ -13,18 +14,19 @@
  "license": "ISC",
  "devDependencies": {
    "@hot-loader/react-dom": "^16.8.6",
-    "@types/echarts": "^4.4.1",
+    "@types/events": "^3.0.0",
    "@types/lodash.debounce": "^4.0.6",
    "@types/react": "^16.8.8",
    "@types/react-dom": "^16.8.2",
    "@types/react-router-dom": "^4.3.1",
    "@types/spark-md5": "^3.0.2",
+    "@webpack-cli/serve": "^1.6.0",
    "antd": "^3.26.15",
    "clean-webpack-plugin": "^3.0.0",
    "clipboard": "^2.0.8",
    "cross-env": "^7.0.2",
    "css-loader": "^2.1.0",
-    "echarts": "^4.5.0",
+    "echarts": "^5.2.1",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "increase-memory-limit": "^1.0.7",
@@ -50,11 +52,10 @@
    "typescript": "^3.3.3333",
    "url-loader": "^4.1.1",
    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.1",
+    "webpack-cli": "^4.9.1",
    "xlsx": "^0.16.1"
  },
  "dependencies": {
    "format-to-json": "^1.0.4"
  }
-}
+}
--- a/kafka-manager-console/src/component/chart/bar-chart.tsx
+++ b/kafka-manager-console/src/component/chart/bar-chart.tsx
@@ -1,14 +1,29 @@
 import * as React from 'react';
 import { Spin, notification } from 'component/antd';
-import echarts, { EChartOption } from 'echarts/lib/echarts';
+import * as echarts from 'echarts/core';

 // 引入柱状图
-import 'echarts/lib/chart/bar';
+import { BarChart } from 'echarts/charts';

 // 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { EChartsOption } from 'echarts';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  BarChart,
+  GridComponent,
+  CanvasRenderer,
+]);

 interface IChartProps {
  getChartData: any;
@@ -38,7 +53,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
    this.chart.resize();
  }

-  public isHasData = (data: EChartOption) => {
+  public isHasData = (data: any) => {
    const noData = !(data.series && data.series.length);
    this.setState({ noData });
    return !noData;
@@ -54,7 +69,7 @@ export class BarChartComponet extends React.Component<IChartProps> {
    const chartOptions = getChartData();

    if ((typeof chartOptions.then) === 'function') {
-      return chartOptions.then((data: EChartOption) => {
+      return chartOptions.then((data: EChartsOption) => {
        this.setState({ loading: false });

        if (this.isHasData(data)) {
--- a/kafka-manager-console/src/component/chart/date-picker-chart.tsx
+++ b/kafka-manager-console/src/component/chart/date-picker-chart.tsx
@@ -3,16 +3,34 @@ import { DatePicker, notification, Spin } from 'component/antd';
 import moment, { Moment } from 'moment';
 import { timeStampStr } from 'constants/strategy';
 import { disabledDate } from 'lib/utils';
-import echarts from 'echarts';
+import * as echarts from 'echarts/core';

-// 引入柱状图和折线图
-import 'echarts/lib/chart/bar';
-import 'echarts/lib/chart/line';
+// 引入柱状图
+import { BarChart, LineChart } from 'echarts/charts';

 // 引入提示框和标题组件
-import 'echarts/lib/component/tooltip';
-import 'echarts/lib/component/title';
-import 'echarts/lib/component/legend';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  MarkLineComponent,
+  DatasetComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DatasetComponent,
+  MarkLineComponent,
+]);
 import './index.less';

 const { RangePicker } = DatePicker;
@@ -61,11 +79,12 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
    const noData = options.series.length ? false : true;
    this.setState({ noData });
    options.tooltip.formatter = (params: any) => {
-      var res =
-        "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;'><p>" +
+      let res =
+        '<div style=\'margin-bottom:5px;padding:0 12px;width:100%;height:24px;line-height:24px;border-radius:3px;\'><p>' +
        params[0].data.time +
-        " </p></div>";
-      for (var i = 0; i < params.length; i++) {
+        ' </p></div>';
+      // tslint:disable-next-line:prefer-for-of
+      for (let i = 0; i < params.length; i++) {
        res += `<div key=${params[i].seriesName} style="color: #fff;padding:0 12px;line-height: 24px">
                  <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[
            params[i].color,
@@ -75,7 +94,7 @@ export class ChartWithDatePicker extends React.Component<IChartProps> {
                </div>`;
      }
      return res;
-    }
+    };
    this.chart.setOption(options, true);
  }

--- a/kafka-manager-console/src/component/chart/doughnut-chart.tsx
+++ b/kafka-manager-console/src/component/chart/doughnut-chart.tsx
@@ -1,13 +1,27 @@
 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';
+import * as echarts from 'echarts/core';
+// 引入饼图
+import { PieChart } from 'echarts/charts';

+// 引入提示框和标题组件
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  PieChart,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  CanvasRenderer,
+]);
 interface IPieProps {
  getChartData: any;
 }
--- a/kafka-manager-console/src/component/chart/line-chart.tsx
+++ b/kafka-manager-console/src/component/chart/line-chart.tsx
@@ -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` }} />;
  }
 }
--- a/kafka-manager-console/src/container/admin/data-curve/config.ts
+++ b/kafka-manager-console/src/container/admin/data-curve/config.ts
@@ -1,4 +1,3 @@
-import { EChartOption } from 'echarts/lib/echarts';
 import moment from 'moment';
 import { ICurve } from 'container/common-curve/config';
 import { adminMonitor } from 'store/admin-monitor';
@@ -124,7 +123,7 @@ export interface ICurveType {
  type: curveType;
  title: string;
  curves: ICurve[];
-  parser: (option: ICurve, data: any[]) => EChartOption;
+  parser: (option: ICurve, data: any[]) => any;
 }

 export const byteTypeCurves: ICurveType[] = [
--- a/kafka-manager-console/src/container/admin/data-curve/parser.ts
+++ b/kafka-manager-console/src/container/admin/data-curve/parser.ts
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { ICurve, ILineData, baseLineLegend, baseLineGrid, baseAxisStyle, noAxis, UNIT_HEIGHT } from 'container/common-curve/config';
 import { IClusterMetrics, ISeriesOption } from 'types/base-type';
 import { timeFormat } from 'constants/strategy';
@@ -48,20 +48,20 @@ export const getBaseOptions = (option: ICurve, data: ILineData[]) => {
        return Number(i.value);
      }),
    }],
-  } as EChartOption;
+  } as EChartsOption;
 };

-export const parseLine = (option: ICurve, data: ILineData[]): EChartOption => {
+export const parseLine = (option: ICurve, data: ILineData[]): EChartsOption => {
  return Object.assign({}, getBaseOptions(option, data), {
    legend: {
      ...baseLineLegend,
      bottom: '0',
      align: 'auto',
    },
-  }) as EChartOption;
+  }) as EChartsOption;
 };

-export const parseBrokerMetricOption = (option: ICurve, data: IClusterMetrics[]): EChartOption => {
+export const parseBrokerMetricOption = (option: ICurve, data: IClusterMetrics[]): EChartsOption => {
  let name;
  let series: ISeriesOption[];
  data = data || [];
--- a/kafka-manager-console/src/container/alarm/alarm-detail/history-detail.tsx
+++ b/kafka-manager-console/src/container/alarm/alarm-detail/history-detail.tsx
@@ -6,7 +6,7 @@ import { alarm } from 'store/alarm';
 import { observer } from 'mobx-react';
 import { handlePageBack } from 'lib/utils';
 import LineChart, { hasData } from 'component/chart/line-chart';
-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { timeFormat } from 'constants/strategy';
 import Url from 'lib/url-parser';
 import moment = require('moment');
@@ -40,7 +40,7 @@ export class HistoryDetail extends React.Component {
    return <div className="no-data-info" style={{ ...style }} key="loading"><Spin /></div>;
  }

-  public renderEchart = (options: EChartOption, loading = false) => {
+  public renderEchart = (options: EChartsOption, loading = false) => {
    const data = hasData(options);
    if (loading) return this.renderLoading(400);
    if (!data) return this.renderNoData(400);
@@ -51,7 +51,7 @@ export class HistoryDetail extends React.Component {
  }

  public renderHistoricalTraffic(metric: IMonitorMetric) {
-    const option = this.getChartOption() as EChartOption;
+    const option = this.getChartOption() as EChartsOption;

    return (
      <>
--- a/kafka-manager-console/src/container/common-curve/config.ts
+++ b/kafka-manager-console/src/container/common-curve/config.ts
@@ -1,5 +1,4 @@
-import { EChartOption } from 'echarts/lib/echarts';
-import moment from 'moment';
+import { EChartsOption } from 'echarts';

 export interface ILineData {
  value: number;
@@ -9,7 +8,7 @@ export interface ICurve {
  title?: string;
  path: string;
  colors: string[];
-  parser?: (option: ICurve, data: ILineData) => EChartOption;
+  parser?: (option: ICurve, data: ILineData) => EChartsOption;
  message?: string;
  unit?: string;
  api?: any;
@@ -69,13 +68,13 @@ export const noAxis = {
  },
 };

-export const getHight = (options: EChartOption) => {
-  let grid = options ? options.grid as EChartOption.Grid : null;
+export const getHight = (options: any) => {
+  let grid = options ? options.grid : null;
  if (!options || !grid) grid = baseLineGrid;
  return Number(grid.height) + getLegendHight(options) + Number(grid.top) + LEGEND_PADDING + UNIT_HEIGHT;
 };

-export const getLegendHight = (options: EChartOption) => {
+export const getLegendHight = (options: any) => {
  if (!options) return 0;
  if (options.legend.show === false) return 0;
  const legendHight = options.legend.textStyle.lineHeight + defaultLegendPadding;
--- a/kafka-manager-console/src/container/common-curve/index.tsx
+++ b/kafka-manager-console/src/container/common-curve/index.tsx
@@ -1,4 +1,4 @@
-import { EChartOption } from 'echarts';
+import { EChartsOption } from 'echarts';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { curveInfo } from 'store/curve-info';
@@ -10,7 +10,7 @@ import LineChart, { hasData } from 'component/chart/line-chart';

 export interface ICommonCurveProps {
  options: ICurve;
-  parser?: (option: ICurve, data: any[]) => EChartOption;
+  parser?: (option: ICurve, data: any[]) => any;
 }

@observer
@@ -41,7 +41,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
    fullScreen.show(this.renderCurve(options, loading, true));
  }

-  public renderOpBtns = (options: EChartOption, expand = false) => {
+  public renderOpBtns = (options: EChartsOption, expand = false) => {
    const data = hasData(options);
    return (
      <div className="charts-op" key="op">
@@ -85,7 +85,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
    return <div className="no-data-info" style={{ ...style }} key="loading"><Spin /></div>;
  }

-  public renderEchart = (options: EChartOption, loading = false) => {
+  public renderEchart = (options: EChartsOption, loading = false) => {
    const height = getHight(options);
    const data = hasData(options);

@@ -94,7 +94,7 @@ export class CommonCurve extends React.Component<ICommonCurveProps> {
    return <LineChart height={height} options={options} key="chart" />;
  }

-  public renderCurve = (options: EChartOption, loading: boolean, expand = false) => {
+  public renderCurve = (options: any, loading: boolean, expand = false) => {
    const data = hasData(options);
    return (
      <div className="common-chart-wrapper" >
--- a/kafka-manager-console/src/store/curve-info.ts
+++ b/kafka-manager-console/src/store/curve-info.ts
@@ -1,6 +1,6 @@
 import { observable, action } from 'mobx';
 import moment = require('moment');
-import { EChartOption } from 'echarts/lib/echarts';
+import { EChartsOption } from 'echarts';
 import { ICurve } from 'container/common-curve/config';
 import { curveKeys, PERIOD_RADIO_MAP } from 'container/admin/data-curve/config';
 import { timeFormat } from 'constants/strategy';
@@ -13,7 +13,7 @@ class CurveInfo {
  public timeRange: [moment.Moment, moment.Moment] = PERIOD_RADIO_MAP.get(this.periodKey).dateRange;

  @observable
-  public curveData: { [key: string]: EChartOption } = {};
+  public curveData: { [key: string]: EChartsOption } = {};

  @observable
  public curveLoading: { [key: string]: boolean } = {};
@@ -25,7 +25,7 @@ class CurveInfo {
  public currentOperator: string;

  @action.bound
-  public setCurveData(key: curveKeys | string, data: EChartOption) {
+  public setCurveData(key: curveKeys | string, data: EChartsOption) {
    this.curveData[key] = data;
  }

@@ -59,7 +59,7 @@ class CurveInfo {

  public getCommonCurveData = (
    options: ICurve,
-    parser: (option: ICurve, data: any[]) => EChartOption,
+    parser: (option: ICurve, data: any[]) => EChartsOption,
    reload?: boolean) => {
    const { path } = options;
    this.setCurveData(path, null);
--- a/kafka-manager-console/webpack.config.js
+++ b/kafka-manager-console/webpack.config.js
@@ -122,11 +122,11 @@ module.exports = {
    },
  },
  devServer: {
-    contentBase: outPath,
+    // contentBase: outPath,
    host: '127.0.0.1',
    port: 1025,
    hot: true,
-    disableHostCheck: true,
+    // disableHostCheck: true,
    historyApiFallback: true,
    proxy: {
      '/api/v1/': {