Se selecciona y resalta un elemento de información sobre herramientas de echarts (cuadro de solicitud)

Imagen de efecto

Requisitos :
cuando hay varios conjuntos de datos, a menudo es necesario comparar los datos de puntos en diferentes líneas del mismo eje x, y cuando hay demasiados conjuntos de datos, es decir, cuando hay demasiadas líneas, Necesito saber la línea que seleccionamos actualmente ¿Cuál es?
Solución:
al configurar la información sobre herramientas que muestra el eje x, se pueden mostrar los datos de cada línea en el mismo punto del eje x, y el grupo de datos correspondiente a la línea que está actualmente suspendida o en la que se hace clic se puede resaltar personalizando la información sobre herramientas y seguimiento de eventos.
Punto clave:
cómo saber que el punto actual en el que se hizo clic o se desplazó corresponde a los elementos de datos requeridos en todos los puntos de datos en la información sobre herramientas, cada punto tiene una coordenada y se puede juzgar comparando las coordenadas.
Código

<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>