feat: 优化图表代码

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

@@ -319,6 +319,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         top: needUnit ? 80 : 60,
         left: 10 + leftNum * axisWidth,
         right: rightNum === 0 ? 20 : rightNum * axisWidth,
+        bottom: 60
     };
     const headTemplate = (param) => {
         if (!param) return '';
@@ -465,18 +466,19 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
     if (!justLine && chartType) {
         if (chartType === 'boxChart') {
             const otherData = dataSource?.[0]?.dataModel.map(item => {
-                const {firstPV, lastPV, maxPV, minPV} = item;
-                return [firstPV, lastPV, minPV, maxPV]
+                const {firstPV, lastPV, maxPV, minPV, pt} = item;
+                return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV]
             }) || []; //当存在othersData的时候，只是单曲线
-            xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
+            // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             let unit = ''
             series = series.map(item => {
                 if (item.unit) unit = item.unit;
                 let _item = {...item, symbol: 'none'};
-                _item.data = _item?.data?.map(d => {
+                /*                _item.data = _item?.data?.map(d => {
                                     return d[1] || null
-                }) || [];
+                                }) || [];*/
                 return _item;
             })
             series.push({
@@ -495,18 +497,21 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
         } else {
             let _maxData = [];
             let _minData = [];
+            const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';// 用来做同期对比，把日期拉到同一区间
             dataSource?.[0]?.dataModel.forEach(item => {
-                const {firstPV, lastPV, maxPV, minPV} = item;
-                _maxData.push(maxPV);
-                _minData.push(minPV);
+                const {firstPV, lastPV, maxPV, minPV, pt} = item;
+                let time = contrast ? moment(pt).format(formatStr) : pt;
+                _maxData.push([moment(time).valueOf(), maxPV - minPV]);
+                _minData.push([moment(time).valueOf(), minPV]);
             }); //当存在othersData的时候，只是单曲线
-            xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
+            // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             series = series.map(item => {
                 let _item = {...item, symbol: 'none'};
-                _item.data = _item?.data?.map(d => {
+                /*                _item.data = _item?.data?.map(d => {
                                     return d[1] || null
-                }) || [];
+                                }) || [];*/
                 return _item;
             });
             console.log(series);
@@ -530,6 +535,15 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
             })
         }
     }
+    restOption.dataZoom = [
+        {
+            show: true,
+            bottom: 10,
+            start: 0,
+            end: 100,
+            height: 28
+        }
+    ];
     return {
         yAxis,
         grid,