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 地图下钻内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现通讯录列表展开收起

    微信小程序实现通讯录列表展开收起

    这篇文章主要为大家详细介绍了微信小程序实现通讯录列表展开收起,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • js实现简单的拖拽效果

    js实现简单的拖拽效果

    这篇文章主要为大家详细介绍了js实现简单的拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js日期时间补零的小例子

    js日期时间补零的小例子

    js日期时间补零的小例子,需要的朋友可以参考一下
    2013-03-03
  • JS声明式函数与赋值式函数实例分析

    JS声明式函数与赋值式函数实例分析

    这篇文章主要介绍了JS声明式函数与赋值式函数,结合实例形式分析了JS函数解析的流程与执行顺序,需要的朋友可以参考下
    2016-12-12
  • uni-app配置APP自定义顶部标题栏设置方法与注意事项

    uni-app配置APP自定义顶部标题栏设置方法与注意事项

    相信很多小伙伴在使用uniapp进行多端开发的时候,在面对一些业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这篇文章主要给大家介绍了关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的相关资料,需要的朋友可以参考下
    2022-07-07
  • JavaScript表单输入不能为空验证的完整实现方案

    JavaScript表单输入不能为空验证的完整实现方案

    在前端开发中,使用JavaScript验证用户输入是确保表单数据完整性的关键步骤,本文详细介绍了如何通过JavaScript实现输入不能为空的校验逻辑,涵盖事件监听、DOM操作与表单控制,需要的朋友可以参考下
    2025-12-12
  • js+canvas实现动态吃豆人效果

    js+canvas实现动态吃豆人效果

    本文主要介绍了js+canvas实现动态吃豆人效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS运算符简单用法示例

    JS运算符简单用法示例

    这篇文章主要介绍了JS运算符简单用法,结合实例形式详细分析了JavaScript各种逻辑运算符、数学运算符、关系运算符等相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • js判断手机号是否正确并返回的实现代码

    js判断手机号是否正确并返回的实现代码

    这篇文章主要介绍了js判断手机号是否正确并返回的实现代码,以及使用正则表达式判断手机号是否正确,需要的的朋友参考下
    2017-01-01
  • 基于Electron实现桌面应用开发代码实例

    基于Electron实现桌面应用开发代码实例

    这篇文章主要介绍了基于Electron实现桌面应用开发代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论