feat: 标题被legend覆盖问题的优化；相同数据的轴合并

packages/base-components/BasicChart/src/utils/legend.js

@@ -18,8 +18,6 @@ export const buildDefaultLegend = (option) => {
         textStyle: {
             padding: [0, 0, 0, 4],
             color: '#2d2d2d',
-            width: 120,
-            overflow:'truncate'
         },
         tooltip:{
             show:true

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

-import React, { memo, useMemo } from 'react';
+import React, {memo, useMemo} from 'react';
 import _ from 'lodash';
-import { BasicChart } from '@wisdom-components/basicchart';
+import {BasicChart} from '@wisdom-components/basicchart';
 import PandaEmpty from '@wisdom-components/empty';
 import optionGenerator from './utils';
 
-const ChartTitle = ({ prefixCls, title, unit }) => {
-  const cls = `${prefixCls}-grid-item-title`;
-  return (
-    <div className={cls}>
-      <span className={`${cls}_text`}>{title}</span>
-      {unit && <span className={`${cls}_unit`}>（单位：{unit}）</span>}
-    </div>
-  );
+const ChartTitle = ({prefixCls, title, unit}) => {
+    const cls = `${prefixCls}-grid-item-title`;
+    return (
+        <div className={cls}>
+            <span className={`${cls}_text`}>{title}</span>
+            {unit && <span className={`${cls}_unit`}>（单位：{unit}）</span>}
+        </div>
+    );
 };
-
 const GridChart = memo((props) => {
-  const {
-    dataSource,
-    contrast = false,
-    contrastOption = 'day',
-    smooth = true,
-    curveCenter,
-  } = props;
-  const { prefixCls } = props;
+    const {
+        dataSource,
+        contrast = false,
+        contrastOption = 'day',
+        smooth = true,
+        curveCenter,
+    } = props;
+    const {prefixCls} = props;
 
-  const gridData = useMemo(() => {
-    const grids = dataSource.reduce((pre, item, index) => {
-      const { sensorName, deviceType } = item;
-      const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
-      let grid = pre.find((g) => g.key === key);
-      if (!grid) {
-        const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
-        grid = {
-          key: key,
-          list: [],
-          ...restProp,
-        };
-        pre.push(grid);
-      }
-      grid.list.push(item);
-      return pre;
-    }, []);
-    return grids;
-  }, [dataSource]);
+    const gridData = useMemo(() => {
+        const grids = dataSource.reduce((pre, item, index) => {
+            const {sensorName, deviceType} = item;
+            const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
+            let grid = pre.find((g) => g.key === key);
+            if (!grid) {
+                const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
+                grid = {
+                    key: key,
+                    list: [],
+                    ...restProp,
+                };
+                pre.push(grid);
+            }
+            grid.list.push(item);
+            return pre;
+        }, []);
+        return grids;
+    }, [dataSource]);
 
-  const options = useMemo(() => {
-    let _options = gridData.map((item) => {
-      const { key, list, equipmentName, sensorName, stationCode, unit } = item;
-      const cusOption = {
-        title: {
-          show: true,
-          // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
-          text: ' ',
-          textStyle: {
-            width: 200,
-            overflow: 'truncate',
-          },
-        },
-        legend: {
-          // orient: 'vertical',
-          itemGap: 10,
-          padding: [0, 0, 0, 200],
-          textStyle: {
-            width: 120,
-            overflow: 'truncate',
-          },
-        },
-      };
-      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
-        curveCenter,
-        nameWithSensor: false,
-        showGridLine: true,
-      });
-      return {
-        key,
-        option: option,
-      };
-    });
-    return _options;
-  }, [gridData, smooth, curveCenter]);
+    const options = useMemo(() => {
+        let _options = gridData.map((item) => {
+            const {key, list, equipmentName, sensorName, stationCode, unit} = item;
+            let max = 300;
+            // 5：左侧竖条的宽度；10：标题部分的左侧margin；
+            // sensorName长度*单个宽度16.7；5：单位部分的左侧margin；
+            // 91：单位部分的宽度（格式固定，宽度相对固定）
+            let maxTitleLength = 5 + 10 + sensorName.length * 16.7 + 5 + 91;
+            let finalLength = maxTitleLength > max ? max : maxTitleLength
+            const cusOption = {
+                title: {
+                    show: true,
+                    // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
+                    text: ' ',
+                    textStyle: {
+                        width: finalLength,
+                        overflow: 'truncate',
+                    },
+                },
+                legend: {
+                    // orient: 'vertical',
+                    itemGap: 10,
+                    padding: [0, 0, 0, finalLength],
+                    textStyle: {
+                        width: 120,
+                        overflow: 'truncate',
+                    },
+                },
+            };
+            const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
+                curveCenter,
+                nameWithSensor: false,
+                showGridLine: true,
+                isMultiple: gridData.length > 1
+            });
+            // 在多图表里，底部缩放条的高度减小
+
+            return {
+                key,
+                option: option,
+            };
+        });
+        return _options;
+    }, [gridData, smooth, curveCenter]);
 
-  return (
-    <div className={`${prefixCls}-grid`}>
-      {options.map((item, index) => {
-        const { sensorName, unit } = gridData[index];
-        const isEmpty =
-          !item.option.series.length ||
-          !item.option.series.find((e) => e.data && e.data.length > 0);
-        return (
-          <div
-            key={item.key}
-            className={`${prefixCls}-grid-item`}
-            style={{
-              height: gridData.length === 1 ? '100%' : '',
-              width: gridData.length === 1 ? '100%' : '',
-            }}
-          >
-            <div className={`${prefixCls}-grid-item-wrap`}>
-              <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit} />
-              {isEmpty ? (
-                <PandaEmpty />
-              ) : (
-                <BasicChart
-                  style={{ width: '100%', height: '100%' }}
-                  option={item.option}
-                  notMerge
-                />
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
+    return (
+        <div className={`${prefixCls}-grid`}>
+            {options.map((item, index) => {
+                const {sensorName, unit} = gridData[index];
+                const isEmpty =
+                    !item.option.series.length ||
+                    !item.option.series.find((e) => e.data && e.data.length > 0);
+                return (
+                    <div
+                        key={item.key}
+                        className={`${prefixCls}-grid-item`}
+                        style={{
+                            height: gridData.length === 1 ? '100%' : '',
+                            width: gridData.length === 1 ? '100%' : '',
+                        }}
+                    >
+                        <div className={`${prefixCls}-grid-item-wrap`}>
+                            <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit}/>
+                            {isEmpty ? (
+                                <PandaEmpty/>
+                            ) : (
+                                <BasicChart
+                                    style={{width: '100%', height: '100%'}}
+                                    option={item.option}
+                                    notMerge
+                                />
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
 });
 
 export default GridChart;

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

@@ -4,25 +4,25 @@ import { MobileHistoryChart } from "../mobile";
 
 const deviceParams = [
     /*10.182*/
-    /*          {
+/*              {
                     deviceCode: 'EGBF00000141',
                     // sensors: '进水压力,出水瞬时流量,出水累计流量',
                     sensors: '进水压力',
                     deviceType: '熊猫二供泵房',
                     pointAddressID: 208,
-                }, */
+                },*/
 /*     {
         "deviceCode": "SYJ00000008",
         "sensors": "瞬时流量",
         "deviceType": "水源井"
-    },
+    },*/
     {
         deviceCode: 'EGJZ00000197',
         sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
         // sensors: '1#变频器运行频率',
         deviceType: '二供机组',
         // pointAddressID: 208,
-    }, */
+    },
     /*     {
             deviceCode: 'EGJZ00000198',
             sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
@@ -63,7 +63,7 @@ const deviceParams = [
             "sensors": "瞬时流量",
             "deviceType": "水厂"
         }, */
-        {
+/*        {
             "deviceCode": "JFJ00000001",
             "sensors": "沉淀池投矾量瞬时,",
             "deviceType": "加矾间"
@@ -92,7 +92,7 @@ const deviceParams = [
             deviceCode: 'EGJZ00000027',
             sensors: '2#变频器运行频率',
             deviceType: '二供机组',
-        },
+        },*/
     /*确山*/
     /*泵3状态*/
     /*    {