当前位置: 首页 > 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…...

硬核教程:用Gemini境像站构建端到端自动化办公工作流,告别重复操作(国内免费镜像实测)

在日常办公中&#xff0c;大量的重复性操作——数据录入、日报生成、文件归档——占据了相当比例的时间。将这些任务串联成自动化工作流&#xff0c;能显著提升效率。目前国内用户无需特殊网络环境&#xff0c;通过聚合镜像站 RskAi&#xff08;ai.jingxiang.me&#xff09; 即…...

神经网络幻觉的本质与四层防御实战指南

1. 这不是“胡说八道”&#xff0c;是模型在用概率拼图——神经网络幻觉的本质与真实战场 “神经网络会幻觉”这个说法&#xff0c;这几年在技术社区、媒体标题甚至投资人会议里出现的频率&#xff0c;已经快赶上“算力瓶颈”和“数据飞轮”了。但绝大多数人听到这个词的第一反…...

告别手动抓瞎:用vmp3-import-fix-x86和Universal Import Fixer搞定VMP3.5壳的IAT修复

VMP3.5壳IAT修复的高效工具链实践指南 逆向工程领域里&#xff0c;VMProtect始终是令人又爱又恨的存在。特别是3.5版本引入的IAT混淆机制&#xff0c;让不少安全研究员在深夜调试时抓狂。传统手动修复不仅耗时耗力&#xff0c;还容易遗漏关键调用。经过多次实战验证&#xff0…...

Monocle性能监控与优化:确保高并发访问的稳定性

Monocle性能监控与优化&#xff1a;确保高并发访问的稳定性 【免费下载链接】monocle Link and news sharing 项目地址: https://gitcode.com/gh_mirrors/mon/monocle Monocle作为一个链接和新闻分享平台&#xff0c;在面对高并发访问时的稳定性至关重要。本文将分享一些…...

老板惊呆了!Laravel 接入 OnlyOffice 后,团队协作效率翻 3 倍(附安全加固方案)

文章目录老板惊呆了&#xff01;Laravel 接入 OnlyOffice 后&#xff0c;团队协作效率翻 3 倍&#xff08;附安全加固方案&#xff09;一、整体架构二、准备工作&#xff1a;OnlyOffice 服务&#xff08;Docker 版&#xff09;三、Laravel 后端集成1. 安装必要依赖2. 配置 Only…...

Hermes Agent对接Taotoken自定义Provider的配置要点详解

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Hermes Agent对接Taotoken自定义Provider的配置要点详解 1. 理解对接的基本前提 Hermes Agent是一个支持多种大模型提供方的开发工…...

稀疏优化与Dykstra算法在模型压缩中的应用

1. 稀疏优化技术概述稀疏优化是现代机器学习模型压缩与加速的核心技术之一&#xff0c;其本质是通过数学方法减少模型参数数量&#xff0c;同时尽可能保持模型性能。在深度学习模型规模不断膨胀的今天&#xff0c;稀疏优化已成为解决"模型肥胖症"的关键手段。1.1 稀疏…...

GitHub Copilot 下月改按量计费,我算了一周的 token 账单

微软上个月官宣&#xff1a;6月1日起&#xff0c;GitHub Copilot 全部计划转向按量计费&#xff08;usage-based pricing&#xff09;。原来每月19美元的订阅费变成19美元的token额度&#xff0c;用完就得充。 我用了一周时间&#xff0c;把自己日常开发中 Copilot、Claude Cod…...

数字孪生赋能设备预测性维护:构建工业设备全生命周期智能运维新模式

在智能制造加速推进的今天&#xff0c;工业设备作为生产体系的核心资产&#xff0c;其稳定运行直接决定着企业的生产效率、产品质量与经济效益。但据行业统计&#xff0c;全球制造业每年因设备非计划停机造成的损失超过 5000 亿美元&#xff0c;单台关键设备每分钟停机损失可达…...

智能电表:解锁智能照明精细化能耗管控新密码

摘要随着双碳政策深度落地与智慧楼宇数字化升级&#xff0c;智能照明已成为商业园区、市政道路、综合体的标配设施。传统机械式电表仅具备基础电量统计功能&#xff0c;存在数据滞后、精度不足、无分区计量、无异常监测等短板&#xff0c;无法适配现代照明多回路、多场景、长时…...