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

news2024/11/24 23:15:23

在这里插入图片描述

获取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);
      });
    },
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/846144.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

太心累!企业IT维修呼唤更专业的维修平台

大数据产业创新服务媒体 ——聚焦数据 改变商业 设想这样一个场景&#xff1a;在繁忙的工作日早晨&#xff0c;企业的运营部门突然发现一批重要的办公设备&#xff0c;台式电脑、笔记本电脑和打印机&#xff0c;出现了各种技术问题。无法连接网络、电脑启动异常、软件冲突等问…

【SQL应知应会】索引(一)• MySQL版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习&#xff0c;有基础也有进阶&#xff0c;有MySQL也有Oracle 索引 • MySQL版 前言一、索引1.简介1.1 索引的优点…

业界首个云管理产品与服务图谱发布,九州未来入选!

近日&#xff0c;由中国信息通信研究院和中国通信标准化协会联合主办的第十届可信云大会在北京成功召开&#xff0c;会上发布业界首个云管理全景图《云管理产品与服务图谱&#xff08;2023&#xff09;》。 九州未来凭借在云管理领域的多年深耕&#xff0c;成功入选“智慧应用…

【数学建模学习(9):模拟退火算法】

模拟退火算法(Simulated Annealing, SA)的思想借 鉴于固体的退火原理&#xff0c;当固体的温度很高的时候&#xff0c;内能比 较大&#xff0c;固体的内部粒子处于快速无序运动&#xff0c;当温度慢慢降 低的过程中&#xff0c;固体的内能减小&#xff0c;粒子的慢慢趋于有序&a…

无涯教程-Perl - defined函数

描述 如果 EXPR 的值不是undef值,则此函数返回true&#xff1b;如果未指定 EXPR ,则检查$_的值。它可以与许多功能一起使用以检测操作失败,因为如果出现问题,它们将返回undef。简单的布尔测试不会区分false,零,空字符串或字符串.0。 如果 EXPR 是函数或函数引用,则在定义函数…

ORCA优化器浅析——CFunctionProp function properties

CFunctionProp CFunctionProp代表了function properties函数属性&#xff0c;主要由function stability函数易变性&#xff08; enum EFuncStbl { EfsImmutable, /* never changes for given input */ EfsStable, /* does not change within a scan */ EfsVolatile, /* can ch…

objectMapper.configure 方法的作用和使用

objectMapper.configure 方法是 Jackson 提供的一个用于配置 ObjectMapper 对象的方法。ObjectMapper 是 Jackson 库的核心类&#xff0c;用于将 Java 对象与 JSON 数据相互转换。 configure 方法的作用是设置 ObjectMapper 的配置选项&#xff0c;例如设置日期格式、设置序列…

Stephen Wolfram:超越基础训练

Beyond Basic Training 超越基础训练 The majority of the effort in training ChatGPT is spent “showing it” large amounts of existing text from the web, books, etc. But it turns out there’s another—apparently rather important—part too. 在训练 ChatGPT 的过…

基于短信宝API零代码实现短信自动化业务

场景描述&#xff1a; 基于短信宝开放的API能力&#xff0c;实现在特定事件&#xff08;如天气预警&#xff09;或定时自动发送短信&#xff08;本文以定时群发短信为例&#xff09;。通过Aboter平台如何实现呢&#xff1f; 使用方法&#xff1a; 首先创建一个IPaaS流程&…

splice没有删除指定元素怎么回事

动态删除数组元素&#xff0c;只能用倒序遍历或者正序遍历时i每次减1 防止遍历时数组元素长度动态改变导致的死循环或者缺漏 注释的需要-1

io day9

1&#xff0e;要求用消息队列实现AB进程对话 a.A进程先发送—句话给B进程&#xff0c;B进程接收后打印 b.B进程再回复—句话给A进程&#xff0c;A进程接收后打印 c.重复1.2步骤&#xff0c;当收到quit后&#xff0c;要结束AB进程 d.实现随时收发:用多进程多线程。 2.要求在共享…

NC 突破性发现!新型分子抑制细菌多重耐药性,重燃抗生素效力的希望

多重耐药性是指细菌病原体在许多结构多样化的化合物的致死剂量下存活的能力。细菌多重耐药性继续以惊人的速度蔓延&#xff0c;威胁着全球人类健康。2019年&#xff0c;细菌多重耐药性直接导致全球1万人死亡&#xff0c;超过艾滋病毒和疟疾的总和。 由于大多数临床抗生素已经对…

Docker卸载安装及国内镜像源(详细版)

文章目录 一、卸载已有Docker1、首先判断本地有没有docker&#xff1a;2、判断CentOS下 docker是否在运行&#xff1a;3、停止docker运行&查看状态4、yum查看docker安装的包并卸载5、删除docker安装目录6、查看docker version 二、Docker安装及镜像源配置1、centOS 7 yum源…

第7集丨Vue 江湖 —— 条件渲染

目录 一、v-show二、v-if2.1 基本使用2.2 条件渲染分组2.3 与 v-else-if、v-else 结合使用 三、v-if vs v-show四、测试案例 本节条件渲染所涉及到的指令有&#xff1a; v-showv-ifv-else-ifv-else 一、v-show 1. 用法&#xff1a; 语法: v-show" 表达式"&#xff…

【CSS】说说对BFC的理解

目录 一、概念 二、BFC的布局规则 三、设置BFC的常用方式 四、BFC的应用场景 1、解决浮动元素令父元素高度坍塌的问题 2、解决非浮动元素被浮动元素覆盖问题 3、解决外边距垂直方向重合的问题 五、总结 一、概念 我们在页面布局的时候&#xff0c;经常出现以下情况&am…

VS2017+CMake+opencv/opencv_contrib 配置报错

请参考https://blog.csdn.net/m0_57433605/article/details/123026901 大佬写的真的很好 添加代理能解决90%问题&#xff08;甚至100%&#xff09;

性能问题通用排查思路(一)CPU

本系列文章只是梳理一些常见的线上问题的通用排查思路&#xff0c;能解决70%的问题&#xff0c;对于剩下的30%是一些极端的问题&#xff0c;需要对计算机底层知识有充分的了解&#xff0c;并积累大量问题排查经验&#xff0c;仔细分析才能找到具体原因。 这里基于Linux操作系统…

18、SQL注入之堆叠及WAF绕过注入

目录 堆叠查询注入WAF绕过-SQL注入简要讲解安全狗、宝塔等防护waf策略规则大小写和关键字替换 加密解密编码解码等价函数特殊符号反序列化注释符混用更改提交方式Fuzz大法数据库特性垃圾数据溢出HTTP参数污染 实测简易CMS头部注入漏洞Bypass原理分析 堆叠查询注入 stacked inj…

吃透MySQL面试八股文

内容摘自我的学习网站&#xff1a;topjavaer.cn 什么是MySQL MySQL是一个关系型数据库&#xff0c;它采用表的形式来存储数据。你可以理解成是Excel表格&#xff0c;既然是表的形式存储数据&#xff0c;就有表结构&#xff08;行和列&#xff09;。行代表每一行数据&#xff0…

MySQL刷题遇到的盲点(五)窗口函数

窗口函数 语法&#xff1a; <窗口函数> over (partition by <用于分组的列名>order by <用于排序的列名>) partition by&#xff1a;用来对表分组&#xff08; partition 子句可以省略&#xff0c;省略就是不指定分组&#xff09; order by&#xff1a;是…