echarts tooltip(提示框)的某一项选中高亮状态

效果图

需求：
当有多组数据的时候，常常需要对比同一x轴的不同线上的点的数据，并且当数据组过多的时候，也就是线过多的时候，需要明确知道我们当前选中的线是哪条。
解决方案：
通过设置显示x轴的tooltip可以显示同一x轴点上面的各个线上面的数据，通过自定义tooltip和监听事件可以设置高亮当前鼠标悬停或点击的线对应的数据组。
关键点：
如何知道当前的点击或悬停的点与tooltip里面所有的数据点中需要的数据项对应起来，每个点都有一个坐标，通过对比坐标做判定即可。
代码

<template>
    <div class="index">
        <div ref="chart" class="chart"></div>
    </div>
</template>
<script>
let  echarts = require('echarts');
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require("echarts/lib/component/legend");
export default {
    data(){
        r