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 ChartTitle = ({prefixCls, title, unit}) => {
     const cls = `${prefixCls}-grid-item-title`;
     return (
         <div className={cls}>
@@ -13,7 +13,6 @@ const ChartTitle = ({ prefixCls, title, unit }) => {
         </div>
     );
 };
-
 const GridChart = memo((props) => {
     const {
         dataSource,
@@ -22,11 +21,11 @@ const GridChart = memo((props) => {
         smooth = true,
         curveCenter,
     } = props;
-  const { prefixCls } = props;
+    const {prefixCls} = props;
 
     const gridData = useMemo(() => {
         const grids = dataSource.reduce((pre, item, index) => {
-      const { sensorName, deviceType } = item;
+            const {sensorName, deviceType} = item;
             const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
             let grid = pre.find((g) => g.key === key);
             if (!grid) {
@@ -46,21 +45,27 @@ const GridChart = memo((props) => {
 
     const options = useMemo(() => {
         let _options = gridData.map((item) => {
-      const { key, list, equipmentName, sensorName, stationCode, unit } = 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: 200,
+                        width: finalLength,
                         overflow: 'truncate',
                     },
                 },
                 legend: {
                     // orient: 'vertical',
                     itemGap: 10,
-          padding: [0, 0, 0, 200],
+                    padding: [0, 0, 0, finalLength],
                     textStyle: {
                         width: 120,
                         overflow: 'truncate',
@@ -71,7 +76,10 @@ const GridChart = memo((props) => {
                 curveCenter,
                 nameWithSensor: false,
                 showGridLine: true,
+                isMultiple: gridData.length > 1
             });
+            // 在多图表里，底部缩放条的高度减小
+
             return {
                 key,
                 option: option,
@@ -83,7 +91,7 @@ const GridChart = memo((props) => {
     return (
         <div className={`${prefixCls}-grid`}>
             {options.map((item, index) => {
-        const { sensorName, unit } = gridData[index];
+                const {sensorName, unit} = gridData[index];
                 const isEmpty =
                     !item.option.series.length ||
                     !item.option.series.find((e) => e.data && e.data.length > 0);
@@ -97,12 +105,12 @@ const GridChart = memo((props) => {
                         }}
                     >
                         <div className={`${prefixCls}-grid-item-wrap`}>
-              <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit} />
+                            <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit}/>
                             {isEmpty ? (
-                <PandaEmpty />
+                                <PandaEmpty/>
                             ) : (
                                 <BasicChart
-                  style={{ width: '100%', height: '100%' }}
+                                    style={{width: '100%', height: '100%'}}
                                     option={item.option}
                                     notMerge
                                 />

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状态*/
     /*    {