Merge branch 'master' of http://git.ycjcjy.com/nanyang/machinery-admin

package.json

@@ -59,6 +59,7 @@
     "ali-oss": "^6.17.1",
     "antd": "^4.17.0",
     "classnames": "^2.3.0",
+    "echarts": "^5.3.1",
     "lodash": "^4.17.0",
     "md5": "^2.3.0",
     "moment": "^2.29.1",

src/components/ECharts/index.jsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from 'react';
+import classNames from 'classnames';
+// 按需导入模块
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入图表，图表后缀都为 Chart
+import { LineChart } from 'echarts/charts';
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+} from 'echarts/components';
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+]);
+
+import Styles from './style.less';
+
+export default (props) => {
+  const domRef = useRef();
+  const echartsRef = useRef();
+
+  useEffect(() => {
+    echartsRef.current = echarts.init(domRef.current);
+    echartsRef.current.setOption(props.option);
+  }, []);
+
+  useEffect(() => {
+    if (echartsRef.current) {
+      echartsRef.current.setOption(props.option);
+    }
+  }, [props.option]);
+
+  useEffect(() => {
+    if (echartsRef.current) {
+      if (props.loading) {
+        echartsRef.current.showLoading();
+      } else {
+        echartsRef.current.hideLoading();
+      }
+    }
+  }, [props.loading]);
+
+  const classList = classNames(Styles.echarts, props.className);
+
+  return <div className={classList} ref={domRef} />;
+};

src/components/ECharts/style.less

@@ -0,0 +1,5 @@
+.echart {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+}