fix: 修复切换功能无法生成tip的问题

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

@@ -25,6 +25,7 @@ const ChartWidthRef = (props) => {
     const timerRef = useRef(null);
     const minMaxMarkPoint = (dataSource, chart, isInit) => {
         // 只有一个数据曲线时显示markline
+        let isMultiple = props.isMultiple
         if (dataSource.length !== 1) return {};
         // 1. 找出最大、最小的值
         let pointArr = dataSource[0].dataModel;
@@ -82,29 +83,31 @@ const ChartWidthRef = (props) => {
         // 6. 确定使用的图形
         // 默认图形，居中
         let maxIconPath = `path://M1233.329493 195.75466633h-1112.064c-34.128213 0-61.781333 27.661653-61.781333 61.781334v473.658026c0 34.117973 27.65312 61.781333 61.781333 61.781334h472.80128l83.23072 144.155306 83.23072-144.155306h472.80128c34.128213 0 61.781333-27.66336 61.781334-61.781334V257.53600033c0-34.117973-27.65312-61.781333-61.781334-61.781334z`;
-        let maxSymbolOffset = [0, -14];
+        let maxSymbolOffset = isMultiple ? [0, -14] : [0, -20];
+        let _maxOffset = isMultiple ? -14 : -20;
         if (maxOutEdge) {
             if (maxOutSide === 'left') {
                 // 左边界超出，使用朝右的图表
-                maxSymbolOffset = ['50%', -14];
+                maxSymbolOffset = ['50%', _maxOffset];
                 maxIconPath = 'path://M48.677,6.151v10c0,1.7-1.3,3-3,3h-35.5l-6.7,4c0,0,0.2-5.3,0.2-7v-10c0-1.7,1.3-3,3-3h39C47.277,3.151,48.677,4.551,48.677,6.151z';
             } else if (maxOutSide === 'right') {
                 // 右边界超出，使用朝左的图表
-                maxSymbolOffset = ['-50%', -14];
+                maxSymbolOffset = ['-50%', _maxOffset];
                 maxIconPath = 'path://M6.477,3.151h39c1.7,0,3,1.3,3,3v10c0,1.7,0.2,7,0.2,7l-6.7-4h-35.5c-1.7,0-3-1.3-3-3v-10C3.477,4.551,4.877,3.151,6.477,3.151z'
             }
         }
         // 默认图形
         let minIconPath = 'path://M131.999 849.579h1112.064c34.128 0 61.781-27.662 61.781-61.781v-473.658c0-34.118-27.653-61.781-61.781-61.781h-472.801l-83.231-144.155-83.231 144.155h-472.801c-34.128 0-61.781 27.663-61.781 61.781v473.658c0 34.118 27.653 61.781 61.781 61.781z';
-        let minSymbolOffset = [0, 14];
+        let minSymbolOffset = isMultiple ? [0, 14] : [0, 20];
+        let _minOffset = isMultiple ? 14 : 20;
         if (minOutEdge) {
             if (minOutSide === 'left') {
                 // 左边界超出，使用朝右的图表
-                minSymbolOffset = ['50%', 14];
+                minSymbolOffset = ['50%', _minOffset];
                 minIconPath = 'path://M45.677,23.151h-39c-1.7,0-3-1.3-3-3v-10c0-1.7-0.2-7-0.2-7l6.7,4h35.5c1.7,0,3,1.3,3,3v10C48.677,21.751,47.277,23.151,45.677,23.151z';
             } else if (minOutSide === 'right') {
                 // 右边界超出，使用朝左的图表
-                minSymbolOffset = ['-50%', 14];
+                minSymbolOffset = ['-50%', _minOffset];
                 minIconPath = 'path://M3.477,20.151v-10c0-1.7,1.3-3,3-3h35.5l6.7-4c0,0-0.2,5.3-0.2,7v10c0,1.7-1.3,3-3,3h-39C4.877,23.151,3.477,21.751,3.477,20.151z'
             }
         }
@@ -118,15 +121,15 @@ const ChartWidthRef = (props) => {
                 symbol: minIconPath,
                 symbolSize: (e) => {
                     let str = ![undefined, null].includes(e) ? String(e) : '';
-                    let length = 40 + str.length * 6
-                    return [length, 20]
+                    let length = (isMultiple ? 40 : 60) + str.length * 6
+                    return [length, isMultiple ? 20 : 32]
                 },
                 label: {
                     show: true,
                     color: '#fff',
                     formatter: '最小: {c}',
-                    fontSize: 12,
-                    fontWeight: 'normal',
+                    fontSize: isMultiple ? 12 : 14,
+                    fontWeight: isMultiple ? 'normal' : 'bold',
                     verticalAlign: 'top',
                     offset: [0, -2]
                 },
@@ -142,20 +145,20 @@ const ChartWidthRef = (props) => {
                 symbolOffset: maxSymbolOffset,
                 symbolSize: (e) => {
                     let str = ![undefined, null].includes(e) ? String(e) : '';
-                    let length = 40 + str.length * 6
-                    return [length, 20]
+                    let length = (isMultiple ? 40 : 60) + str.length * 6
+                    return [length, isMultiple ? 20 : 32]
                 },
                 itemStyle: {
                     // color: "#1980ff",
                 },
                 label: {
-                    color: '#fff',
-                    fontSize: 12,
-                    fontWeight: 'normal',
                     show: true,
+                    color: '#fff',
                     formatter: '最大: {c}',
-                    offset: [0, -1]
-                }
+                    fontSize: isMultiple ? 12 : 14,
+                    fontWeight: isMultiple ? 'normal' : 'bold',
+                    offset: [0, -2]
+                },
             },
             {
                 name: '',
@@ -195,18 +198,43 @@ const ChartWidthRef = (props) => {
     };
     // 将opt修改一下
     const cur_opt = useMemo(() => {
+        let _option = cloneDeep(props.option);
+        const chart = ref.current?.getEchartsInstance?.();
+        if (_option?.series?.[0] && chart) {
+            _option.series[0].markPoint = minMaxMarkPoint(props.data.list, chart, true);
+            _option.series[0].markLine = {
+                silent: false,
+                symbol: 'none',
+                data: [{
+                    name: '平均线',
+                    type: 'average',
+                    lineStyle: {
+                        color: '#00b8b1',
+                        type: 'solid',
+                    },
+                    label: {
+                        position: 'insideEndTop',
+                        color: '#00b8b1',
+                        formatter: function (param) {
+                            return `平均值:${param.value}`;
+                        },
+                    },
+                }]
+            }
+        }
         return {
-            ...props.option, grid: {
-                ...props.option,
+            ..._option, grid: {
+                ...props.option.grid,
                 top: 45,
                 bottom: 65,
             }
         }
-    }, [props.option]);
+    }, [props.option, ref, props.data.list]);
 
     useEffect(() => {
-        console.log('props.opt: ', props.option);
+        ref.current?.resize?.();
         if (props.data.list?.length !== 1) return;
+
         const chart = ref.current?.getEchartsInstance?.();
         chart.setOption({
             series: {
@@ -242,11 +270,7 @@ const ChartWidthRef = (props) => {
             chart.off('legendselectchanged', renderMarkPoint);
             chart.off('datazoom', dataZoomFn);
         }
-    }, [cur_opt]);
-    useEffect(() => {
-        if (props.data.list?.length !== 1) return;
-        renderMarkPoint(false)
-    }, [props.data.list]);
+    }, [JSON.stringify(cur_opt)]);
     return <BasicChart
         ref={ref}
         {...props}
@@ -530,6 +554,7 @@ const GridChart = memo((props) => {
                                 isInit ? '' : <PandaEmpty/>
                             ) : (
                                 <ChartWidthRef
+                                    isMultiple={gridData.length > 1}
                                     data={gridData[index]}
                                     style={{width: '100%', height: '100%'}}
                                     option={item.option}