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

多个地区地图可视化

news 2026/4/7 4:22:42

1. 配置Json文件

1.1 获得每个省份的json数据

  1. 打开 阿里云数据可视化平台 主页。
    在这里插入图片描述

  2. 在搜索框中输入所需省份。
    在这里插入图片描述

  3. 将json文件下载到本地。
    在这里插入图片描述

1.2 将各省份的json数据进行融合
  1. 打开 geojson.io 主页
    在这里插入图片描述
  2. 点击 open，上传刚刚下载的 json 文件，对多个省份不断上传
    在这里插入图片描述
  3. 保存得到的整合省份json文件

2. 地区数据可视化

2.1 布局基本代码
  1. 打开 Echarts使用手册 拷贝以下代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>
  1. 将所框部分代码删除
    在这里插入图片描述
  2. 引入以下 js
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

在这里插入图片描述
4. 将代码拷贝到以下图片位置中
在这里插入图片描述

myChart.showLoading();$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('HK', geoJson);myChart.setOption((option = {title: {// 图的名称text: '',},visualMap: {// 数据的范围min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,// 区域颜色inRange: {color: ['#E1F5FE', '#B3E5FC', '#4FC3F7', '#03A9F4', '#0288D1']}},series: [{type: 'map',map: 'HK',data: [{name: '中西区', value: 20057.34},],}]}));});
2.2 修改配置代码
  1. 修改json路径，改为刚刚整合的地区json文件路径
    在这里插入图片描述
  2. 添加数据，并根据数据范围修改visualMap属性中的max与min值
    在这里插入图片描述
  3. 添加标题，并修改其位置，修改图例的位置
    在这里插入图片描述在这里插入图片描述

3. 效果图

在这里插入图片描述

相关文章：

多个地区地图可视化

1. 配置Json文件 1.1 获得每个省份的json数据 打开 阿里云数据可视化平台 主页。 在搜索框中输入所需省份。 将json文件下载到本地。 1.2 将各省份的json数据进行融合 打开 geojson.io 主页 点击 open&#xff0c;上传刚刚下载的 json 文件&#xff0c;对多个省份不断…...

编程日记 2024/3/4 22:05:09

学习使用paddle来构造hrnet网络模型

1、首先阅读了hrnet的网络结构分析&#xff0c;了解到了网络构造如下&#xff1a; 参考博文姿态估计之2D人体姿态估计 - &#xff08;HRNet&#xff09;Deep High-Resolution Representation Learning for Human Pose Estimation&#xff08;多家综合&#xff09;-CSDN博客 最…...

编程日记 2024/3/4 22:03:07

Redis 多线程操作同一个Key如何保证一致性？

单线程模型&#xff1a;Redis 是单线程模型的&#xff0c;它通过一个事件循环来处理所有客户端请求&#xff0c;这意味着 Redis 在任何时刻只会处理一个请求&#xff0c;从而避免了并发访问同一个 Key 的问题。这种设计保证了数据的一致性。 乐观锁&#xff08;Watch&#xff…...

编程日记 2024/3/4 21:57:00

单链表合并

【问题描述】 建立两个升序排列的单链表&#xff0c;表中元素的数据类型是整数&#xff0c;将建立的两个链表合并为 一个新的升序的单链表&#xff0c;并输出显示已合并好的有序的单链表 。 【输入形式】分别输入两组数据&#xff0c;两组数据以回车分隔&#xff1b;每组数据…...

编程日记 2024/3/4 21:55:59

【如何像网吧一样弄个游戏菜单在家里】

GGmenu 个人家庭版游戏、应用管理 桌面图标管理器...

编程日记 2024/3/4 21:53:57

CSS~~

CSS是一门语言&#xff0c;用于控制网页表现 CSS(Cascading Style Sheet):层叠样式表 W3C标准:网页主要由三部分组成 结构:HTML 表现: CSS 行为:JavaScript 1&#xff0c;CSS的导入方式 &#xff08;1&#xff09;内联样式 在标签内部使用style属性&#xff0c;属性值是cs…...

编程日记 2024/3/4 21:51:55

Docker技术概论（1）：Docker与虚拟化技术比较

Docker技术概论&#xff08;1&#xff09; Docker与虚拟化技术比较 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https:…...

编程日记 2024/3/4 21:46:48

alibabacloud学习笔记07（小滴课堂）

讲解Sentinel自定义异常降级-新旧版本差异 讲解新版Sentinel自定义异常数据开发实战 如果我们都使用原生的报错&#xff0c;我们就无法得到具体的报错信息。 所以我们要自定义异常返回的数据提示&#xff1a; 实现BlockExceptionHandler并且重写handle方法&#xff1a; 使用F…...

编程日记 2024/3/4 21:44:46

Ansible-Playbook

目录 1、概念介绍 roles 角色 playbook 核心元素 ansible-playbook 命令 playbook 简单案例 2、Ansible 变量 自定义变量 facts 变量 Palybook 部署 LAMP ansible 端安装 LAMP playbook 系统环境脚本 构建 httpd 任务 构建 mariadb 任务 构建 php 任务 编写整个任务…...

编程日记 2024/3/4 21:43:45

UE5常见问题处理笔记

一、C工程中的文件出现很多头文件找不到&#xff0c;比如&#xff1a;#include CoreMinimal.h文件提示找不到。 解决方法&#xff1a;在UE编辑器中选择菜单Tools -> Refresh Visual Studio Project。 二、莫名其妙的编译错误。 解决方法&#xff0c;找到工程根目录下的Bi…...

编程日记 2024/3/4 21:42:44

docker中hyperf项目配置虚拟域名

在学习hyperf框架时遇到一些问题&#xff0c;这里是直接用了docker环境 下载镜像运行容器 docker run --name hyperf -v /data/project:/data/project -p 9501:9501 -itd -w /data/project --privileged -u root --entrypoint /bin/sh 镜像ID配置docker-compose.yml version…...

编程日记 2024/3/4 21:40:42

PID闭环控制算法的学习与简单使用

平台&#xff1a;matlab2021b&#xff0c;Vivado2018 应用场景和理解 一个早餐店&#xff0c;假如一天都有生意&#xff0c;生意有的时间很火爆&#xff0c;有时候又一般&#xff0c;老板又是个实在人&#xff0c;只知道在后厨蒸包子。由于包子蒸熟需要一定的时间&#xff0c;老…...

编程日记 2024/3/4 21:38:39

【无刷电机学习】光耦HCNR200基本原理及应用（资料摘抄）

【仅作自学记录&#xff0c;不出于任何商业目的。如有侵权&#xff0c;请联系删除&#xff0c;谢谢&#xff01;】 本文摘抄翻译自&#xff1a; https://docs.broadcom.com/wcs-public/products/application-notes/application-note/331/6/av02-1333en-an_5394-16jul10.pdfhtt…...

编程日记 2024/3/4 21:34:35

【LeetCode】1768_交替合并字符串_C

题目描述 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 https://leetcode.cn/problems/merge-strings-al…...

编程日记 2024/3/4 21:33:34

C#解析JSON

https://blog.csdn.net/weixin_43046974/article/details/131449900 C#解析JSON 1. JSON定义2. JSON一般构成及解析方法3. 解析举例子 1. JSON对象解析&#xff0c;只包含一层对象{}2. 嵌套JSON对象解析&#xff0c;包含多层对象{}3. JSON数组解析1&#xff08;数组循环遍历&…...

编程日记 2024/3/4 21:32:32

AI图像识别算法助力安全生产*提升风险监测效率---豌豆云

2024年开年来安全生产事故频发&#xff0c;工厂爆炸、工程坍陷等重大安全生产事故的发生再次为我们敲响了警钟。 安全生产是企业发展的生命线&#xff0c;而传统的安全监测手段存在盲区和延迟&#xff0c;难以及时发现和应对潜在风险。 AI图像识别算法通过利用先进的计算机视…...

编程日记 2024/3/4 21:30:30

CSS技巧：实现两个div在同一行显示的方法

css如何让两个div在同一行显示 - web开发 - 亿速云 在Web开发中&#xff0c;经常遇到需要将多个元素水平排列在同一行的情况。其中一个常见的需求是将两个div元素放置在同一行上&#xff0c;使它们并排显示。在本文中&#xff0c;我们将介绍几种实现这一效果的CSS方法。 1. 使…...

编程日记 2024/3/4 21:29:29

【Unity】Node.js安装与配置环境

引言 我们在使用unity开发的时候&#xff0c;有时候会使用一些辅助工具。 Node.js就是开发中&#xff0c;经常会遇到的一款软件。 1.下载Node.js 下载地址&#xff1a;https://nodejs.org/en 2.安装Node.js ①点击直接点击Next下一步 ②把协议勾上&#xff0c;继续点击…...

编程日记 2024/3/4 21:26:26

Vue3：使用 Composition API 不需要 Pinia

在 Vue.js 开发的动态环境中&#xff0c;在单个组件中处理复杂的业务逻辑可能会导致笨重的文件和维护噩梦。虽然 Pinia 提供集中式状态管理&#xff0c;但仅依赖它来处理复杂的业务逻辑可能会导致代码混乱。本文探讨了使用 Composition API 的替代方法&#xff0c;说明开发人员…...

编程日记 2024/3/4 21:21:21

ExoPlayer 播放视频黑屏的解决方法

最近项目中在使用 ExoPlayer 来进行视频的播放&#xff0c;开发过程中遇到了部分视频打开后黑屏的问题&#xff0c;报错日志如下。 E Audio codec error android.media.MediaCodec$CodecException: Error 0xe E Playback error androidx.media3.exoplayer.ExoPlaybackExcept…...

编程日记 2024/3/4 21:20:21

有能力的已经在投了：这一批AI公司，正在悄悄招人

导读很多人还在盯着互联网大厂&#xff0c;反复刷岗位、反复改简历。但另一批人&#xff0c;已经把简历投向了另一条线——人工智能公司、机器人公司、智能制造公司。这些公司有一个共同点&#xff1a;岗位不多&#xff0c;但含金量极高要求更高&#xff0c;但成长速度更快很多…...

编程新知 2026/4/7 3:51:24

从乐高到变速箱：用一个完整案例，带你吃透SolidWorks自顶向下设计

从乐高到变速箱&#xff1a;用一个完整案例&#xff0c;带你吃透SolidWorks自顶向下设计 1. 为什么自顶向下设计是机械工程师的必修课 第一次用SolidWorks完成齿轮箱设计时&#xff0c;我犯了个典型错误——先画好所有齿轮和轴&#xff0c;最后才考虑箱体结构。结果发现轴承座位…...

编程新知 2026/4/7 2:21:21

Go Context 控制流与生命周期管理

Go Context 控制流与生命周期管理 在现代分布式系统中&#xff0c;控制流与生命周期管理是开发者必须面对的核心挑战之一。Go语言通过context包提供了一种优雅的解决方案&#xff0c;帮助开发者管理请求的取消、超时和跨协程的数据传递。无论是微服务调用、数据库查询还是HTTP…...

编程新知 2026/4/7 1:23:59

Sanitizer工具集：高效检测内存与线程问题的实战指南

1. Sanitizer工具集概述Sanitizer是由Google发起的一套开源运行时检测工具集&#xff0c;专门用于帮助开发者发现程序中的各类隐藏缺陷。作为一名嵌入式开发者&#xff0c;我深刻体会到调试内存泄漏、线程竞争等问题时的痛苦。传统的调试手段往往需要耗费大量时间在复现和定位问…...

编程新知 2026/4/7 0:29:30

[具身智能-236]：OpenCV ROI：Region of Interest（感兴趣区域）

在 OpenCV 中&#xff0c;ROI 是 Region of Interest&#xff08;感兴趣区域&#xff09;的缩写。简单来说&#xff0c;ROI 就是从图像中切出来的“一块”。在处理图像时&#xff0c;我们往往不需要处理整张图片&#xff08;比如处理人脸时不需要管背景里的树&#xff09;&…...

编程新知 2026/4/7 0:01:21

AtCoder Beginner Contest 433

AtCoder Beginner Contest 433 ABCD https://www.bilibili.com/video/BV1srUTBEEfa/ AtCoder Beginner Contest 433 https://www.bilibili.com/video/BV14xUWBYELd/ https://blog.csdn.net/2503_93669452/article/details/155140717 【实况】AtCoder Beginner Contest 433&…...

编程新知 2026/4/6 23:42:40

回溯算法双杀：子集 + 电话号码的字母组合 | 经典模板题解析

目录 一、LeetCode 78&#xff1a;子集 题目描述 核心思路&#xff08;回溯法&#xff09; 完整代码 关键解析 二、LeetCode 17&#xff1a;电话号码的字母组合 题目描述 核心思路&#xff08;回溯法&#xff09; 完整代码 关键解析 三、两道题核心对比 总结 一、L…...

编程新知 2026/4/6 23:22:27

星穹铁道自动化终极指南：三月七小助手让你的游戏时间翻倍

星穹铁道自动化终极指南&#xff1a;三月七小助手让你的游戏时间翻倍 【免费下载链接】March7thAssistant 崩坏&#xff1a;星穹铁道全自动 三月七小助手 项目地址: https://gitcode.com/gh_mirrors/ma/March7thAssistant 在《崩坏&#xff1a;星穹铁道》这款深受玩家喜…...

编程新知 2026/4/6 23:05:50

从春招到Offer：一位应届生的多益网络软件开发求职全记录

1. 春招末班车&#xff1a;从"破罐破摔"到投出第一份简历 五月的广州已经热得让人喘不过气&#xff0c;我的求职焦虑却比天气更让人窒息。看着身边同学一个个晒出offer&#xff0c;我才惊觉自己错过了整个金三银四。毕设和论文像两座大山&#xff0c;把求职计划硬生生…...

编程新知 2026/4/6 22:49:43

统一电能质量变换器（UPQC）Matlab/simulink仿真，ip-iq检测，电压电流补偿

统一电能质量变换器&#xff08;UPQC&#xff09;Matlab/simulink仿真&#xff0c;ip-iq检测&#xff0c;电压电流补偿&#xff0c;软件版本matlab2016最近在实验室折腾统一电能质量变换器&#xff08;UPQC&#xff09;的仿真&#xff0c;发现Matlab2016的Simulink真是个好东西…...

编程新知 2026/4/6 22:45:33