Skip to content

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

fix: 修复切换功能无法生成tip的问题

parent ae5c513b
Hide whitespace changes
Inline Side-by-side
Showing with 51 additions and 26 deletions
packages/extend-components/EC_HistoryView/src/GridChart.js
View file @ 5605c080
......@@ -25,6 +25,7 @@ const ChartWidthRef = (props) => {
const timerRef = useRef(null);
const minMaxMarkPoint = (dataSource, chart, isInit) => {
// 只有一个数据曲线时显示markline
let isMultiple = props.isMultiple
if (dataSource.length !== 1) return {};
// 1. 找出最大、最小的值
let pointArr = dataSource[0].dataModel;
......@@ -82,29 +83,31 @@ const ChartWidthRef = (props) => {
// 6. 确定使用的图形
// 默认图形，居中
let maxIconPath = `path://M1233.329493 195.75466633h-1112.064c-34.128213 0-61.781333 27.661653-61.781333 61.781334v473.658026c0 34.117973 27.65312 61.781333 61.781333 61.781334h472.80128l83.23072 144.155306 83.23072-144.155306h472.80128c34.128213 0 61.781333-27.66336 61.781334-61.781334V257.53600033c0-34.117973-27.65312-61.781333-61.781334-61.781334z`;
let maxSymbolOffset = [0, -14];
let maxSymbolOffset = isMultiple ? [0, -14] : [0, -20];
let _maxOffset = isMultiple ? -14 : -20;
if (maxOutEdge) {
if (maxOutSide === 'left') {
// 左边界超出，使用朝右的图表
maxSymbolOffset = ['50%', -14];
maxSymbolOffset = ['50%', _maxOffset];
maxIconPath = 'path://M48.677,6.151v10c0,1.7-1.3,3-3,3h-35.5l-6.7,4c0,0,0.2-5.3,0.2-7v-10c0-1.7,1.3-3,3-3h39C47.277,3.151,48.677,4.551,48.677,6.151z';
} else if (maxOutSide === 'right') {
// 右边界超出，使用朝左的图表
maxSymbolOffset = ['-50%', -14];
maxSymbolOffset = ['-50%', _maxOffset];
maxIconPath = 'path://M6.477,3.151h39c1.7,0,3,1.3,3,3v10c0,1.7,0.2,7,0.2,7l-6.7-4h-35.5c-1.7,0-3-1.3-3-3v-10C3.477,4.551,4.877,3.151,6.477,3.151z'
}
}
// 默认图形
let minIconPath = 'path://M131.999 849.579h1112.064c34.128 0 61.781-27.662 61.781-61.781v-473.658c0-34.118-27.653-61.781-61.781-61.781h-472.801l-83.231-144.155-83.231 144.155h-472.801c-34.128 0-61.781 27.663-61.781 61.781v473.658c0 34.118 27.653 61.781 61.781 61.781z';
let minSymbolOffset = [0, 14];
let minSymbolOffset = isMultiple ? [0, 14] : [0, 20];
let _minOffset = isMultiple ? 14 : 20;
if (minOutEdge) {
if (minOutSide === 'left') {
// 左边界超出，使用朝右的图表
minSymbolOffset = ['50%', 14];
minSymbolOffset = ['50%', _minOffset];
minIconPath = 'path://M45.677,23.151h-39c-1.7,0-3-1.3-3-3v-10c0-1.7-0.2-7-0.2-7l6.7,4h35.5c1.7,0,3,1.3,3,3v10C48.677,21.751,47.277,23.151,45.677,23.151z';
} else if (minOutSide === 'right') {
// 右边界超出，使用朝左的图表
minSymbolOffset = ['-50%', 14];
minSymbolOffset = ['-50%', _minOffset];
minIconPath = 'path://M3.477,20.151v-10c0-1.7,1.3-3,3-3h35.5l6.7-4c0,0-0.2,5.3-0.2,7v10c0,1.7-1.3,3-3,3h-39C4.877,23.151,3.477,21.751,3.477,20.151z'
}
}
......@@ -118,15 +121,15 @@ const ChartWidthRef = (props) => {
symbol: minIconPath,
symbolSize: (e) => {
let str = ![undefined, null].includes(e) ? String(e) : '';
let length = 40 + str.length * 6
return [length, 20]
let length = (isMultiple ? 40 : 60) + str.length * 6
return [length, isMultiple ? 20 : 32]
},
label: {
show: true,
color: '#fff',
formatter: '最小: {c}',
fontSize: 12,
fontWeight: 'normal',
fontSize: isMultiple ? 12 : 14,
fontWeight: isMultiple ? 'normal' : 'bold',
verticalAlign: 'top',
offset: [0, -2]
},
......@@ -142,20 +145,20 @@ const ChartWidthRef = (props) => {
symbolOffset: maxSymbolOffset,
symbolSize: (e) => {
let str = ![undefined, null].includes(e) ? String(e) : '';
let length = 40 + str.length * 6
return [length, 20]
let length = (isMultiple ? 40 : 60) + str.length * 6
return [length, isMultiple ? 20 : 32]
},
itemStyle: {
// color: "#1980ff",
},
label: {
color: '#fff',
fontSize: 12,
fontWeight: 'normal',
show: true,
color: '#fff',
formatter: '最大: {c}',
offset: [0, -1]
}
fontSize: isMultiple ? 12 : 14,
fontWeight: isMultiple ? 'normal' : 'bold',
offset: [0, -2]
},
},
{
name: '',
......@@ -195,18 +198,43 @@ const ChartWidthRef = (props) => {
};
// 将opt修改一下
const cur_opt = useMemo(() => {
let _option = cloneDeep(props.option);
const chart = ref.current?.getEchartsInstance?.();
if (_option?.series?.[0] && chart) {
_option.series[0].markPoint = minMaxMarkPoint(props.data.list, chart, true);
_option.series[0].markLine = {
silent: false,
symbol: 'none',
data: [{
name: '平均线',
type: 'average',
lineStyle: {
color: '#00b8b1',
type: 'solid',
},
label: {
position: 'insideEndTop',
color: '#00b8b1',
formatter: function (param) {
return `平均值:${param.value}`;
},
},
}]
}
}
return {
...props.option, grid: {
...props.option,
..._option, grid: {
...props.option.grid,
top: 45,
bottom: 65,
}
}
}, [props.option]);
}, [props.option, ref, props.data.list]);
useEffect(() => {
console.log('props.opt: ', props.option);
ref.current?.resize?.();
if (props.data.list?.length !== 1) return;
const chart = ref.current?.getEchartsInstance?.();
chart.setOption({
series: {
......@@ -242,11 +270,7 @@ const ChartWidthRef = (props) => {
chart.off('legendselectchanged', renderMarkPoint);
chart.off('datazoom', dataZoomFn);
}
}, [cur_opt]);
useEffect(() => {
if (props.data.list?.length !== 1) return;
renderMarkPoint(false)
}, [props.data.list]);
}, [JSON.stringify(cur_opt)]);
return <BasicChart
ref={ref}
{...props}
......@@ -530,6 +554,7 @@ const GridChart = memo((props) => {
isInit ? '' : <PandaEmpty/>
) : (
<ChartWidthRef
isMultiple={gridData.length > 1}
data={gridData[index]}
style={{width: '100%', height: '100%'}}
option={item.option}
......
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