import React, { useRef, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import EChartsReact from 'echarts-for-react';
import { index } from 'd3';
import { log } from 'echarts/types/src/util/log.js';
type Props = {
data: number[][];
propid: number;
setRedLine: (value: number) => void;
lineIndex: number;
};
const LineGraph: React.FC<Props> = ({ data, propid, setRedLine, lineIndex }) => {
const chartRef = useRef<EChartsReact | null>(null);
const [showMarkPoint, setShowMarkPoint] = useState(false); // 控制气泡显示状态
const [legendIndex, setLegendIndex]= useState(0);
// 选中区域(默认全部)
const [startValue, setStartValue]=useState(0);
const [endValue, setEndValue]=useState(data.length);
// 计算TP90
function getTp90() {
const values = data.map(item => item[0]);
const sorted = [...values].sort((a, b) => b - a);
const lineIndex = Math.max(0, Math.floor(sorted.length * 0.9) - 1);
return sorted[lineIndex] || 0;
}
// 生成图表配置
const getOption = () => {
const linearr = [];
const legenddata = [];
for (let i = 0; i < data[0].length; i++) {
linearr.push(data.map(item => item[i]));
legenddata.push(`Line ${i + 1}`);
}
const dataseries = linearr.map((lineData, idx) => {
let newarr=[...lineData]
let objArr=Object.entries(newarr).slice(startValue || 0,(endValue || data.length-1)+1)
let sortarr=objArr.sort((a,b)=>b[1]-a[1]).slice(0,5).map(item=>item[0])
console.log("--------------------------------------------");
console.log("前5个索引",sortarr);
console.log("当前索引数组",objArr);
console.log("索引：",legendIndex);
// console.log( propid,idx,"---start1:",startValue || 0,"end1:",(endValue || data.length-1)+1);
console.log( propid,idx,"---start5:",startValue,"end5:",endValue+1 );
console.log("最终值：",
showMarkPoint && legendIndex==idx ? {
data: [
...sortarr.map((item, index) => {
if (objArr.map(item=>item[0]).indexOf(item)<0 ) {
return null;
}
return {
name: `峰值 ${index + 1}`,
value: lineData[Number(item)],
xAxis: Number(item),
yAxis: lineData[Number(item)],
}
})
]
} :undefined
);
return{
name: `Line ${idx + 1}`,
type: 'line',
data: lineData,
showSymbol: true,
markPoint: showMarkPoint && legendIndex==idx ? {
data: [
...sortarr.map((item, index) => {
return {
name: `峰值 ${index + 1}`,
value: lineData[Number(item)],
xAxis: Number(item),
yAxis: lineData[Number(item)],
}
})
]
} :undefined
}
});
const markLineSeries = {
name: 'MarkLines',
type: 'line',
data: [],
showSymbol: false,
silent: false,
markLine: {
symbol: 'none',
animation: false,
data: [
{
silent: true,
legendHoverLink: false,
yAxis: getTp90(),
name: `TP90`,
lineStyle: { color: '#00f', type: 'dashed', width: 2 },
label: { show: true, formatter: `TP90:${getTp90()}` }
},
{
silent: true,
legendHoverLink: false,
xAxis: lineIndex,
lineStyle: { color: '#f00', type: 'solid', width: 2 },
label: { show: true, formatter: `当前位置：${lineIndex + 1}` }
},
{
name: 'tip',
silent: true,
xAxis: lineIndex,
lineStyle: { width: 0 },
label: {
backgroundColor: 'rgba(0,0,0,0.7)',
color: '#fff',
padding: 8,
offset: lineIndex-startValue>endValue-lineIndex? [-10,230]:[10, 230],
align: lineIndex-startValue>endValue-lineIndex? 'right' : 'left',
borderRadius: 4,
formatter: [
`${lineIndex + 1}\n`,
lineIndex >= 0 && lineIndex < data.length
? data[lineIndex].map((item: any, index2: any) => `line${index2 + 1}: ${item}`).join('\n\n')
: null
].join('\n'),
}
}
]
}
};
const series = [...dataseries, markLineSeries];
const xAxisData = data.map((_, idx) => idx + 1);
return {
title: { text: `${propid}号折线图` },
tooltip: {
trigger: 'axis',
},
toolbox: {
feature: {
myTool2: {
show: true,
title: '顶峰值',
icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
onclick: function (){
setShowMarkPoint(prev=>!prev);
}
},
dataZoom: {
yAxisIndex: 'none'
},
}
},
legend: { data: legenddata },
xAxis: {
type: 'category',
name: '索引',
data: xAxisData
},
yAxis: { type: 'value', name: '数值' },
series: series,
};
};
const onChartReady = (myChart: any) => {
const zr = myChart.getZr();
const clickHandler = (params: any) => {
const pointInPixel = [params.offsetX, params.offsetY];
const pointInGrid = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
const isInGrid = myChart.containPixel({ seriesIndex: 0 }, pointInPixel);
if (isInGrid && pointInGrid && pointInGrid[0] >= 0 && pointInGrid[0] < data.length) {
setRedLine(pointInGrid[0]);
}
};
zr.on('click', clickHandler);
myChart.on('legendselectchanged', (params: any) => {
let newarr = Object.values(params.selected);
setLegendIndex(newarr.indexOf(true));
// setLegendIndex(newarr.indexOf(true));
console.log("start1:",startValue,"end1:",endValue);
console.log("----test-----",myChart.getOption().series[0].markPoint);
console.log("----2test2-----",myChart.getOption().series[0]);
});
myChart.on('dataZoom', (params: any) => {
// console.log("start:",params.batch[0].startValue,"end:",params.batch[0].endValue);
setStartValue(params.batch[0].startValue);
setEndValue(params.batch[0].endValue);
console.log('缩放数据：', params);
}
)
};
return (
<div style={{ position: 'relative' }}>
<EChartsReact
ref={chartRef}
option={getOption()}
style={{ width: '1000px', height: '400px' }}
notMerge={false}
onChartReady={onChartReady}
lazyUpdate={false}
/>
</div>
);
};
export default LineGraph;
// 还是不行（前提当气泡小于5个）经过点击legend后缩放图表，然后再次调整legend操作会让图表出现空的峰值气泡？且一直定位不动？怎么解决bug?
最新发布
本文分享了如何准确地定位用户反馈的Bug问题。首先需要详细询问并尝试复现问题，其次考虑用户使用的具体环境，并从业务流程及操作入口出发分析可能性。此外，与软件开发者合作寻找解决方案也是关键。
扫一扫
1287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
