使用echarts弄一个全国地图实现点击选择其省份获取省份值后点击空白处回到全国地图

效果：

前：

点击省份：

点击空白处：

代码：echarts.on事件 jquery的on事件

地图颜色范围为['white','blue']对应[0,max]

1.  
   chinaChart.on('click', function (params) {
2.  
   vm.chinaOption.subTitle = params.name
3.  
   //将除点击外的省份赋值为0，使其显示颜色为白色
4.  
   data.forEach(item => {
5.  
   item.value = item.name == params.name ? params.value : 0
6.  
   console.log(item)
7.  
   //重新setoption
8.  
   chinaChart.setOption(option);
9.  
   })
10.  
     
11.  
    })
12.  
    function tt() {
13.  
    var a = data1
14.  
    vm.chinaCharts(vm.chinaData(a).dNumList, vm.chinaOption.color, data1);
15.  
    }
16.  
    $('#china_chart').on('click',function () {
17.  
    console.log(1)
18.  
    event.preventDefault()
19.  
    if (!f ) {
20.  
    tt()
21.  
    }
22.  
    console.log(o)
23.  
    f = false
24.  
    console.log(f)
25.  
    })

因为通过jquery给地图容器绑定点击事件，在点击地图部分时也会触发到该点击事件，所以需要对点击事件进行判断，f为true即为点击地图部分则不调用tt，相反则调用tt重新赋值恢复到全国地图，该方式存在一个问题，click事件会出现点击一次执行多次的问题，所以需要在地图方法的一开始就清除上一轮的监听事件

  chinaChart.off("click");

1.  
   $('#china_chart').off('click').on('click',function () {
2.  
   console.log(16)
3.  
   })

 最后，通过该方法实现的效果还存在一个问题：当点击该省份后再点击回全国鼠标再次经过地图时，上一轮点击过的省份颜色会再次改变，通过以下方式解决：

1.  
   chinaChart.dispatchAction({
2.  
   type: 'unselect',
3.  
   name: str,//str是上一轮点击的省份名称，为全局变量
4.  
   })

这篇好文章是转载于：学新通技术网