fix(EC_HistoryView): 优化网格开关显示

packages/extend-components/EC_HistoryView/src/SingleChart.js

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useMemo, useRef } from 'react';
 import { BasicChart } from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator from './utils';
+import { isArray, cloneDeep } from 'lodash';
 
 const SimgleChart = memo((props) => {
   const {
@@ -21,41 +22,45 @@ const SimgleChart = memo((props) => {
       showGridLine,
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
-  }, [dataSource, smooth, curveCenter, showGridLine]);
+  }, [dataSource, smooth, curveCenter]);
 
   useEffect(() => {
     chartRef.current?.resize?.();
-    const chart = chartRef.current.getEchartsInstance();
+  }, []);
 
-    function hander(params) {
-      const { selected } = params;
-      const count = Object.values(selected || {}).filter((item) => item).length;
-      if (count === 1) {
-        chart.setOption({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-            },
-          },
-        });
-      } else {
-        chart.setOption({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'line',
-            },
-          },
-        });
-      }
-    }
+  // 网格开关，不更新整个图表
+  useEffect(() => {
+    const chart = chartRef.current.getEchartsInstance();
     if (!chart) return;
-    chart.on('legendselectchanged', hander);
-    return () => {
-      chart.off('legendselectchanged', hander);
+    const option = chart.getOption();
+    // 交互指针
+    const tooltip = {
+      trigger: 'axis',
+      axisPointer: {
+        type: showGridLine ? 'cross' : 'line',
+      },
     };
-  }, []);
+    // 网格线
+    const axisConfig = {
+      minorTick: {
+        show: showGridLine,
+      },
+      minorSplitLine: {
+        show: showGridLine,
+      },
+      splitLine: {
+        show: showGridLine,
+      },
+    };
+    let yAxis = axisConfig;
+    if (isArray(option.yAxis)) {
+      yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
+    }
+    chart.setOption({
+      yAxis,
+      tooltip,
+    });
+  }, [showGridLine]);
 
   // 数据都为空显示缺省页
   const isEmpty = useMemo(

packages/extend-components/EC_HistoryView/src/index.js

@@ -215,7 +215,7 @@ const HistoryView = (props) => {
   const [contrastOption, setContrastOption] = useState('day'); // 对比时间类型: 日/月
   const [datePickerArr, setDatePickerArr] = useState(DefaultDatePicker('day')); // 对比时间段配置值
 
-  const [checkboxData, setCheckboxData] = useState(CheckboxData); // 曲线设置项
+  const [checkboxData, setCheckboxData] = useState(() => [...CheckboxData]); // 曲线设置项
   const [dataThinKey, setDataThinKey] = useState(timeIntervalList[0].key); // 曲线抽稀时间设置
 
   const [columns, setColumns] = useState([]);