echarts折线图监听鼠标在折线上，高亮并显示系列数值(升级版)

先看效果：

鼠标放在其他位置.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>