feat: 新增箱线图、置信区间功能

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

-import React, { memo, useEffect, useMemo, useRef } from 'react';
-import { BasicChart } from '@wisdom-components/basicchart';
+import React, {memo, useEffect, useMemo, useRef} from 'react';
+import {BasicChart} from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
-import optionGenerator, { alarmMarkLine, minMaxMarkPoint, offlineArea } from './utils';
-import { isArray, cloneDeep } from 'lodash';
+import optionGenerator, {alarmMarkLine, minMaxMarkPoint, offlineArea} from './utils';
+import {isArray, cloneDeep} from 'lodash';
 
 const SimgleChart = memo((props) => {
-  const {
-    dataSource,
-    contrast = false,
-    contrastOption = 'day',
-    smooth = true,
-    curveCenter,
-    showGridLine = false,
-    deviceAlarmSchemes,
-  } = props;
-  const chartRef = useRef();
+    const {
+        dataSource,
+        contrast = false,
+        contrastOption = 'day',
+        smooth = true,
+        curveCenter,
+        showGridLine = false,
+        deviceAlarmSchemes,
+        chartType,
+        justLine
+    } = props;
+    const chartRef = useRef();
 
-  const option = useMemo(() => {
-    const config = {
-      needUnit: true,
-      curveCenter,
-      showGridLine,
-      deviceAlarmSchemes,
-      showMarkLine: true,
-      showPoint: true,
-    };
-    return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
-  }, [dataSource, smooth, curveCenter]);
+    const option = useMemo(() => {
+        const config = {
+            needUnit: true,
+            curveCenter,
+            showGridLine,
+            deviceAlarmSchemes,
+            showMarkLine: true,
+            showPoint: true,
+            chartType,
+            justLine
+        };
+        return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
+    }, [dataSource, smooth, curveCenter]);
 
-  useEffect(() => {
-    chartRef.current?.resize?.();
-    const chart = chartRef.current?.getEchartsInstance?.();
+    useEffect(() => {
+        chartRef.current?.resize?.();
+        const chart = chartRef.current?.getEchartsInstance?.();
 
-    function hander(params) {
-      const { selected } = params;
-      const count = Object.values(selected || {}).filter((item) => item).length;
-      const option = cloneDeep(chart.getOption());
-      const needMarkLine = count === 1;
-      option.series.forEach((item, index) => {
-        let offlineAreas = offlineArea(dataSource[index]);
-        if (offlineAreas.data?.length) {
-          option.markArea = null;
-          item.markArea = offlineAreas;
-        }
-        if (needMarkLine && selected[item.name]) {
-          item.markLine = alarmMarkLine(
-            dataSource[index],
-            index,
-            [dataSource[index]],
-            deviceAlarmSchemes,
-          );
-          item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]);
-        } else {
-          item.markLine = {};
-          item.markPoint = {};
+        function hander(params) {
+            const {selected} = params;
+            const count = Object.values(selected || {}).filter((item) => item).length;
+            const option = cloneDeep(chart.getOption());
+            const needMarkLine = count === 1;
+            option.series.forEach((item, index) => {
+                let offlineAreas = offlineArea(dataSource[index]);
+                if (offlineAreas.data?.length) {
+                    option.markArea = null;
+                    item.markArea = offlineAreas;
+                }
+                if (needMarkLine && selected[item.name]) {
+                    item.markLine = alarmMarkLine(
+                        dataSource[index],
+                        index,
+                        [dataSource[index]],
+                        deviceAlarmSchemes,
+                    );
+                    item.markPoint = minMaxMarkPoint(dataSource[index], index, [dataSource[index]]);
+                } else {
+                    item.markLine = {};
+                    item.markPoint = {};
+                }
+            });
+            chart.setOption(option, true);
         }
-      });
-      chart.setOption(option, true);
-    }
-    if (!chart) return;
-    chart.on('legendselectchanged', hander);
-    return () => {
-      chart.off('legendselectchanged', hander);
-    };
-  }, [dataSource, deviceAlarmSchemes]);
 
-  // 网格开关，不更新整个图表
-  useEffect(() => {
-    const chart = chartRef.current?.getEchartsInstance?.();
-    if (!chart) return;
-    const option = chart.getOption();
-    // 交互指针
-    const tooltip = {
-      trigger: 'axis',
-      axisPointer: {
-        type: showGridLine ? 'cross' : 'line',
-      },
-    };
-    // 网格线
-    const axisConfig = {
-      minorTick: {
-        show: showGridLine,
-        splitNumber: 2,
-      },
-      minorSplitLine: {
-        show: showGridLine,
-        lineStyle: {
-          type: 'dashed',
-        },
-      },
-      splitLine: {
-        show: showGridLine,
-      },
-    };
-    let yAxis = axisConfig;
-    if (isArray(option.yAxis)) {
-      yAxis = option.yAxis.map((item) => ({ ...axisConfig }));
-    }
-    let xAxis = axisConfig;
-    chart.setOption({
-      xAxis,
-      yAxis,
-      tooltip,
-    });
-  }, [showGridLine]);
+        if (!chart) return;
+        chart.on('legendselectchanged', hander);
+        return () => {
+            chart.off('legendselectchanged', hander);
+        };
+    }, [dataSource, deviceAlarmSchemes]);
+
+    // 网格开关，不更新整个图表
+    useEffect(() => {
+        const chart = chartRef.current?.getEchartsInstance?.();
+        if (!chart) return;
+        const option = chart.getOption();
+        // 交互指针
+        const tooltip = {
+            trigger: 'axis',
+            axisPointer: {
+                type: showGridLine ? 'cross' : 'line',
+            },
+        };
+        // 网格线
+        const axisConfig = {
+            minorTick: {
+                show: showGridLine,
+                splitNumber: 2,
+            },
+            minorSplitLine: {
+                show: showGridLine,
+                lineStyle: {
+                    type: 'dashed',
+                },
+            },
+            splitLine: {
+                show: showGridLine,
+            },
+        };
+        let yAxis = axisConfig;
+        if (isArray(option.yAxis)) {
+            yAxis = option.yAxis.map((item) => ({...axisConfig}));
+        }
+        let xAxis = axisConfig;
+        chart.setOption({
+            xAxis,
+            yAxis,
+            tooltip,
+        });
+    }, [showGridLine]);
 
-  // 数据都为空显示缺省页
-  const isEmpty = useMemo(
-    () =>
-      !dataSource ||
-      !dataSource.length ||
-      !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
-    [dataSource],
-  );
+    // 数据都为空显示缺省页
+    const isEmpty = useMemo(
+        () =>
+            !dataSource ||
+            !dataSource.length ||
+            !dataSource.find((e) => e.dataModel && e.dataModel.length > 0),
+        [dataSource],
+    );
 
-  return isEmpty ? (
-    <PandaEmpty />
-  ) : (
-    <BasicChart ref={chartRef} option={option} notMerge style={{ width: '100%', height: '100%' }} />
-  );
+    return isEmpty ? (
+        <PandaEmpty/>
+    ) : (
+        <BasicChart ref={chartRef} option={option} notMerge style={{width: '100%', height: '100%'}}/>
+    );
 });
 
 export default SimgleChart;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import HistoryView from '../index';
 
 const deviceParams = [
-  {
+/*  {
     deviceCode: 'EGBF00000146',
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
@@ -13,7 +13,7 @@ const deviceParams = [
     sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
     pointAddressID: 4,
-  },
+  },*/
   {
     deviceCode: 'EGBF00000002',
     sensors: '进水压力,出水瞬时流量,出水累计流量',

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

@@ -3,17 +3,20 @@ import HistoryView from '../index';
 
 const deviceParams = [
   {
-    deviceCode: 'EGBF00000146',
-    sensors: '进水压力,出水瞬时流量,出水累计流量',
+    deviceCode: 'EGBF00000082',
+    sensors: '进水压力',
+    // sensors: '出水瞬时流量',
+    // sensors: '出水累计流量',
+    // sensors: '进水压力,出水瞬时流量,出水累计流量',
     deviceType: '二供泵房',
     pointAddressID: 4,
   },
-  {
-    deviceCode: 'EGJZ00001113',
+/*  {
+    deviceCode: 'EGBF00000083',
     sensors: '出水瞬时流量,出水压力,泵1状态',
     deviceType: '二供机组',
     pointAddressID: 4,
-  },
+  },*/
   // {
   //   deviceCode: 'EGJZ00001113',
   //   sensors: '出水压力',
@@ -24,7 +27,7 @@ const deviceParams = [
 const Demo = () => {
   return (
     <div style={{ height: 700 }}>
-      <HistoryView deviceParams={deviceParams} defaultModel="table" />
+      <HistoryView deviceParams={deviceParams} defaultModel="curve" />
     </div>
   );
 };