Echarts y轴上的内容鼠标移入高亮、点击高亮

1.移入高亮 移出恢复

移入移出高亮效果图

移入事件：

  myChart.on('mouseover', params => {
     //  也可以在鼠标移入的时候拿到y轴上的值
       if (params.componentType === 'yAxis') {
         const yAxisName = params.value
    //   拿到y轴上的名称并添加样式
         const yAxisItem = {
           value: yAxisName,
           textStyle: {
             color: '#00ff7f'
           }
         }
     // 拿到鼠标移入的是第几项
       const index = categories.findIndex(item => {
           return item === yAxisName || item.value === yAxisName
         })
    //  更新y轴上的数据样式，并重绘
        categories.splice(index, 1, yAxisItem)
        option.yAxis.data = JSON.parse(JSON.stringify(categories))
        myChart.setOption(option)
      }
     })

移出事件

//      注册 mouseout 事件，类目轴名称恢复默认颜色
     myChart.on('mouseout', params => {
       if (params.componentType === 'yAxis') {
        const yAxisName = params.value
        const index = categories.findIndex(item => {
           return item === yAxisName || item.value === yAxisName
         })

        categories.splice(index, 1, yAxisName)
         option.yAxis.data = JSON.parse(JSON.stringify(categories))
         myChart.setOption(option)
       }
     })

2.点击高亮当前项

点击高亮效果图

myChart.on('click', (params) => {
//  注意：点击的时候就先将y轴上的数据恢复！！！
//  如果不恢复的话，就是点击几个高亮几个。。。
    categories = ['categoryA', 'categoryB', 'categoryC']
//  拿到点击的名称并设置颜色
    if (params.componentType === 'yAxis') {
        const yAxisName = params.value
        const yAxisItem = {
          value: yAxisName,
          textStyle: {
            color: '#00ff7f'
          }
        }
        
        // 找到是第几项
        const index = categories.findIndex(item => {
          return item === yAxisName || item.value === yAxisName
        })
//      更新这一项的设置（除了名称外添加了样式），并重绘
        categories.splice(index, 1, yAxisItem)
        option.yAxis.data = JSON.parse(JSON.stringify(categories))
        myChart.setOption(option)
      }
})