feat: 优化图表

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

@@ -14,7 +14,7 @@ const SimgleChart = memo((props) => {
     showGridLine = true,
     deviceAlarmSchemes,
     chartType,
-    justLine,
+    // justLine,
     showBoxOption
   } = props;
   const chartRef = useRef();
@@ -28,7 +28,7 @@ const SimgleChart = memo((props) => {
       showMarkLine: true,
       showPoint: true,
       chartType,
-      justLine,
+      // justLine,
       showBoxOption
     };
     return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);

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

@@ -80,14 +80,15 @@ const CheckboxData = [
         showInTable: true,
         tooltip: '本算法采用递推平均滤波法（滑动平均滤波法）对采样数据进行均值化平滑处理。',
     },
-    {
+//    需求变更，剔除
+/*    {
         key: 'justLine',
         label: '仅查看曲线',
         type: '',
         checked: false,
         showInCurve: false,
         showInTable: false,
-    },
+    },*/
     {
         key: 'dataThin',
         label: '数据抽稀',
@@ -360,11 +361,13 @@ const HistoryView = (props) => {
             onContrastChange(contrastOption);
             setShowBoxOption(false);
             setChartType('lineChart');
-            onCheckboxChange({target: {value: false}}, 'chartType')
+            onCheckboxChange({target: {value: false}}, 'chartType');
+            onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
         } else {
             // 自定义
             // 不需要处理
-            setShowBoxOption(true)
+            setShowBoxOption(true);
+            onCheckboxChange({target: {value: true}}, 'chartType');
         }
     };
 
@@ -429,22 +432,29 @@ const HistoryView = (props) => {
     // 曲线设置项选择/取消
     const onCheckboxChange = (e, key, showJustLine) => {
         let data = [...checkboxData];
-        let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
+        // let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
         let _index1 = data.findIndex(item => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示
         data.forEach((item) => {
             if (item.key === key) {
                 item.checked = e.target.checked;
             }
         });
-        if (key === 'ignoreOutliers' && showJustLine) {
-            data[_index].showInCurve = e.target.checked;
-            data[_index].checked = e.target.checked;
+        if (key === 'ignoreOutliers') {
+//            需求变更，仅查看曲线剔除
+/*            if (showJustLine) {
+                data[_index].showInCurve = e.target.checked;
+                data[_index].checked = e.target.checked;
+            } else {*/
+                data[_index1].showInCurve = true;
+                // data[_index1].checked = false;
+            // }
         }
+
         if (key === 'chartType') {
             data[_index1].showInCurve = e.target.value;
             data[_index1].checked = false;
-            data[_index].showInCurve = false;
-            data[_index].checked = false;
+            // data[_index].showInCurve = false;
+            // data[_index].checked = false;
         }
         setCheckboxData(data);
     };
@@ -463,7 +473,7 @@ const HistoryView = (props) => {
         return (
             (curveAccess || tableAccess) && (
                 <>
-                    <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key, showJustLine)}>
+                    <Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
                         {child.label}
                     </Checkbox>
                     {child.tooltip && (
@@ -690,7 +700,7 @@ const HistoryView = (props) => {
             return;
         }
         dateRange.forEach((item) => {
-            let _showLine = checkboxData.find(item => item.key === 'justLine');
+            // let _showLine = checkboxData.find(item => item.key === 'justLine');
             const param = {
                 isDilute,
                 zoom,
@@ -780,7 +790,7 @@ const HistoryView = (props) => {
                                 showGridLine={chartGrid}
                                 prefixCls={prefixCls}
                                 dataSource={chartDataSource}
-                                justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
+                                // justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
                                 chartType={isBoxPlots ? chartType : null}
                                 contrast={timeValue === 'contrast'}
                                 contrastOption={contrastOption}

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

@@ -138,8 +138,8 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
     // 只有一个数据曲线时显示markline
     if (!dataItem || dataSource.length !== 1) return {};
     const data = [];
-    data.push({type: 'min', name: '最小: '});
-    data.push({type: 'max', name: '最大: '});
+    data.push({type: 'min', name: '最小: ',});
+    data.push({type: 'max', name: '最大: ',});
     return {
         symbolSize: 1,
         symbolOffset: [0, '50%'],
@@ -258,7 +258,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     const showPoint = _.get(config, 'showPoint', false);
     const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
     const chartType = _.get(config, 'chartType', null);
-    const justLine = _.get(config, 'justLine', false);
+    // const justLine = _.get(config, 'justLine', false);
     const showBoxOption = _.get(config, 'showBoxOption', false);
     // 自定义属性
     const restOption = _.pick(cusOption, ['title', 'legend']);
@@ -373,7 +373,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     const tooltipAccessor = (unit) => {
         return {
             formatter: function (params, ticket, callback) {
-                debugger
                 let tooltipHeader = '';
                 let tooltipContent = '';
                 if (isArray(params)) {
@@ -385,7 +384,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
                     tooltipHeader = headTemplate(params);
                     tooltipContent += seriesTemplate(params, unit);
                 }
-                debugger
                 return `
       <div>
         ${tooltipHeader}
@@ -471,7 +469,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         // }
     };
     // 增加箱线图的逻辑，单曲线才存在
-    if (!justLine && chartType && showBoxOption) {
+    if (chartType && showBoxOption) {
         if (chartType === 'boxChart') {
             const otherData = dataSource?.[0]?.dataModel.map(item => {
                 const {firstPV, lastPV, maxPV, minPV, pt} = item;
@@ -578,9 +576,21 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             bottom: 10,
             start: 0,
             end: 100,
-            height: 28
+            height: 28,
+            type: 'inside',
+            zoomOnMouseWheel: true
+        },
+        {
+            show: true,
+            bottom: 10,
+            start: 0,
+            end: 100,
+            height: 28,
+            type: 'slider',
+            zoomOnMouseWheel: true
         }
     ];
+    xAxis.minInterval = 3600 * 1 * 1000
     return {
         yAxis,
         grid,