当前位置: 首页 > news >正文

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

在这里插入图片描述

获取geo数据:

可以使用node爬虫获取数据

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

实现逻辑

拥有geo数据后

  1. 请求geo数据
  2. 注册地图 registerMap
  3. 配置echarts
  4. 增加事件监听(点击事件)

如果点击了,回到第一步。功能就是循环以上4步逻辑

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实现中国地图下钻进入下一级行政区(地图钻取)

获取geo数据&#xff1a; 可以使用node爬虫获取数据 最好多爬几遍&#xff0c;因为有时候会获取错误 实现逻辑 拥有geo数据后 请求geo数据注册地图 registerMap配置echarts增加事件监听&#xff08;点击事件&#xff09; 如果点击了&#xff0c;回到第一步。功能就是循环以…...

从0到1学会手写操作系统,我只用了2个小时

黑马嵌入式教程再出力作 重磅发布第三弹 《自己动手写嵌入式操作系统》 问&#xff1a;嵌入式开发不是只学单片机就行&#xff1f;为什么要学操作系统&#xff1f; 答&#xff1a;年轻人&#xff0c;别把路走窄了。且听我说↓↓↓ 嵌入式产品分为两大类&#xff1a;一类简单…...

软件包管理

一、rpm管理软件包 1、获得rpm的软件包 1&#xff09;去官网安装不推荐 找自己光盘有没有这个包 装好需要的包之后装qq 2&#xff09;去镜像站点&#xff0c;推荐 二、yum/dnf管理软件包 解决软件的依赖关系&#xff0c;可以自动的去服务器下载软件包 1、使用yum软件包 使用…...

【逗老师的PMP学习笔记】9、项目资源管理

目录 一、规划资源管理1、【关键工具】责任分配矩阵RACI矩阵2、【关键工具】组织理论2.1、马斯洛需求层次理论2.2、麦格雷戈-X-Y理论2.3、赫兹伯格双因素理论 3、【关键输出】资源管理计划4、【关键输出】团队章程 二、估算活动资源1、【关键输入】资源日历 三、获取资源1、【关…...

react-virtualized可视化区域渲染的使用

介绍 github地址&#xff1a;https://github.com/bvaughn/react-virtualized 实例网址&#xff1a;react-virtualized如果体积太大&#xff0c;可以参考用react-window。 使用 安装&#xff1a; yarn add react-virtualized。在项目入口文件index.js中导入样式文件&#xff…...

navicat连接postgresql报错

navicat连接postgresql报错 navicat连接postgresql报错 现象 有小伙伴告诉我 安装了新的postgresql 使用navicat连接&#xff0c;报错 ERROR: column "datlastsysoid" does not existLINE 1: SELECT DISTINCT datlastsysoid FROM pg database column “datlastsy…...

题目:灾后重建

【题目描述】 B地区在地震过后&#xff0c;所有村庄都造成了一定的损毁&#xff0c;而这场地震却没对公路造成什么影响。但是在村庄重建好之前&#xff0c;所有与未重建完成的村庄的公路均无法通车。换句话说&#xff0c;只有连接着两个重建完成的村庄的公路才能通车&#xff…...

Vue 插槽 slot

solt 插槽需要分为 2.6.0 版本以上和 2.6.0版本以下。 2.6.0 版本以下的 slot 插槽在&#xff0c;2.x版本将继续支持&#xff0c;但是在 Vue 3 中已被废弃&#xff0c;且不会出现在官方文档中。 作用 插槽 prop 允许我们将插槽转换为可复用的模板&#xff0c;这些模板可以基于…...

【C/C++】C语言位图操作实例(亲测)

C语言中的位图操作通常用于处理大量的二进制数据&#xff0c;例如图像处理、压缩算法等。以下是一些C语言中的位图操作实例&#xff1a; 设置位图中的某一位 void set_bit(unsigned char *bitmap, int bit) {bitmap[bit / 8] | (1 << (bit % 8)); }这个函数将位图中的第…...

Mahout教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Mahout 是 Apache Software Foundation&#xff08;ASF&#xff09; 旗下的一个开源项目&#xff0c;提供一些可扩展的机器学习领域经典算法的实现&#xff0c;旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现&#xff0c;包括聚类、分类、推荐…...

wxwidgets Ribbon使用wxRibbonToolBar实例

wxRibbonToolBar就是工具栏&#xff0c;一下是实现的效果&#xff0c;界面只是功能展示&#xff0c;没有美化 实现代码如下所示&#xff1a; MyFrame::MyFrame(const wxString& title) : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(800, 600)) …...

8.9黄金最新行情走势分析及短线交易策略

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周三&#xff08;8月9日&#xff09;现货黄金维持震荡&#xff0c;目前交投于1930美元附近&#xff0c;隔日现货黄金盘中震荡下行&#xff0c;失守1930关口并在美盘时段…...

VB+SQL房地产评估系统设计与实现

摘 要 房地产评估系统对房地产评估信息进行全面现代化管理。但一直以来人们使用传统人工的方式进行评估,这种管理方式存在着许多缺点,如:效率低、计算量大,容易出错。另外时间一长,将产生大量的文件和数据,这对于查找、更新和维护都带来了不少的困难。 随着科学技术的不断…...

用AOP实现前端传参时间的时区转化

用AOP实现前端传参时间的时区转化 新增注解新增AOP切面类Controller传参字段添加注解结束 新增注解 Documented Target({FIELD,METHOD,PARAMETER,ANNOTATION_TYPE}) Retention(RUNTIME) public interface MyDateFormatDeserializer {String pattern() default "yyyy-MM-d…...

mybatis There is no getter for property named ‘*‘ in ‘class java.lang.String

mybatis There is no getter for property named car_port_ids in class java.lang.String 出现这种错误我这边是mapper.xml子查询字段不对导致的 我把查询结果的列的字段放进去结果不识别car_port_ids可能我这种字段本身就有问题 技术博客 http://idea.coderyj.com/ 1.解决 &…...

Mac终端前总会出现 (base) 字样解决

Mac安装了anaconda之后&#xff0c;终端前总会出现 (base) 字样&#xff0c;显示如下&#xff1a; (base) tinghoudeiMac ~ 具体原因是 安装了anaconda后&#xff0c;每次启动终端都会启动anaconda的base环境。 解决办法 设置anaconda 不自启base环境就好了&#xff1a; 禁用…...

RabbitMQ面试题大全含答案

rabbitmq 的使用场景有哪些&#xff1f; ①. 跨系统的异步通信&#xff0c;所有需要异步交互的地方都可以使用消息队列。就像我们除了打电话&#xff08;同步&#xff09;以外&#xff0c;还需要发短信&#xff0c;发电子邮件&#xff08;异步&#xff09;的通讯方式。 ②. 多…...

Linux配置QT Creator环境:ubuntu中安装QT Creator环境

一、前景 目前市面上很多公司使用QT Creator进行界面开发&#xff0c;基本都会选择在Linux环境进行&#xff0c;优点不仅是市场所需&#xff0c;更是方便后期代码的移植&#xff0c;相较于Windows系统&#xff0c;Linux系统移植性非常好。故此篇文章&#xff0c;介绍如何在Linu…...

机器学习深度学习——池化层

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——卷积的多输入多输出通道 &#x1f4da;订阅专栏&#xff1a;机器学习&&深度学习 希望文章对你们…...

siMLPe:Human Motion Prediction

Back to MLP: A Simple Baseline for Human Motion Prediction解析 摘要1. 简介2. Related Work2.1 基于RNN的人体运动预测2.2 基于GCN的人体运动预测2.3 基于 Attention 的人类运动预测2.4 总结 3. siMLPe3.1 离散余弦变换&#xff08;Discrete Cosine Transform (DCT)&#x…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...