An item of echarts tooltip (prompt box) is selected and highlighted

Effect picture

Requirements :
When there are multiple sets of data, it is often necessary to compare the data of points on different lines of the same x-axis, and when there are too many data sets, that is, when there are too many lines, we need to know the line we currently selected Which one is it?
Solution:
By setting the tooltip that displays the x-axis, the data on each line on the same x-axis point can be displayed, and the data group corresponding to the line that is currently hovered or clicked can be highlighted by customizing the tooltip and monitoring events.
Key point:
How to know that the current clicked or hovered point corresponds to the required data items in all the data points in the tooltip, each point has a coordinate, and it can be judged by comparing the coordinates.
Code

<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(){
        return {
        }
    },
    methods:{
        drawEchart(datax,datay,ref){
            console.log(datax,datay,ref)
            let node=this.$refs[ref]
            let myChart = echarts.init(node);
            let nameArr=[]
            let seriesArr=datay.map(item=>{
                nameArr.push(item.name)
                return {
                    type: 'line',
                    data:item.data,
                    name:item.name
                }
            })
            let currentSeriesIndex=0//定义当前点的y坐标
            let currentDataIndex=0//定义当前点的x坐标

            let option={
                    tooltip:{
                        extraCssText:'text-align:left',
                        trigger:'axis',
                        formatter:function(params){
                            console.log(params)
                            let html=''
                            params.forEach(item=>{
                                if(currentSeriesIndex===item.seriesIndex&&currentDataIndex===item.dataIndex){//判断坐标点，并给与选中的样式
                                    html+=`${item.marker}<span style="color:blue;font-size:28px">${item.seriesName}</span>:<span style="color:blue;font-size:28px">${item.value}</span> </br>`
                                }else{
                                    html+=`${item.marker}${item.seriesName}:${item.value} </br>`
                                }
                            })
                            return html
                        }
                    },
                    legend:{
                       data:nameArr
                    },
                    xAxis: {
                        type: 'category',
                        data: datax,
                        axisLabel: {  
                            interval:0,  
                            rotate:90  
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesArr
            }
            myChart.setOption(option)
            myChart.on('mousemove', function (params) {//通过事件获取坐标点
                console.log(params)
                currentSeriesIndex=params.seriesIndex
                currentDataIndex=params.dataIndex
            })
            myChart.on('mouseout',function(){
                currentSeriesIndex=0
                currentDataIndex=0
            })
        }
    },
    created(){
        let datax=['2020-01-01','2020-01-02','2020-01-03','2020-01-04']
        let datay=[
            {
                data:[12,2,13,55],
                name:'companyA'
            },
            {
                data:[12,44,2,24],
                name:'companyB'
            }
        ]
        this.$nextTick(()=>{
            this.drawEchart(datax,datay,'chart')
        })
    }
}
</script>
<style lang="less">
.index{
    .chart{
        width: 400px;
        height: 400px;
    }
}
</style>