拿到一个需求,折线图是多条折线的,每条折线图的x轴的点都不同,希望在该点近显示当前点的信息,而且不同的查询条件,生成的曲线个数是不同的,代码如下
this.chart.on('mousemove', params => {
moveParams = params
})
this.chart.on('mouseout', params => {
moveParams = null
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
formatter: function(params) {
if (!moveParams) {
return
}
const moveIndex = moveParams.seriesIndex // 鼠标在哪儿条曲线上
// 鼠标所在的线对应的对象
const currentParams = params.find(item => item.seriesIndex === moveIndex)
if (currentParams && currentParams.seriesName === moveParams.seriesName) {
// 每条线的时间 moveIndex:线的下标
const times = series[moveIndex].makeTime.split('T')
return '工件编号:' + currentParams.seriesName + ('</br>') + 'X: ' + currentParams.data[0] + ('</br>') + 'Y: ' + currentParams.data[1] + ('</br>') + '日期: ' + times.join(' ')
}
}
},
color: ['#9f5bff', '#4bb8a9', '#f2bc5b', '#208ce3', '#f47f92'],
dataZoom: [{
type: 'inside'
}, {
type: 'slider'
}, {
type: 'slider',
orient: 'vertical'
}],
grid: {
top: '8%',
left: '2%',
right: '6%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: axisLabelX
},
yAxis: {
type: 'value',
axisLabel: axisLabelY
},
series: series.map(element => {
console.log(element, 'element')
return {
type: 'line',
...element
}
})
}, true)
})