feat: 提交历史曲线优化

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

@@ -3,13 +3,18 @@ import HistoryView from '../index';
 import {MobileHistoryChart} from "../mobile";
 
 const deviceParams = [
-       {
+/*       {
           deviceCode: 'EGBF00000141',
           // sensors: '进水压力,出水瞬时流量,出水累计流量',
           sensors: '进水压力',
           deviceType: '二供泵房',
           pointAddressID: 208,
-        },
+        },*/
+    {
+        "deviceCode": "SYJ00000008",
+        "sensors": "瞬时流量",
+        "deviceType": "水源井"
+    },
     /*    {
             // deviceCode: 'EGBF00000002',
             // deviceCode: 'EGBF00000018',

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

@@ -3,6 +3,7 @@ import _, {isArray} from 'lodash';
 import maxIcon from './assets/最大实心.svg';
 import minIcon from './assets/最小实心.svg';
 import minIconDownArrow from './assets/最小实心箭头朝下.svg';
+import lineChart from "@wisdom-components/basicchart/es/LineChart";
 
 /** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
 const AXIS_WIDTH = 40;
@@ -311,7 +312,7 @@ const headTemplate = (param, opt) => {
     return `<div style="border-bottom: 1px solid #F0F0F0; color: #808080; margin-bottom:${handlePx(5, 'px')}; padding-bottom: ${handlePx(5, 'px')};">${text}</div>`;
 };
 const seriesTemplate = (param, unit) => {
-    if (!param) return '';
+    if (!param || param.seriesName === '自定义') return '';
     const {value, encode} = param;
     // const val = value[encode.y[0]];
     const _unit = unit || '';
@@ -538,7 +539,7 @@ const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
     const rightNum = Math.floor(yAxisMap.size / 2);
     return {leftNum, rightNum, yAxis};
 }
-const assignOptions = (restOption, xAxis, legendData) => {
+const assignOptions = (restOption, xAxis, legendData, chartType) => {
     restOption.dataZoom = [
         {
             show: true,
@@ -548,7 +549,7 @@ const assignOptions = (restOption, xAxis, legendData) => {
             height: currentOption['dataZoomHeight'],
             type: 'inside',
             zoomOnMouseWheel: true,
-            filterMode: 'none'
+            filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter'
         },
         {
             show: true,
@@ -590,26 +591,28 @@ const returnMaxOrMinNumber = (dataSource, type) => {
         let _img = type === 'max' ? maxIcon : minIconDownArrow;
         _value.push(_img);
         _value.push(type);
+        // 把最大值最小值都push进去，方便计算
     }
     return _value;
 };
 
 const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
     // 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
-    let _base = 70;
+    let _base = 60;
     let _topForUnit = needUnit ? 20 : 0;
     return {
         top: _base + _topForUnit,
-        left: leftNum * AXIS_WIDTH,
-        right: rightNum === 0 ? 40 : rightNum * AXIS_WIDTH,
+        left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
+        right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
         bottom: 60,
         containLabel: true
     };
 };
 const renderItem = (params, api) => {
-    let _numberStringWidth = String(api.value(1)).length * 12;
     let _base = params.dataIndex;
-    let _left = 40;
+    let _baseChartWidth = 10;
+    let _numberStringWidth = _base === 1 && api.value(3) === 'max' ? String(api.value(4) || 0).length * _baseChartWidth : String(api.value(1)).length * _baseChartWidth;
+    let _left = 30;
     let _baseWidth = 190 + _numberStringWidth;
     let _imgWidth = 45;
     let _dateWidth = 128;
@@ -657,11 +660,18 @@ const renderItem = (params, api) => {
 const returnCustomSeries = (dataSource) => {
     let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
     let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
+    // 需要将最大值最小分别传入，后续计算图例位置需要，先min后max
+    let _max = _maxNumber[1];
+    let _min = _minNumber[1];
+    [_maxNumber, _minNumber].forEach(item => {
+        item.push(_min);
+        item.push(_max);
+    })
     return {
         name: '自定义',
         type: 'custom',
         renderItem: renderItem,
-        data: [_maxNumber, _minNumber],
+        data: [_minNumber, _maxNumber],
     }
 };
 /**
@@ -814,7 +824,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             };
         }
         // 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
-        if (dataSource?.[0]?.dataModel?.length) {
+        if (dataSource?.[0]?.dataModel?.length && chartType === 'lineChart') {
             let _customSeries = returnCustomSeries(dataSource);
             series.push(_customSeries)
         }
@@ -823,7 +833,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     }
     tooltip.timeFormat = tooltipTimeFormat;
     let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
-    assignOptions(restOption, xAxis, _legendData);
+    assignOptions(restOption, xAxis, _legendData, chartType);
     return {
         yAxis,
         grid,