echarts 使用dispatchAction来操作图标高亮效果

最近使用echarts开发扇形图，在一个echarts实例中，加入两个扇形。

需求默认显示当前两个扇形中的第一个数据。当鼠标移入时展示数据，移除后默认展示第一条数据
根据官方提示使用dispatchAction

基本使用

mychart.dispatchAction({
   type:'' //可选值 highlight downplay
   seriesIndex:0 //值为当前实例中的图表index，可以接收一个数组
   dataIndex:0 //需要展示当前图表的第几个默认值
   name：string类型
})
    
复制代码

默认展示当前第一条数据

mychart.dispathAction({
        type:'downplay',
        seriesIndex:[0,1],//两个图标同时展示
        dataIndex:0
  })
复制代码

开始写鼠标交互

可以打印下 e 里面会有很多想要的东西
mychart.on('mouseover',e=>{
    if(e.dataIndex != 0){
        mychart.dispathAction({
            type:'downplay',
            seriesIndex:e.componentIndex,
            dataIndex:0
      })
    }
})

mychart.on('mouseout',e=>{
        mychart.dispathAction({
            type:'highlight',
            seriesIndex:e.componentIndex,
            dataIndex:0
      })
})

复制代码

最终效果图