echarts绘制地图使用dispatchAction方法高亮区域

1.高亮方法代码如下：

highlightMap(myChart){
   // 高亮轮播展示
   var index = 0;
   this.timer = null;
   this.timer = setInterval(()=>{
     myChart.dispatchAction({
        type: 'downplay', // 取消高亮
        seriesIndex: 0
     })
     myChart.dispatchAction({
        type: 'highlight', //高亮
        seriesIndex: 0,
        dataIndex: index, //数据index,要显示的区域
     })
     myChart.dispatchAction({
        type: 'showTip', //显示提示框
        seriesIndex: 0,
        dataIndex: index
     })
     index++
     if(index > mapData.length){
        index = 0;
     }

   },3000)
}

2.绘制地图

initMap(){
   let map = document.getElementById('map')
   let myChart = echarts.init(map)
   this.highlightMap(myChart)
   let options = {
     title: {},
     tooltip: {},
     visualMap: {},
     series: [
       {
         label: {},
         rippleEffect: {},
         itemStyle: {
           normal: {
             areaColor: 'xx',
             borderWidth: 1,
             textStyle: {
               color: '#fff'
             },
             borderColor: '地图边框颜色'
           }，
           emphasis: {
             color: '#fff',
             areaColor: '#069', //高亮颜色
           }
         }，
         zoom: 1.2, //地图放大比例
         data: []
       }
     ]
   }
   myChart.setOption(options)
}

3.鼠标移入移出事件处理

myChart.on('mousemove',(e)=>{
  clearInterval(this.timer);
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0
  })
  myChart.dispatchAction({
    type:'highlight',
    seriesIndex: 0,
    dataIndex: e.dataIndex
  })  
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: e.dataIndex
  })
})

myChart.on('mouseout',()=>{
  let index = 0;
  this.timer = setInterval(()=>{
     myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
     })
     myChart.dispatchAction({
       type: 'highlight',
       seriesIndex: 0,
       dataIndex: index
     })
     myChart.dispatchAction({
       type:'showTip',
       seriesIndex: 0,
       dataIndex: index,
     })
     index++;
     if(index > this.mapData.length){
        index = 0
     }

  }, 3000)
})

 

 

参考链接：

     https://blog.csdn.net/yb1314111/article/details/129585093