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

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

 import moment from 'moment';
-import _, { isArray } from 'lodash';
+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';
-import { offset } from 'highcharts';
 
 /** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
 const AXIS_WIDTH = 40;
@@ -68,7 +67,7 @@ const currentOption = isMobile() ? MOBILE_OPTION : PC_OPTION;
  * @returns
  */
 const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
-  const { equipmentName, sensorName, unit, dataModel, dateFrom, dateTo } = data;
+    const {equipmentName, sensorName, unit, dataModel, dateFrom, dateTo} = data;
     let name = nameWithSensor ? `${equipmentName}-${sensorName}` : equipmentName;
     if (contrast) {
         const time = dateFrom.slice(0, contrastOption === 'day' ? 10 : 7).replace(/-/g, '');
@@ -103,7 +102,7 @@ const dataAccessor = (data, contrast, contrastOption) => {
  * @returns Null/areaStyle, 为null显示曲线图, 为areaStyle对象显示为面积图.
  */
 const areaStyleFormatter = (data) => {
-  const { sensorName } = data;
+    const {sensorName} = data;
     return sensorName && sensorName.indexOf('流量') > -1 ? {} : null;
 };
 
@@ -114,7 +113,7 @@ const areaStyleFormatter = (data) => {
  * @returns
  */
 const minMax = (data) => {
-  const { dataModel } = data;
+    const {dataModel} = data;
     let min = Number.MAX_SAFE_INTEGER;
     let max = Number.MIN_SAFE_INTEGER;
     dataModel.forEach((item) => {
@@ -145,7 +144,7 @@ const markLineItem = (name, value, color) => {
 export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
     // 只有一个数据曲线时显示markline
     if (!dataItem || !schemes || dataSource.length !== 1) return {};
-  const { deviceType, stationCode, sensorName, decimalPoint } = dataItem;
+    const {deviceType, stationCode, sensorName, decimalPoint} = dataItem;
     const curSchemes = schemes.filter(
         (item) =>
             item.deviceCode === stationCode &&
@@ -154,7 +153,7 @@ export const alarmMarkLine = (dataItem, index, dataSource, schemes) => {
     );
     const data = [];
     curSchemes.forEach((scheme) => {
-    const { hLimit, hhLimit, lLimit, llLimit } = scheme;
+        const {hLimit, hhLimit, lLimit, llLimit} = scheme;
         lLimit !== null && lLimit !== void 0 && data.push(markLineItem('低限', lLimit, '#fa8c16'));
         hLimit !== null && hLimit !== void 0 && data.push(markLineItem('高限', hLimit, '#fa8c16'));
         llLimit !== null && llLimit !== void 0 && data.push(markLineItem('低低限', llLimit, '#FF0000'));
@@ -246,7 +245,7 @@ export const decorateAxisGridLine = (axis, showGrid) => {
  */
 export const offlineArea = (dataItem) => {
     if (!dataItem) return {};
-  const { dataModel } = dataItem;
+    const {dataModel} = dataItem;
     let datas = new Array();
     let offlineData = [];
     let hasOffline = false;
@@ -256,7 +255,7 @@ export const offlineArea = (dataItem) => {
                 {
                     name: '离线',
                     xAxis: new Date(item.pt),
-          label: { show: !datas?.length },
+                    label: {show: !datas?.length},
                 },
             ];
             hasOffline = true;
@@ -277,32 +276,10 @@ export const offlineArea = (dataItem) => {
         data: datas,
     };
 };
-// 生成默认legend配置
-export const buildDefaultLegend = (option) => {
-  const { title } = option;
-
-  let paddingRight = 0;
-  if (title && title.show) paddingRight = 80; // 给标题留够空间
-
-  return {
-    show: true,
-    right: 20,
-    top: 20,
-    icon: 'rect',
-    itemWidth: 14,
-    itemHeight: 8,
-    itemGap: 20,
-    padding: [0, 0, 0, paddingRight],
-    textStyle: {
-      padding: [0, 0, 0, 4],
-      color: '#2d2d2d',
-    },
-  };
-};
 // tooltip 模板
 const headTemplate = (param, opt) => {
     if (!param) return '';
-  const { name, axisValueLabel, axisType, axisValue } = param;
+    const {name, axisValueLabel, axisType, axisValue} = param;
     const timeFormat =
         opt && opt.contrast
             ? opt.contrastOption === 'day'
@@ -318,7 +295,7 @@ const headTemplate = (param, opt) => {
 };
 const seriesTemplate = (param, unit) => {
     if (!param || param.seriesName === '自定义') return '';
-  const { value, encode } = param;
+    const {value, encode} = param;
     // const val = value[encode.y[0]];
     const _unit = unit || '';
     const color = '#008CFF';
@@ -467,7 +444,7 @@ const handleSpecial1 = (special, dataSource) => {
                             },
                         },
                         name: item.text,
-            label: { show: true },
+                        label: {show: true},
                     },
                     {
                         xAxis: item.lte,
@@ -512,17 +489,18 @@ const returnXAxis = ({
                          restOption,
                          smooth,
                          special,
-}) => {
+                         yAxis
+                     }) => {
     // 根据"指标名称"分类yAxis
     const yAxisInterator = (() => {
         const map = new Map();
         let current = -1;
         const get = (name) => (map.has(name) ? map.get(name) : map.set(name, ++current).get(name));
-    return { get };
+        return {get};
     })();
     let _offlineData = [];
     // 生成visualMap、markArea
-  let { visualMap, markArea } = handleSpecial1(special, dataSource);
+    let {visualMap, markArea} = handleSpecial1(special, dataSource);
     let _filterArr = ['是否在线'];
     if (special?.special1?.name) {
         _filterArr.push(special.special1.name);
@@ -536,12 +514,14 @@ const returnXAxis = ({
             return !_filterArr.includes(item.sensorName);
         })
         .map((item, index) => {
-      const { sensorName, unit } = item;
+            const {sensorName, unit} = item;
             const name = nameFormatter(item, contrast, contrastOption, nameWithSensor);
             const data = dataAccessor(item, contrast, contrastOption);
             const type = 'line';
             const areaStyle = areaStyleFormatter(item);
-      const yAxisIndex = yAxisInterator.get(sensorName);
+            const _index = yAxis.findIndex(item => item.name === unit);
+            const yAxisIndex = _index > -1 ? _index : 0;
+            // console.log('yAxisIndex: ',yAxisInterator);
             const markLine = showMarkLine
                 ? alarmMarkLine(item, index, dataSource, deviceAlarmSchemes)
                 : {};
@@ -638,32 +618,70 @@ const handleMaxValue = (value) => {
     if (value >= 100000) return `${(value / 1000).toFixed(2)}k`;
     return value.toFixed(2);
 }
-const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
-  // 一种指标一个y轴
-  const yAxisMap = new Map();
-  // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
-  let _maxValueArray = [];
+const reduceYAxis = (arr, dataSource) => {
     let _offsetValue = [];
-  dataSource.forEach((item, index) => {
-    let _maxValue = item.dataModel.reduce((final, cur) => {
+    // 1. 合并相同单位的坐标轴
+    let _arr = arr.reduce((final, cur) => {
+        let _key = cur.name === null ? 'null' : cur.name
+        if (!final[_key]) {
+            final[_key] = cur
+        }
+        return final;
+    }, {});
+    console.log('datasource: ', dataSource);
+    // 2. 合并相同单位的数据，找出最大值
+    let _maxValueArr = Object.values(dataSource.reduce((final, cur) => {
+        let _key = cur.name === null ? 'null' : cur.name;
+        let _maxValue = cur.dataModel.reduce((final, cur) => {
             if (cur.pv > final) final = cur.pv;
             return final
         }, 0);
-    _maxValueArray.push(handleMaxValue(_maxValue));
-    const { sensorName, unit } = item;
+        if (final[_key] === undefined) {
+            final[_key] = _maxValue
+        } else {
+            final[_key] = Math.max([final[_key], _maxValue]);
+        }
+        return final
+    }, {}));
+    // 3. 合并，生成Y轴配置
+    return Object.values(_arr).map((item, index) => {
+        let _key = item.name === null ? 'null' : item.name;
+        let _offset = _maxValueArr[index - 2];
+        let _baseOffset = _offsetValue[index - 2] ?? 0;
+        let _finalOffset = (_offset !== undefined ? (_offset === 0 ? 2 : _offset.toString().replaceAll('.', '').length) * 12 : 0) + _baseOffset;
+        _offsetValue.push(_finalOffset);
+        return ({
+            ...item,
+            offset: _finalOffset,
+            position: index % 2 === 0 ? 'left' : 'right',
+            nameTextStyle: {
+                align: index % 2 === 0 ? 'right' : 'left',
+            },
+        })
+    });
+};
+const handleYAxis = ({dataSource, needUnit, curveCenter, showGridLine}) => {
+    // 1. 新需求：合并相同的坐标轴
+    // 一种指标一个y轴 -------- 需求变更：相同类型的指标放到同一指标轴（单位相同） 2023年9月28日
+    const yAxisMap = new Map();
+    // 1. 找出最大值; 2. 计算出y轴最大宽度动态计算偏移距离；
+
+    dataSource.forEach((item, index) => {
+
+        const {sensorName, unit} = item;
         const key = sensorName;
         if (!yAxisMap.has(key)) {
-      const i = yAxisMap.size;
+            /*      const i = yAxisMap.size;
                   let _offset = _maxValueArray[i - 2];
                   let _baseOffset = _offsetValue[i - 2] ?? 0;
                   let _finalOffset = (_offset !== undefined ? (_offset === 0 ? 2 : _offset.toString().replaceAll('.','').length) * 10 : 0) + _baseOffset;
-      _offsetValue.push(_finalOffset);
+                  _offsetValue.push(_finalOffset);*/
             const axis = {
                 type: 'value',
                 name: needUnit ? unit : null,
-        position: i % 2 === 0 ? 'left' : 'right',
+                // position: i % 2 === 0 ? 'left' : 'right',
                 // offset: _offset !== undefined ? (_offset === 0? 2:_offset.toString().length) * 10 : 0,
-        offset: _finalOffset,
+                // offset: _finalOffset,
                 axisLabel: {
                     formatter: (value) => {
                         return handleMaxValue(value);
@@ -672,9 +690,6 @@ const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
                 axisLine: {
                     show: true,
                 },
-        nameTextStyle: {
-          align: i % 2 === 0 ? 'right' : 'left',
-        },
                 minorTick: {
                     lineStyle: {
                         color: '#e2e2e2',
@@ -702,31 +717,29 @@ const handleYAxis = ({ dataSource, needUnit, curveCenter, showGridLine }) => {
         const axis = yAxisMap.get(key);
         decorateAxisGridLine(axis, showGridLine);
     });
-  const yAxis = yAxisMap.size > 0 ? [...yAxisMap.values()] : { type: 'value' };
-
-  // 根据y轴个数调整边距
+    const yAxis = yAxisMap.size > 0 ? reduceYAxis([...yAxisMap.values()], dataSource) : {type: 'value'};
     const leftNum = Math.ceil(yAxisMap.size / 2);
     const rightNum = Math.floor(yAxisMap.size / 2);
-  return { leftNum, rightNum, yAxis };
+    return {leftNum, rightNum, yAxis};
 };
-const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contrastOption) => {
+const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contrastOption, config) => {
     restOption.dataZoom = [
         {
             show: true,
-      bottom: 10,
+            bottom: 20,
             start: 0,
             end: 100,
-      height: currentOption['dataZoomHeight'],
+            height: config.isMultiple ? 20 : 28,
             type: 'inside',
             zoomOnMouseWheel: true,
             filterMode: chartType === 'lineChart' ? 'none' : 'weakFilter',
         },
         {
             show: true,
-      bottom: 10,
+            bottom: 20,
             start: 0,
             end: 100,
-      height: currentOption['dataZoomHeight'],
+            height: config.isMultiple ? 20 : 28,
             type: 'slider',
             zoomOnMouseWheel: true,
             labelFormatter: function (e) {
@@ -741,7 +754,7 @@ const assignOptions = (restOption, xAxis, legendData, chartType, contrast, contr
     ];
     xAxis.minInterval = 3600 * (1 * 1000);
     if (legendData) {
-    restOption.legend = { ...buildDefaultLegend({}), ...{ data: legendData } };
+        restOption.legend = {...restOption.legend, ...{data: legendData}};
     }
 };
 
@@ -790,7 +803,7 @@ const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
         top: _base + _topForUnit,
         // left: leftNum === 1 ? 10 : leftNum * AXIS_WIDTH,
         left: 20,
-    right:10,
+        right: 10,
         // right: rightNum === 0 ? 20 : rightNum * AXIS_WIDTH,
         bottom: 60,
         containLabel: true,
@@ -899,14 +912,17 @@ const optionGenerator = (
         restOption,
         special,
     } = handleDefault(config, cusOption);
-  const { leftNum, rightNum, yAxis } = handleYAxis({
+    const {leftNum, rightNum, yAxis} = handleYAxis({
         dataSource,
         needUnit,
         curveCenter,
         showGridLine,
     });
+
+    console.log(yAxis);
+
     const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
-  let { xAxis, series, visualMap } = returnXAxis({
+    let {xAxis, series, visualMap} = returnXAxis({
         dataSource,
         contrast,
         contrastOption,
@@ -917,6 +933,7 @@ const optionGenerator = (
         smooth,
         restOption,
         special,
+        yAxis
     });
     decorateAxisGridLine(xAxis, showGridLine);
     const tooltipTimeFormat = !contrast
@@ -930,16 +947,16 @@ const optionGenerator = (
         if (chartType === 'boxChart' && lineDataType === '特征曲线') {
             const otherData =
                 dataSource?.[0]?.dataModel.map((item) => {
-          const { firstPV, lastPV, maxPV, minPV, pt } = item;
+                    const {firstPV, lastPV, maxPV, minPV, pt} = item;
                     return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV];
                 }) || []; //当存在othersData的时候，只是单曲线
-      xAxis = { type: 'time' };
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             let unit = [];
             series = series.map((item) => {
                 if (item.unit) unit.push(item.unit);
                 item.areaStyle = null;
-        return { ...item, showSymbol: false };
+                return {...item, showSymbol: false};
             });
             series.push({
                 type: 'candlestick',
@@ -970,7 +987,7 @@ const optionGenerator = (
              *  2. 当最大值小于零时（此时，最小值一定小于零）；
              */
             dataSource?.[0]?.dataModel.forEach((item) => {
-        const { firstPV, lastPV, maxPV, minPV, pt } = item;
+                const {firstPV, lastPV, maxPV, minPV, pt} = item;
                 _maxValues.push(maxPV);
                 let time = contrast ? moment(pt).format(formatStr) : pt;
                 _maxData.push([
@@ -980,13 +997,13 @@ const optionGenerator = (
                 _minData.push([moment(time).valueOf(), maxPV > 0 ? minPV : maxPV]);
             }); //当存在othersData的时候，只是单曲线
             // xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
-      xAxis = { type: 'time' };
+            xAxis = {type: 'time'};
             decorateAxisGridLine(xAxis, showGridLine);
             let _unit = '';
             series = series.map((item) => {
                 _unit = item.unit ?? '';
                 item.areaStyle = null;
-        return { ...item, showSymbol: false };
+                return {...item, showSymbol: false};
             });
             [[..._minData], [..._maxData]].forEach((item, index) => {
                 series.push({
@@ -1059,14 +1076,14 @@ const optionGenerator = (
     } else {
         tooltip = tooltipAccessor(
             series.map((item) => item.unit),
-      { contrastOption, contrast },
+            {contrastOption, contrast},
         );
     }
     tooltip.timeFormat = tooltipTimeFormat;
     let _legendData = series
-    .filter((item) => !['周期最大值', '周期最小值', '自定义'].includes(item.name))
+        .filter((item) => !['周期最大值', '周期最小值', '自定义'].includes(item.name)) // legend中，过滤掉辅助业务的legend
         .map((item) => item.name);
-  assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption);
+    assignOptions(restOption, xAxis, _legendData, chartType, contrast, contrastOption, config);
     let _options = {
         yAxis,
         grid,
@@ -1076,6 +1093,7 @@ const optionGenerator = (
         visualMap,
         ...restOption,
     };
+    console.log('_options: ', _options)
     return _options;
 };