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

多个地区地图可视化

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;对多个省份不断…...

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

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

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

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

单链表合并

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

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

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

CSS~~

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

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:…...

alibabacloud学习笔记07(小滴课堂)

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

Ansible-Playbook

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

UE5常见问题处理笔记

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

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…...

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

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

【无刷电机学习】光耦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…...

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

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

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;数组循环遍历&…...

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

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

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

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

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

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

Vue3:使用 Composition API 不需要 Pinia

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

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...