Skip to content

W
wisdom-components
Commit a7f8ce51 authored by 陈龙's avatar 陈龙
Browse files
Options

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

parent e3b48dbb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 120 additions and 114 deletions
packages/base-components/BasicChart/src/utils/legend.js
View file @ a7f8ce51
...@@ -18,8 +18,6 @@ export const buildDefaultLegend = (option) => { ...@@ -18,8 +18,6 @@ export const buildDefaultLegend = (option) => {
textStyle: { textStyle: {
padding: [0, 0, 0, 4], padding: [0, 0, 0, 4],
color: '#2d2d2d', color: '#2d2d2d',
width: 120,
overflow:'truncate'
}, },
tooltip:{ tooltip:{
show:true show:true
......
packages/extend-components/EC_HistoryView/src/GridChart.js
View file @ a7f8ce51
import React, { memo, useMemo } from 'react'; import React, {memo, useMemo} from 'react';
import _ from 'lodash'; import _ from 'lodash';
import { BasicChart } from '@wisdom-components/basicchart'; import {BasicChart} from '@wisdom-components/basicchart';
import PandaEmpty from '@wisdom-components/empty'; import PandaEmpty from '@wisdom-components/empty';
import optionGenerator from './utils'; import optionGenerator from './utils';
const ChartTitle = ({ prefixCls, title, unit }) => { const ChartTitle = ({prefixCls, title, unit}) => {
const cls = `${prefixCls}-grid-item-title`; const cls = `${prefixCls}-grid-item-title`;
return ( return (
<div className={cls}> <div className={cls}>
<span className={`${cls}_text`}>{title}</span> <span className={`${cls}_text`}>{title}</span>
{unit && <span className={`${cls}_unit`}>（单位：{unit}）</span>} {unit && <span className={`${cls}_unit`}>（单位：{unit}）</span>}
</div> </div>
); );
}; };
const GridChart = memo((props) => { const GridChart = memo((props) => {
const { const {
dataSource, dataSource,
contrast = false, contrast = false,
contrastOption = 'day', contrastOption = 'day',
smooth = true, smooth = true,
curveCenter, curveCenter,
} = props; } = props;
const { prefixCls } = props; const {prefixCls} = props;
const gridData = useMemo(() => { const gridData = useMemo(() => {
const grids = dataSource.reduce((pre, item, index) => { const grids = dataSource.reduce((pre, item, index) => {
const { sensorName, deviceType } = item; const {sensorName, deviceType} = item;
const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组 const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
let grid = pre.find((g) => g.key === key); let grid = pre.find((g) => g.key === key);
if (!grid) { if (!grid) {
const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']); const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
grid = { grid = {
key: key, key: key,
list: [], list: [],
...restProp, ...restProp,
}; };
pre.push(grid); pre.push(grid);
} }
grid.list.push(item); grid.list.push(item);
return pre; return pre;
}, []); }, []);
return grids; return grids;
}, [dataSource]); }, [dataSource]);
const options = useMemo(() => { const options = useMemo(() => {
let _options = gridData.map((item) => { let _options = gridData.map((item) => {
const { key, list, equipmentName, sensorName, stationCode, unit } = item; const {key, list, equipmentName, sensorName, stationCode, unit} = item;
const cusOption = { let max = 300;
title: { // 5：左侧竖条的宽度；10：标题部分的左侧margin；
show: true, // sensorName长度*单个宽度16.7；5：单位部分的左侧margin；
// text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`, // 91：单位部分的宽度（格式固定，宽度相对固定）
text: ' ', let maxTitleLength = 5 + 10 + sensorName.length * 16.7 + 5 + 91;
textStyle: { let finalLength = maxTitleLength > max ? max : maxTitleLength
width: 200, const cusOption = {
overflow: 'truncate', title: {
}, show: true,
}, // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|（单位：' + unit + '）}' : ''}`,
legend: { text: ' ',
// orient: 'vertical', textStyle: {
itemGap: 10, width: finalLength,
padding: [0, 0, 0, 200], overflow: 'truncate',
textStyle: { },
width: 120, },
overflow: 'truncate', legend: {
}, // orient: 'vertical',
}, itemGap: 10,
}; padding: [0, 0, 0, finalLength],
const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, { textStyle: {
curveCenter, width: 120,
nameWithSensor: false, overflow: 'truncate',
showGridLine: true, },
}); },
return { };
key, const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
option: option, curveCenter,
}; nameWithSensor: false,
}); showGridLine: true,
return _options; isMultiple: gridData.length > 1
}, [gridData, smooth, curveCenter]); });
// 在多图表里，底部缩放条的高度减小
return {
key,
option: option,
};
});
return _options;
}, [gridData, smooth, curveCenter]);
return ( return (
<div className={`${prefixCls}-grid`}> <div className={`${prefixCls}-grid`}>
{options.map((item, index) => { {options.map((item, index) => {
const { sensorName, unit } = gridData[index]; const {sensorName, unit} = gridData[index];
const isEmpty = const isEmpty =
!item.option.series.length || !item.option.series.length ||
!item.option.series.find((e) => e.data && e.data.length > 0); !item.option.series.find((e) => e.data && e.data.length > 0);
return ( return (
<div <div
key={item.key} key={item.key}
className={`${prefixCls}-grid-item`} className={`${prefixCls}-grid-item`}
style={{ style={{
height: gridData.length === 1 ? '100%' : '', height: gridData.length === 1 ? '100%' : '',
width: gridData.length === 1 ? '100%' : '', width: gridData.length === 1 ? '100%' : '',
}} }}
> >
<div className={`${prefixCls}-grid-item-wrap`}> <div className={`${prefixCls}-grid-item-wrap`}>
<ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit} /> <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit}/>
{isEmpty ? ( {isEmpty ? (
<PandaEmpty /> <PandaEmpty/>
) : ( ) : (
<BasicChart <BasicChart
style={{ width: '100%', height: '100%' }} style={{width: '100%', height: '100%'}}
option={item.option} option={item.option}
notMerge notMerge
/> />
)} )}
</div> </div>
</div> </div>
); );
})} })}
</div> </div>
); );
}); });
export default GridChart; export default GridChart;
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ a7f8ce51
...@@ -4,25 +4,25 @@ import { MobileHistoryChart } from "../mobile"; ...@@ -4,25 +4,25 @@ import { MobileHistoryChart } from "../mobile";
const deviceParams = [ const deviceParams = [
/*10.182*/ /*10.182*/
/* { /* {
deviceCode: 'EGBF00000141', deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量', // sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力', sensors: '进水压力',
deviceType: '熊猫二供泵房', deviceType: '熊猫二供泵房',
pointAddressID: 208, pointAddressID: 208,
}, */ },*/
/* { /* {
"deviceCode": "SYJ00000008", "deviceCode": "SYJ00000008",
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "水源井" "deviceType": "水源井"
}, },*/
{ {
deviceCode: 'EGJZ00000197', deviceCode: 'EGJZ00000197',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量', sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
// sensors: '1#变频器运行频率', // sensors: '1#变频器运行频率',
deviceType: '二供机组', deviceType: '二供机组',
// pointAddressID: 208, // pointAddressID: 208,
}, */ },
/* { /* {
deviceCode: 'EGJZ00000198', deviceCode: 'EGJZ00000198',
sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量', sensors: '进水压力,出水压力,出水瞬时流量,出水累计流量',
...@@ -63,7 +63,7 @@ const deviceParams = [ ...@@ -63,7 +63,7 @@ const deviceParams = [
"sensors": "瞬时流量", "sensors": "瞬时流量",
"deviceType": "水厂" "deviceType": "水厂"
}, */ }, */
{ /* {
"deviceCode": "JFJ00000001", "deviceCode": "JFJ00000001",
"sensors": "沉淀池投矾量瞬时,", "sensors": "沉淀池投矾量瞬时,",
"deviceType": "加矾间" "deviceType": "加矾间"
...@@ -92,7 +92,7 @@ const deviceParams = [ ...@@ -92,7 +92,7 @@ const deviceParams = [
deviceCode: 'EGJZ00000027', deviceCode: 'EGJZ00000027',
sensors: '2#变频器运行频率', sensors: '2#变频器运行频率',
deviceType: '二供机组', deviceType: '二供机组',
}, },*/
/*确山*/ /*确山*/
/*泵3状态*/ /*泵3状态*/
/* { /* {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment