vue+ECharts4.x地图下钻/散点分布以及热力图

最新推荐文章于 2024-08-16 15:37:42 发布

没事儿呀

最新推荐文章于 2024-08-16 15:37:42 发布

阅读量6.1k

点赞数 1

分类专栏： echarts 文章标签： vue 地图下钻散点分布气泡显示 ECharts

本文链接：https://blog.csdn.net/tong_11/article/details/81671962

版权

本文介绍如何使用Vue和ECharts 4.x实现从国家到省级地图的下钻功能，同时展示散点分布和热力图。通过示例代码，展示了在地图外的箭头是由于数据问题，以及如何调整。提供了详细的ECharts官方文档链接，供开发者参考。

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

因为工作原因用到echarts，需要实现三个功能国家到省级的地图下钻和散点分布以及热力图显示

网上资料蛮少的，记录一个给后面的小伙伴一些参考，如果帮到你请点赞 d=====(￣▽￣*)b

demo效果如下

中国地图下显示为热力图，显示精确分布点只是demo所以数据是自己写的假数据只有几条

点击进入省份地图，在地图之外还有那个小箭头是数据的原因不是bug改下数据就好

先上官网http://echarts.baidu.com/option.html#title，表白echarts，文档真的很详细，良心官网

demo代码如下

下钻到市级县级道理也是如此

mapfun(name){ 
      console.log(this.chartNum)
      // 注意文件路径 
      this.$http.get('static/province/'+name+'.json').then(res => { 
        echarts.registerMap(name, res.body)
        let data = [];
        res.body.features.forEach(item =&