Skip to content

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

feat: 优化历史曲线组件

parent 6ddbeef6
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 75 deletions
packages/extend-components/EC_HistoryView/src/EC_HistoryView.md
View file @ 3c693489
......@@ -26,11 +26,11 @@ path: /
## 移动端
<code src="./demos/mobile.js"></code>
[//]: # (<code src="./demos/mobile.js"></code>)
## 多图表
<code src="./demos/GridDemo.js"></code>
[//]: # (<code src="./demos/GridDemo.js"></code>)
## API
......
packages/extend-components/EC_HistoryView/src/SingleChart.js
View file @ 3c693489
......@@ -33,7 +33,6 @@ const SimgleChart = memo((props) => {
};
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
}, [dataSource, smooth, curveCenter,chartType]);
useEffect(() => {
chartRef.current?.resize?.();
const chart = chartRef.current?.getEchartsInstance?.();
......
packages/extend-components/EC_HistoryView/src/assets/最大实心.svg 0 → 100644
View file @ 3c693489
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="38.8px" height="24.8px" viewBox="0 0 38.8 24.8" enable-background="new 0 0 38.8 24.8" xml:space="preserve">
<g>
<image overflow="visible" opacity="0.55" width="48" height="33" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAhCAYAAACfiCi5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtNJREFUeNrsWGtz0zAQtBw7aZI+
eBRmYPinfOav8oa0JXHSxLY4MXtlq8qy20lFgXpma9eWnd17SHfKsr/8MF0PXr6zpm9MgsO6P5/f
GjtYAIg75IChcSYVaZwdWsCGhJgA+RFQCEqcVUyqQ0nXwE7QhIQUHvkc9yaCuWAqOMC9UQIvKLEG
xC8Fa0El2EBIS+N+CwCxAoQPBc8FT3A9wbNUIdSA/EpwLjjD2YnZirGvvFAErD8TPBO8EbzCtfPG
2MuH+yJvYek1iH8SfKB8aNgL7IEcMe8EPBW8hohTeKFMlAdK0glYICIyeGSr+aBeKCh8DMX/ISz/
AlABqUKoRcwf4Dc3EHOBsMoh8kYOqBc0iecgrwJSzkJjXG+Qi3MvFx2sL0BFjEC4pKm0SL2AgfAU
GFMYG477rENEaCFLWSHkHeuRiQl4iKWO8YhfM+ZDF9B7PAp4FPCPC+CS2hI6Bfg1eBt6KeFq3FA5
XYf4FB3kG7y0o5dNT1M0pPHxrWgjK/GWyuk11UFtTECLQVrKOizxPFQLGW+uLjoWQOs1KTHvci10
RliBV83vFZ5ltIlwpL+jMrVoKMqOlZtLjwlQ4p6h+r6GFTeBkIhVox9RUms/oO/d8IBav8KL7/Hx
VaQfMER+SoXfjMZrOKzJoxoSjScg1g8swO1XGF1raNw/Ul+reytY3+DHujoyFVOi7D1GF3eKfmIG
7+zwnXN81+GHZ007oCO7wL0mlgM1XKxxuOzpibWHcNY/wY9VIHcMAZcg8NXZSvCNBDQcDkN74mBT
73nBkjdiuxLcBC0oPFYkoAJphy8QU4WsOXRXYt/7QtyKniCMHI4wXnNKZ5MlzSbtXveF7rgzp4k8
pkQ+wnXmTcmVR94OWNButzN324M8prPRGHmjLeiOFqWrUIiR2sve6B1F5LSzl3vzehMLhT8qICDE
X4Xtvonfi4BA/mR9MfzfHz8FGADqGGwHh8e8kgAAAABJRU5ErkJggg==" transform="matrix(1 0 0 1 -5 -4.25)">
</image>
<g>
<g>
<g>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" fill="#1685FF" d="M4.2,0.2h29c1.7,0,3,1.3,3,3v10c0,1.7-1.3,3-3,3
H22.6l-4.2,4l-4.7-4H4.2c-1.7,0-3-1.3-3-3v-10C1.2,1.6,2.6,0.2,4.2,0.2z"/>
<path fill="none" stroke="#1685FF" stroke-width="0.5" stroke-linecap="round" d="M4.2,0.2h29c1.7,0,3,1.3,3,3v10
c0,1.7-1.3,3-3,3H22.6l-4.2,4l-4.7-4H4.2c-1.7,0-3-1.3-3-3v-10C1.2,1.6,2.6,0.2,4.2,0.2z"/>
</g>
</g>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M30.3,12.6l-0.8,1c-2.3-1.4-3.9-3.3-4.8-5.8
c-0.8,2.7-2.4,4.6-4.8,5.9l-0.8-1.1c2.4-1.2,4-3.1,4.6-5.9h-4.3V5.6H24c0.1-0.7,0.1-1.3,0.1-1.9V2.6h1.3v0.8c0,0.8,0,1.5-0.1,2.2H30
v1.2h-4.5C26.4,9.3,28,11.3,30.3,12.6z M15.6,12.6c-0.5,0.4-1.2,0.8-1.9,1.1l-0.6-1c0.7-0.3,1.2-0.6,1.7-0.9c-0.6-0.6-1-1.4-1.2-2.1
h-0.4v-1h4.2v0.9c-0.2,0.8-0.5,1.6-1,2.2c0.4,0.3,1,0.6,1.7,0.9l-0.6,1C16.8,13.4,16.1,13,15.6,12.6z M14.7,9.7
c0.2,0.5,0.5,1,0.9,1.4c0.4-0.4,0.6-0.9,0.8-1.4H14.7z M12.8,11.6c0.3-0.1,0.5-0.1,0.6-0.1v0.9c-0.3,0.1-0.5,0.1-0.6,0.1v1.1h-1.2
v-1c-1,0.1-2.3,0.2-4,0.4l-0.2-1.1l1,0V8.1h-1v-1h10.7v1h-5.3V11.6z M11.6,8.1h-2v0.6h2V8.1z M11.6,9.7h-2v0.7h2V9.7z M11.6,11.2h-2
V12c0.7,0,1.4-0.1,2-0.2V11.2z M8.8,2.9h8v3.7h-8V2.9z M10,5.8h5.6V5.2H10V5.8z M10,4.4h5.6V3.8H10V4.4z"/>
</svg>
packages/extend-components/EC_HistoryView/src/assets/最小实心.svg 0 → 100644
View file @ 3c693489
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="38.8px" height="24.8px" viewBox="0 0 38.8 24.8" enable-background="new 0 0 38.8 24.8" xml:space="preserve">
<g>
<image overflow="visible" opacity="0.55" width="48" height="33" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAhCAYAAACfiCi5AAAACXBIWXMAAAsSAAALEgHS3X78AAAA
GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtpJREFUeNrsWIlO20AQzTq7IakT
CjSUtur38NF8UA+pbYAmEHx2Fr1Bk8n6qLAtgrD0xGJ7N+/N4Z3Z0ejAL9PXwvbqamft7PKyPAgB
IC7hr5LRtRDTA/GIMAYiPC4IOVB0KcR0TN6TdoQJYYqxv1JCQnjA+FFIFyJMixg2LdcZg/iMsCDM
MR6B+Aa4w/8Ze6Nm3bIpf0xDKEQqlqvERIL8e8IHYIE5nvSKcA2slYg90iJvirqwMwHyHL8WIWCF
mCoj+HeOQHhJuAAWmOcF/Cb8Ala4lyCcNDEmnQFpVf5YRT4SZGJYdIp74wov8By2/jnhE/6ygC3h
jHCKd7yYv7ifKauPQDaDl+4hdgshO2FnA5acIn59CJxgfIRnJmB9KeAYHlhi7gzPE6yzwDtnCCMm
VSoRucibG4TdDcQkZOwnL9iA9d/hB74SPmMcI8ZNhYgxRM5AlBPY4XkOw8QQ8FGQzwNxn4KsJ/6T
8F3kQy69YFUoOAjwrv4CEUsQchV5IMU7EJ2I9w1+zIpEP9ZxreI/h4AV1uMvWcLz2AtWkJDJOIfl
z4G5sGZIgPxqWfUFY8s6sU9MBfFSCWBLb/GewdiLuUVYRRC5lwPsBU7iWISEa7GfmJowk5tdGUhc
/RWaYLxFPsUqFx89ayssyZZy4lNqO9z5mzZHFsV5NQuE5VPc14VDVGHRIarkqGI/MnUCXmK5bxRx
ozehg77eBLwJeOUCZEkd2vT2BOgavAhNGoh4IarSVDVAwWq0VBNTgWzgvaAQLeg9V6FN5TSTT1UL
uMZzN5AIWQtdC2xEF1fqapRvcBPhSf9BZVqioXAD5YyuRn+gpOZ+YKcNtWpiKvrXbyC/aegH+kja
UD/AbWgqTzQsd/1UX3MPegfrG3iiriPrS0SoI7vFvbwuBzLEHsfhukVP3DX5xp5YNvVdnEr0lQet
TiW6Ohfqwwv/fy70jJO5XsX0dbL9Iq5/AgwASlVPrbqGdyMAAAAASUVORK5CYII=" transform="matrix(1 0 0 1 -5 -4.25)">
</image>
<g>
<g>
<g>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" fill="#05C2BC" d="M33.2,20.2h-29c-1.7,0-3-1.3-3-3v-10
c0-1.7,1.3-3,3-3h10.7l4.2-4l4.7,4h9.5c1.7,0,3,1.3,3,3v10C36.2,18.9,34.9,20.2,33.2,20.2z"/>
<path fill="none" stroke="#05C2BC" stroke-width="0.5" stroke-linecap="round" d="M33.2,20.2h-29c-1.7,0-3-1.3-3-3v-10
c0-1.7,1.3-3,3-3h10.7l4.2-4l4.7,4h9.5c1.7,0,3,1.3,3,3v10C36.2,18.9,34.9,20.2,33.2,20.2z"/>
</g>
</g>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M29.2,15.5c-0.5-1.7-1.1-3.5-1.9-5.6l1.2-0.7
c0.8,2.1,1.5,4,1.9,5.5L29.2,15.5z M24,17.5h-1.7L22,16.2c0.6,0.1,1.1,0.1,1.6,0.1c0.5,0,0.7-0.2,0.7-0.7V6.8h1.3v9.2
C25.6,17,25.1,17.5,24,17.5z M19,14.5c0.9-1.2,1.6-2.9,2-4.9l1.3,0.5c-0.5,2.4-1.3,4.2-2.1,5.4L19,14.5z M15.6,16.6
c-0.5,0.4-1.2,0.8-1.9,1.1l-0.6-1c0.7-0.3,1.2-0.6,1.7-0.9c-0.6-0.6-1-1.4-1.2-2.1h-0.4v-1h4.2v0.9c-0.2,0.8-0.5,1.6-1,2.2
c0.4,0.3,1,0.6,1.7,0.9l-0.6,1C16.8,17.4,16.1,17,15.6,16.6z M14.7,13.7c0.2,0.5,0.5,1,0.9,1.4c0.4-0.4,0.6-0.9,0.8-1.4H14.7z
M12.8,15.6c0.3-0.1,0.5-0.1,0.6-0.1v0.9c-0.3,0.1-0.5,0.1-0.6,0.1v1.1h-1.2v-1c-1,0.1-2.3,0.2-4,0.4l-0.2-1.1l1,0v-3.9h-1v-1h10.7
v1h-5.3V15.6z M11.6,12.1h-2v0.6h2V12.1z M11.6,13.7h-2v0.7h2V13.7z M11.6,15.2h-2V16c0.7,0,1.4-0.1,2-0.2V15.2z M8.8,6.9h8v3.7h-8
V6.9z M10,9.8h5.6V9.2H10V9.8z M10,8.4h5.6V7.8H10V8.4z"/>
</svg>
packages/extend-components/EC_HistoryView/src/demos/index.js
View file @ 3c693489
......@@ -3,13 +3,13 @@ import HistoryView from '../index';
import {MobileHistoryChart} from "../mobile";
const deviceParams = [
/* {
{
deviceCode: 'EGBF00000141',
// sensors: '进水压力,出水瞬时流量,出水累计流量',
sensors: '进水压力',
deviceType: '二供泵房',
pointAddressID: 208,
},*/
},
/* {
// deviceCode: 'EGBF00000002',
// deviceCode: 'EGBF00000018',
......@@ -38,11 +38,11 @@ const deviceParams = [
"deviceType": "二供机组"
}*/
// 邳州张楼水厂
{
/* {
"deviceCode": "LLJ00000004",
"sensors": "瞬时流量",
"deviceType": "流量计"
}
} */
];
const Demo = () => {
return (
......
packages/extend-components/EC_HistoryView/src/index.js
View file @ 3c693489
......@@ -555,7 +555,7 @@ const HistoryView = (props) => {
let fileName = `数据报表-${i.deviceType}-${i.deviceCode}-${moment(timeFrom).format(
dateFormat,
)}至${moment(timeTo).format(dateFormat)}`;
let _quotas = i.sensors.split(',').filter(item=> item!=='是否在线').join(',')
let _quotas = i.sensors.split(',').filter(item => item !== '是否在线').join(',')
getExportDeviceHistoryUrl({
deviceType: i.deviceType,
deviceCode: i.deviceCode,
......@@ -686,25 +686,21 @@ const HistoryView = (props) => {
return Promise.resolve();
});
};
/* const handleTime = (diffDays, base = 1000) => {
let unit = 'min', zoom = 0;
zoom = Math.ceil((diffDays || 1) * 24 * 60 / base).toFixed(0);
return {unit, zoom};
}*/
const handleDataThinKey = (diffDays) => {
const handleDataThinKey = (diffYears, diffDays, diffHours) => {
// edit by zy 根据选择的时长控制抽稀频度
if (diffDays >= 7 && diffDays < 15) {
return {unit: 'h', zoom: '2'};
} else if (diffDays >= 15 && diffDays < 30) {
return {unit: 'h', zoom: '4'};
} else if (diffDays >= 30) {
return {unit: 'h', zoom: '6'};
} else if (diffDays < 7 && diffDays >= 2) {
return {unit: 'min', zoom: '40'};
} else if (diffDays < 2 && diffDays >= 1) {
return {unit: 'min', zoom: '30'};
if (diffYears > 0) {
return {unit: 'h', zoom: '48'}
} else if (diffYears === 0 && diffDays > 0) {
if (diffDays >= 30) return {unit: 'h', zoom: '24'}
if (diffDays >= 15) return {unit: 'h', zoom: '4'}
if (diffDays >= 7) return {unit: 'h', zoom: '1'}
if (diffDays >= 3) return {unit: 'min', zoom: '30'}
if (diffDays >= 1) return {unit: 'min', zoom: '15'}
} else if (diffYears === 0 && diffDays === 0 && diffHours > 0) {
if (diffHours >= 4) return {unit: 'min', zoom: '5'}
if (diffHours > 0) return {unit: 'min', zoom: '0'}
} else {
return {unit: 'min', zoom: '10'};
return {unit: 'min', zoom: '0'}
}
};
......@@ -742,9 +738,10 @@ const HistoryView = (props) => {
acrossTables,
isBoxPlots: isBoxPlots,
};
let diffYears = moment(item.dateTo).diff(moment(item.dateFrom), 'years');
let diffDays = moment(item.dateTo).diff(moment(item.dateFrom), 'days');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffDays) : {};
// let zoomParam = activeTabKey === 'curve' ? handleTime(diffDays, 100) : {}; // 备用方案
let diffHours = moment(item.dateTo).diff(moment(item.dateFrom), 'hours');
let zoomParam = activeTabKey === 'curve' ? handleDataThinKey(diffYears, diffDays, diffHours) : {};
requestArr.push(getHistoryInfo({...param, ...zoomParam}));
});
setLoading(true);
......@@ -780,6 +777,10 @@ const HistoryView = (props) => {
});
setLoading(false);
handleTableData(data);
/* //
let _dataModel = data[0].dataModel;
data[0].dataModel[0].pv = 0.123451
data[0].dataModel[_dataModel.length - 1].pv = 1000000*/
setChartDataSource(data);
}
}).catch(err => {
......@@ -888,7 +889,7 @@ const HistoryView = (props) => {
};
return (
<div className={classNames(prefixCls,'wkt-scroll-light')}>
<div className={classNames(prefixCls, 'wkt-scroll-light')}>
<Spin spinning={loading} wrapperClassName={classNames(`${prefixCls}-spin`)}>
{showModels.length === 1 && (
<div className={`${prefixCls}-single-panel`}>{renderPanel(showModels[0])}</div>
......@@ -912,8 +913,10 @@ const HistoryView = (props) => {
),
}}
>
<Tabs.TabPane key="curve" tab="曲线">
{renderPanel('curve')}
<Tabs.TabPane key="curve" tab="曲线" forceRender={true}>
{
activeTabKey === 'curve' ? renderPanel('curve') : ''
}
</Tabs.TabPane>
<Tabs.TabPane key="table" tab="表格">
{renderPanel('table')}
......
packages/extend-components/EC_HistoryView/src/utils.js
View file @ 3c693489
import moment from 'moment';
import _, {isArray} from 'lodash';
import maxIcon from '../src/assets/最大实心.svg';
import minIcon from '../src/assets/最小实心.svg';
/** 轴宽度, 用于计算多轴显示时, 轴线偏移和绘图区域尺寸 */
const AXIS_WIDTH = 40;
......@@ -186,30 +188,27 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
const _isMobile = isMobile();
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [];
data.push({type: 'min', name: '最小: '});
data.push({type: 'max', name: '最大: '});
const data = [
{
type: 'min',
value: null,
name: '最小: ',
symbol: `image://${minIcon}`,
symbolOffset: [0, 18],
},
{
type: 'max',
value: null,
name: '最大: ',
symbol: `image://${maxIcon}`,
symbolOffset: [0, -16],
}
];
return {
symbolSize: 1,
symbolOffset: [0, '50%'],
label: {
formatter: '{b|{b} }{c|{c}}',
...currentOption["markPoint"],
borderColor: '#ccc',
borderRadius: 4,
position: 'top',
distance: 10,
rich: {
b: {
color: currentOption['fontColor'],
},
c: {
color: currentOption['fontColor'],
fontSize: currentOption["fontSize"],
fontWeight: 700,
},
},
show: false
},
symbolSize: [49, 31],
data,
};
};
......@@ -341,12 +340,12 @@ const seriesTemplate = (param, unit) => {
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最小值</span><span style="display:inline-block;">：</span>
<span>周期最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[3] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最大值</span><span style="display:inline-block;">：</span>
<span>周期最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${value[4] ?? '-'}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
......@@ -548,6 +547,7 @@ const assignOptions = (restOption, xAxis, legendData) => {
height: currentOption['dataZoomHeight'],
type: 'inside',
zoomOnMouseWheel: true,
filterMode: 'none'
},
{
show: true,
......@@ -564,6 +564,105 @@ const assignOptions = (restOption, xAxis, legendData) => {
restOption.legend = {...buildDefaultLegend({}), ...{data: legendData}};
}
};
const returnMaxOrMinNumber = (dataSource, type) => {
let _obj = null;
dataSource?.[0]?.dataModel.forEach(item => {
if (!_obj) {
_obj = item;
} else {
if (type === 'min') {
if (item.pv < _obj.pv) {
_obj = item
}
}
;
if (type === 'max') {
if (item.pv > _obj.pv) {
_obj = item
}
}
}
});
let _value = [moment(_obj.pt).valueOf(), _obj.pv];
let _img = type === 'max' ? maxIcon : minIcon;
_value.push(_img);
_value.push(type);
return _value;
};
const handleGrid = (dataSource, needUnit, leftNum, rightNum, chartType) => {
// 如果是单曲线，_grid的top需要一行的高度，用来放置最值最小值
let _base = 60;
let _topForUnit = needUnit ? 20 : 0;
let _topForValue = chartType && dataSource.length === 1 ? 50 : 0
return {
top: _base + _topForUnit + _topForValue,
// top: 200,
left: 30 + leftNum * AXIS_WIDTH,
right: rightNum === 0 ? 40 : rightNum * AXIS_WIDTH,
bottom: 60,
containLabel: true
};
};
const renderItem = (params, api) => {
let _numberStringWidth = String(api.value(1)).length * 15;
let _base = params.dataIndex + 1;
let _baseWidth = 190 + _numberStringWidth;
let _imgWidth = 50;
let _dateWidth = 140;
let _imageX = api.getWidth() - _base * _baseWidth;
let _timeX = api.getWidth() - (_base * _baseWidth - _imgWidth);
let _valueX = api.getWidth() - (_base * _baseWidth - _imgWidth - _dateWidth);
let _color = api.value(3) === 'min' ? '#05C2BC' : '#1685FF';
let topValue = 60
return {
type: 'group',
children: [
{
type: 'image',
style: {
image: api.value(2),
textVerticalAlign: 'middle',
y: -6
},
position: [_imageX, topValue]
},
{
type: 'text',
style: {
text: moment(api.value(0)).format('YYYY-MM-DD HH:mm:ss') + ': ',
textVerticalAlign: 'top'
},
position: [_timeX, topValue]
},
{
type: 'text',
style: {
text: api.value(1),
textVerticalAlign: 'middle',
fill: _color,
font: 'bolder 16px cursive',
lineWidth:10,
y: 2
},
position: [_valueX, topValue]
}
]
}
};
const returnCustomSeries = (dataSource) => {
let _maxNumber = returnMaxOrMinNumber(dataSource, 'max');
let _minNumber = returnMaxOrMinNumber(dataSource, 'min');
return {
name: '自定义',
type: 'custom',
renderItem: renderItem,
data: [_maxNumber, _minNumber],
// yAxisIndex:2
}
};
/**
* 图表配置项生成
*
......@@ -574,6 +673,7 @@ const assignOptions = (restOption, xAxis, legendData) => {
* @param {any} smooth Ture/false, 曲线/折线
* @param {any} config 额外配置信息
*/
const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth, config) => {
const {
needUnit,
......@@ -588,14 +688,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
restOption
} = handleDefault(config, cusOption);
const {leftNum, rightNum, yAxis} = handleYAxis({dataSource, needUnit, curveCenter, showGridLine});
const grid = {
top: needUnit ? 80 : 60,
// top: 200,
left: 30 + leftNum * AXIS_WIDTH,
right: rightNum === 0 ? 40 : rightNum * AXIS_WIDTH,
bottom: 60,
};
const grid = handleGrid(dataSource, needUnit, leftNum, rightNum, chartType);
let {xAxis, series} = returnXAxis({
dataSource,
contrast,
......@@ -628,7 +721,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
series = series.map((item) => {
if (item.unit) unit.push(item.unit);
item.areaStyle = null;
return {...item, symbol: 'none'};
return {...item, showSymbol: false};
});
series.push({
type: 'candlestick',
......@@ -667,11 +760,11 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
series = series.map((item) => {
_unit = item.unit;
item.areaStyle = null;
return {...item, symbol: 'none'};
return {...item, showSymbol: false};
});
[[..._minData], [..._maxData]].forEach((item, index) => {
series.push({
name: index === 0 ? '最小值' : '最大值',
name: index === 0 ? '周期最小值' : '周期最大值',
type: 'line',
data: item,
lineStyle: {
......@@ -690,30 +783,27 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
});
});
tooltip = {
trigger: 'axis',
formatter: (e) => {
return `<div>
${headTemplate(e[0])}
<div>
<div style="display: flex; align-items: center;">
<span style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${
e[0].seriesName
<span style="${isMobile() ? 'width: ' + handlePx(90, 'px') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap' : ''}">${e[0].seriesName
}</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${
e[0]?.value?.[1] ?? '-'
<span style="color: ${COLOR.NORMAL};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e[0]?.value?.[1] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${
e[1]?.value?.[1] ?? '-'
<span>周期最小值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${e?.[1]?.value?.[1] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${
_maxValues[e[2].dataIndex] ?? '-'
<span>周期最大值</span><span style="display:inline-block;">：</span>
<span style="color: ${COLOR.AVG};margin: 0 ${handlePx(5, 'px')} 0 auto;">${_maxValues[e?.[2]?.dataIndex] ?? '-'
}</span>
<span style="font-size: ${handlePx(12, 'px')};">${_unit}</span>
</div>
......@@ -722,11 +812,14 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
},
};
}
// 单曲线需要标记最大值、最小值的情况下，需要增加自定义的series，将最大最小值显示在图表上
let _customSeries = returnCustomSeries(dataSource);
series.push(_customSeries)
} else {
tooltip = tooltipAccessor(series.map(item => item.unit), {contrastOption, contrast});
}
tooltip.timeFormat = tooltipTimeFormat;
let _legendData = series.filter(item => !['最大值', '最小值'].includes(item.name)).map(item => item.name);
let _legendData = series.filter(item => !['周期最大值', '周期最小值', '自定义'].includes(item.name)).map(item => item.name);
assignOptions(restOption, xAxis, _legendData);
return {
yAxis,
......
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