fix: 修复切换曲线形态markpoint消失的问题；修复时间切换、时间面板展开关闭导致的bug

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

-import React, {memo, useEffect, useMemo, useState} from 'react';
+import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
 import _, {cloneDeep} from 'lodash';
 import {BasicChart} from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
@@ -263,7 +263,10 @@ const GridChart = memo((props) => {
         });
         return _options;
     }, [gridData, smooth, curveCenter]);
-
+    const chartRef = dataSource.map((item, index) => useRef(null));
+    useEffect(() => {
+        chartRef.forEach(item => {item?.current?.resize?.()})
+    }, [options]);
     return (
         <div className={`${prefixCls}-grid`}>
             {options.map((item, index) => {
@@ -286,6 +289,7 @@ const GridChart = memo((props) => {
                                 isInit ? '' : <PandaEmpty/>
                             ) : (
                                 <BasicChart
+                                    ref={chartRef[index]}
                                     style={{width: '100%', height: '100%'}}
                                     option={item.option}
                                     notMerge

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

@@ -35,7 +35,7 @@ const SingleChart = memo((props) => {
     const timerRef = useRef();
     const SpecialType = ['状态值', '开关值']; // 横向柱状条
 
-    const minMaxMarkPoint = (dataSource,chart) => {
+    const minMaxMarkPoint = (dataSource, chart, isInit) => {
         // 只有一个数据曲线时显示markline
         if (dataSource.length !== 1) return {};
         // 1. 找出最大、最小的值
@@ -49,23 +49,30 @@ const SingleChart = memo((props) => {
         let maxPoint = pointArr[maxValueIndex];
         let minPoint = pointArr[minValueIndex];
         if (!maxPoint || !minPoint) return {}
-        // 3. 计算坐标位置，返回的是 [x,y]的像素坐标
-        let maxPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(maxPoint.pt).valueOf(), maxPoint.pv])
-        let minPointPosition = chart.convertToPixel({seriesIndex: 0}, [moment(minPoint.pt).valueOf(), minPoint.pv])
-        if (!maxPointPosition || !minPointPosition) return;
-        // 4. 计算最大最小值的标签宽度
-        let maxLength = 80 + String(maxValue).length * 5;
-        let minLength = 80 + String(minValue).length * 5;
-        // 5. 获取实例的宽度
+        // 3. 通过最大值、最小值，数组的首值尾值以及图表宽度来确认markpoint的位置
+        let _opts = chart.getOption();
+        let zoom = _opts.dataZoom[0];
+        let startPoint = pointArr[0];
+        let endPoint = pointArr[pointArr.length - 1];
+        let timePeriod = isInit ? moment(endPoint.pt) - moment(startPoint.pt) : zoom.endValue - zoom.startValue;
         let chartWidth = chart.getWidth();
-        // 6. 确定是否超出边界，确定超出边界是哪一边；
-        let maxTagLeft = maxPointPosition[0] - maxLength / 2;
-        let maxTagRight = maxPointPosition[0] + maxLength / 2;
-        let minTagLeft = minPointPosition[0] - minLength / 2;
-        let minTagRight = minPointPosition[0] + minLength / 2;
+        // 需要考虑是否为0的情况
+        // 4. 计算最大最小值的标签宽度
+        let maxLength = 70 + String(maxValue).length * 5;
+        let minLength = 70 + String(minValue).length * 5;
+        // 5. 确定是否超出边界，确定超出边界是哪一边；
+        // 用首尾时间评分
+        let gapOfYAxisToEdge = 62;
+        let startTime = isInit ? moment(startPoint.pt) : zoom.startValue;
+        let maxPointPosition = ((chartWidth - gapOfYAxisToEdge) / timePeriod) * (moment(maxPoint.pt).valueOf() - startTime) + gapOfYAxisToEdge;
+        let minPointPosition = ((chartWidth - gapOfYAxisToEdge) / timePeriod) * (moment(minPoint.pt).valueOf() - startTime) + gapOfYAxisToEdge;
+        let maxTagLeft = maxPointPosition - maxLength / 2;
+        let maxTagRight = maxPointPosition + maxLength / 2;
+        let minTagLeft = minPointPosition - minLength / 2;
+        let minTagRight = minPointPosition + minLength / 2;
+
         let maxOutEdge = false, minOutEdge = false;
         let maxOutSide = '', minOutSide = '';
-
         // 在实际使用中，我们认为不存在一个tag同时超出边界的情况。
         if (maxTagLeft < 0) {
             maxOutEdge = true;
@@ -84,7 +91,7 @@ const SingleChart = memo((props) => {
             minOutEdge = true;
             minOutSide = 'right';
         }
-        // 7. 确定使用的图形
+        // 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, -20];
@@ -189,11 +196,11 @@ const SingleChart = memo((props) => {
         };
     };
 
-    const renderMarkPoint = () => {
+    const renderMarkPoint = (isInit) => {
         if (timerRef.current) clearTimeout(timerRef.current);
         const chart = chartRef.current?.getEchartsInstance?.();
         timerRef.current = setTimeout(() => {
-            chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource,chart)}})
+            chart.setOption({series: {markPoint: minMaxMarkPoint(dataSource, chart, isInit)}})
         }, 200)
     };
 
@@ -228,7 +235,7 @@ const SingleChart = memo((props) => {
         // 将markPoint配置加入
         const chart = chartRef.current?.getEchartsInstance?.();
         if (_option?.series?.[0] && chart) {
-            _option.series[0].markPoint = minMaxMarkPoint(dataSource,chart);
+            _option.series[0].markPoint = minMaxMarkPoint(dataSource, chart, true);
         }
         if (emptyOrError.empty || emptyOrError.error) {
             if (isArray(_option.yAxis)) {
@@ -244,7 +251,7 @@ const SingleChart = memo((props) => {
         // 加入bi模式
         if (theme === 'BI') _option = patchBIOption(_option, BI);
         return _option;
-    }, [dataSource, smooth, curveCenter, chartType, predicateData,chartRef]);
+    }, [dataSource, smooth, curveCenter, chartType, predicateData, chartRef]);
     useEffect(() => {
         if (exportCanvas.exportFlag) {
             const chart = chartRef.current?.getEchartsInstance?.();
@@ -259,6 +266,7 @@ const SingleChart = memo((props) => {
     useEffect(() => {
         chartRef.current?.resize?.();
         const chart = chartRef.current?.getEchartsInstance?.();
+
         function hander(params) {
             const {selected} = params;
             const count = Object.values(selected || {}).filter((item) => item).length;
@@ -272,7 +280,6 @@ const SingleChart = memo((props) => {
                         [dataSource[index]],
                         deviceAlarmSchemes,
                     );
-                    // item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]);
                 } else {
                     item.markLine = {};
                     item.markPoint = {};
@@ -280,15 +287,20 @@ const SingleChart = memo((props) => {
             });
             chart.setOption(option, true);
         }
+
+        function dataZoomFn() {
+            renderMarkPoint(false)
+        }
+
         if (!chart) return;
-        renderMarkPoint();
+        // renderMarkPoint(true);
         chart.on('legendselectchanged', hander);
         chart.on('legendselectchanged', renderMarkPoint);
-        chart.on('datazoom', renderMarkPoint);
+        chart.on('datazoom', dataZoomFn);
         return () => {
             chart.off('legendselectchanged', hander);
             chart.off('legendselectchanged', renderMarkPoint);
-            chart.off('datazoom', renderMarkPoint);
+            chart.off('datazoom', dataZoomFn);
         };
     }, [JSON.stringify(option)]);
 
@@ -337,6 +349,7 @@ const SingleChart = memo((props) => {
         });
     }, [showGridLine]);
     return <BasicChart theme={theme} ref={chartRef} option={option} notMerge
+        // return <BasicChart theme={theme} ref={chartRef} notMerge
                        style={{width: '100%', height: '100%'}}/>
 });
 

packages/extend-components/EC_HistoryView/src/demos/GridDemo.js

@@ -95,14 +95,16 @@ import HistoryView from '../index';
 ];*/
 const deviceParams = [
     {
-        "deviceCode": "SZJCY00000001",
-        "sensors": "温度,压力,浊度,二氧化氯",
+        "deviceCode": "SZJCY00000006",
+        "sensors": "浊度,pH,余氯",
         "deviceType": "水质监测仪"
     }
 ]
 const Demo = () => {
-    return <div style={{height: 700}}>
-        <HistoryView deviceParams={deviceParams} grid/>
+    return <div>
+        <div style={{height: 700}}>
+            <HistoryView deviceParams={deviceParams} grid/>
+        </div>
     </div>;
 };