先看效果：
鼠标放在其他位置.png
鼠标放在线上.jpg
纵向比对：鼠标放在空白处，提示框正常显示各个系列的数据。
横向比对：鼠标放在线上或者放在节点上时，高亮显示目标折线，并淡出其他折线，折线上显示对应系列的数值，提示框显示当前系列名称。
echarts版本需在5.2.2及以上。
下面代码示例是在VUE环境中。
#DOM
<template>
<div ref="chart" style="height: 400px; width: 100%"/>
</template>
#脚本
<script>
const echarts = require('echarts')
export default {
props: {
title: {
type: String,
required: true
},
source: {
type: Object,
required: true,
default: () => {
return { legend: [], xData: [], series: [] }
}
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
const that = this
// 增加series配置，开启触发线事件
// New 增加emphasis配置，目的是折线高亮时，淡出其他折线
this.source.series.map(s => {
s.triggerLineEvent = true
s.emphasis = { focus: 'series' }
return s
})
// 初始化echarts
this.chart = echarts.init(this.$refs.chart)
this.chart.clear()
/**
* 增加监听，mouseover事件（鼠标放在上面）
* 节点事件触发 是默认开启的，我们再开启了线事件触发后，
* 目前鼠标放在线上或者放在节点上都能触发下面的监听，
* 事件触发后，修改series内对应系列的参数配置。
* 注：params内包含系列名称等信息
*/
this.chart.on('mouseover', function(params) {
that.chart.setOption({
tooltip: {
// 鼠标在折线上，系列内横向比对，显示系列名称
formatter: function(p) {
return p[params.seriesIndex].marker +
' ' + p[params.seriesIndex].seriesName
}
},
series: [
{
name: params.seriesName,
lineStyle: {
width: 5
},
label: {
show: true,
fontSize: 16,
position: [10, -15],
formatter: '{c}'
}
}
]
})
})
// 增加监听，mouseout事件（鼠标离开）
this.chart.on('mouseout', function(params) {
that.chart.setOption({
tooltip: {
// 鼠标不在折线上，多系列纵向比对，显示各系列数值
formatter: function(p) {
let res = p[0].name
res += '<br>'
p.forEach(p1 => {
res += (p1.marker + ' ' + p1.seriesName + ':' + p1.value + '<br>')
})
return res
}
},
series: [
{
name: params.seriesName,
lineStyle: {
width: 2
},
label: {
show: false
},
endLabel: {
show: false
}
}
]
})
})
// 配置图表
this.chart.setOption({
title: {
text: this.title + '小考成绩'
},
tooltip: {
trigger: 'axis',
// 鼠标不在折线上，多系列纵向比对，显示各系列数值
formatter: function(p) {
let res = p[0].name
res += '<br>'
p.forEach(p1 => {
res += (p1.marker + ' ' + p1.seriesName + ':' + p1.value + '<br>')
})
return res
}
},
grid: {
left: '50px',
right: '50px',
borderWidth: 0,
top: 50,
bottom: 50
},
legend: {
left: 'center',
top: 20,
data: this.source.legend
},
xAxis: [{
type: 'category',
data: this.source.xData
}],
yAxis: [{
type: 'value',
min: 0,
max: 100
}],
series: this.source.series
})
}
}
}
</script>
