echarts实现中国地图下钻进入下一级(地图钻取)

 更新时间:2023年08月07日 15:17:50   作者:美酒没故事°  
最近在学习echarts,今天就来介绍一下echarts实现中国地图下钻进入下一级,具有一定的参考价值,感兴趣的可以了解一下

echarts是一个基于JavaScript的可视化开源组件库。通过使用echarts,用户可以方便地将数据制图展示,本文就来介绍一下echarts实现中国地图下钻进入下一级(地图钻取),具体如下:

获取geo数据:

可以使用node爬虫获取数据

最好多爬几遍,因为有时候会获取错误

echarts实现 html

  <div ref="echarts-dom" class="echarts-content"></div>

js:

export default {
  data() {
    return {
      mapChart: null,
      addressCode: []
    };
  },
  mouted(){
    this.mapChart = echarts.init(this.$refs["echarts-dom"]);
    this.getData();
  },
  methods: {
    getData("100000") {
	  fetch(`${process.env.VUE_APP_ORIGIN}/geoData/$[code].json`)
	     .then((res) => {
	       return res.json();
	     }).then((res) => {
	       this.addressCode = res.features;
	       echarts.registerMap("echartsMap", res);
	       this.setEchartsOptions();
	     })
	     .finally((err) => {
	       this.mapLoading = false;
	     });
	  },
	 // echarts配置
     setEchartsOptions() {
       this.mapChart.off("click"); //图表渲染前销毁点击事件
       this.mapChart.setOption({
          series: [
            {
              type: "map",
              mapType: "echartsMap",
              roam: true,
              scaleLimit: {
                min: 1.1,
                max: 5.2,
              },
              data: this.addressCode,
              // 地图模块样式
              itemStyle: {
                // 默认模块样式
                normal: {
                  borderWidth: 1.3,
                  borderColor: "#00ffff",
                  areaColor: "#09295b",
                },
                // 鼠标经过模块样式
                emphasis: {
                  show: true,
                  borderWidth: 3,
                  areaColor: "#0d559d",
                  label: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
              },
              label: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
          ],
        },true);
      this.addEchartsEventListener();
    },
    // 监听echarts事件
    addEchartsEventListener() {
      const that = this;
      // 点击时间
      this.mapChart.on("click", function (params) {
        console.log(params.data);
        that.getData(params.data.codeNumber);
      });
      // 移动 | 缩放
      this.mapChart.on("georoam", (params) => {
        that.$emit("swicthPanle", false);
      });
    },
  }
}

到此这篇关于echarts实现中国地图下钻进入下一级(地图钻取)的文章就介绍到这了,更多相关echarts 地图下钻内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS网页在线获取鼠标坐标值的方法

    JS网页在线获取鼠标坐标值的方法

    这篇文章主要介绍了JS网页在线获取鼠标坐标值的方法,涉及javascript操作页面窗口位置元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • 微信小程序视图层莫名出现竖线的解决方法

    微信小程序视图层莫名出现竖线的解决方法

    本文主要介绍了微信小程序视图层莫名出现竖线的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome

    js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome

    最近想给JS特效与模板预览页面加上屏蔽查看源文件,防治整理不易的源码被轻易拿走,发现IE、火狐、chrome等各类浏览器支持不一样。下面是脚本之家整理的一些屏蔽总结
    2020-10-10
  • echarts实现响应式定位和布局

    echarts实现响应式定位和布局

    这篇文章介绍了echarts实现响应式定位和布局的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 用js得到网页中所有的div的id

    用js得到网页中所有的div的id

    这篇文章主要介绍了用js得到网页中所有的div的id,需要的朋友可以参考下
    2006-11-11
  • Layui 数据表格批量删除和多条件搜索的实例

    Layui 数据表格批量删除和多条件搜索的实例

    今天小编就为大家分享一篇Layui 数据表格批量删除和多条件搜索的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 再谈Javascript中的异步以及如何异步

    再谈Javascript中的异步以及如何异步

    大家都知道js是单线程的,执行起来是顺序的,在顺序的业务逻辑中当然没有问题,如果遇到可以并发执行的业务逻辑,再排队就很低级了!所以这里我们再来简单的谈谈JS中的异步以及如何异步。
    2016-08-08
  • 使用JS实现一个功能丰富的待办事项应用

    使用JS实现一个功能丰富的待办事项应用

    在日常工作和生活中,我们经常需要处理各种各样的待办事项,这篇文章主要为大家详细介绍了如何使用JavaScript实现一个功能丰富的待办事项应用,需要的可以了解下
    2024-01-01
  • JS+Canvas实现贪吃蛇小游戏

    JS+Canvas实现贪吃蛇小游戏

    这篇文章介绍了JS+Canvas实现贪吃蛇小游戏,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • d3.js实现简单的网络拓扑图实例代码

    d3.js实现简单的网络拓扑图实例代码

    最近一直在学习d3.js,大家都知道d3.js是一个非常不错的数据可视化库,我们可以用它来做一些比较酷的东西,比如可以来显示一些简单的网络拓扑图,这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络拓扑图,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11

最新评论