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

我还可以再学！！！

已于 2022-11-24 09:46:33 修改

阅读量1.5k

点赞数

文章标签： echarts 前端 javascript

于 2022-11-24 09:46:10 首次发布

本文链接：https://blog.csdn.net/m0_53886762/article/details/128011813

版权

本文介绍了如何使用ECharts结合jQuery，实现在全国地图上点击选择省份获取其值，并在点击空白区域时返回全国地图的效果。在实现过程中，遇到点击事件可能多次触发的问题，通过清除上一轮监听事件来解决。另外，文章还提到在返回全国地图后，省份颜色会变化的bug，并给出了相应的解决方案。

摘要由CSDN通过智能技术生成

效果：

前：

点击省份：

点击空白处：

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

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

chinaChart.on('click', function (params) {
    vm.chinaOption.subTitle = params.name
   //将除点击外的省份赋值为0，使其显示颜色为白色
    data.forEach(item => {
        item.value = item.name == params.name ? params.value : 0
        console.log(item)
        //重新setoption
        chinaChart.setOption(option);
    })
   
})
function tt() {
    var a = data1
    vm.chinaCharts(v