多个地区地图可视化

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. 效果图

在这里插入图片描述

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

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

相关文章

【CSP试题回顾】201409-1-相邻数对

CSP-201409-1-相邻数对 解题代码 #include <iostream> #include <vector> using namespace std;vector<int>arr; int num;int main() {ios_base::sync_with_stdio(false);cin.tie(0);cout.tie(0);int n;cin >> n;for (int i 0; i < n; i){int t;…

设计模式总结(三)

上一篇总结了设计模式的创建型模式&#xff0c; 接下来总结一下设计模式的几种结构型模式。 1. 适配器模式 适配器模式允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式通常用于以下情况&#xff1a; 当你需要使用一个已经存在的类&#xff0c;但是它的接口与你…

不愧是华为出来的,太厉害了...

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 实习去了博彦科技&#xff08;外包&#xff09;&#xff0c;做的…

设计模式笔记——建造者模式

设计模式&#xff08;创建型&#xff09;—— 建造者模式 这是一个学生类&#xff0c;它有四个属性&#xff0c;通过构造方法创建它的对象&#xff0c;我们需要填入四个参数&#xff0c;这就导致创建对象的代码有点长&#xff08;如果他有更多属性时&#xff0c;那会更加恐怖&…

赋能中国制造,大道云行发布智能制造分布式存储解决方案

《中国制造2025》指出&#xff0c;“制造业是国民经济的主体&#xff0c;是立国之本、兴国之器、强国之基。” 智能制造引领产业提质增效 智能制造是一种利用先进的信息技术、自动化技术和智能技术来优化和升级制造业生产过程的方法。它将人工智能、大数据、物联网、机器学习等…

算法竞赛STL:map的使用方法

算法竞赛STL&#xff1a;map的使用方法 map 容器描述&#xff1a; map是一种关联容器&#xff0c;它存储的元素是键值对&#xff0c;键和值可以是任意类型。map内部的元素按照键的顺序进行排序&#xff0c;排序的规则由比较函数决定。 使用方法&#xff1a; 首先&#xff0c…

【扩散模型系列2】DiT 《Scalable Diffusion Models with Transformers》论文阅读

文章目录 摘要1. 前言2. 相关工作TransformersDDPMs架构复杂度 3. 扩散Transformer3.1 准备知识扩散公式Classifier-free GuidanceLDMs 3.2. Diffusion Transformer Design SpacePatch化DiT模块设计模型大小Transformer Decoder 4. 实验设置训练扩散评估指标计算 5. 实验DiT bl…

【前端】登陆页面:记住密码、设置cookie、加密

将保存在cookie中的密码自动填入表单&#xff1a;库js-cookie // login.vue getCookie() {const username Cookies.get("username");const password Cookies.get("password");const rememberMe Cookies.get(rememberMe)this.loginForm {username: use…

Material UI 5 学习01-按钮组件

Material UI 5 学习01-按钮组件 一、安装Material UI二、 组件1、Button组件1、基础按钮2、variant属性3、禁用按钮4、可跳转的按钮5、disableElevation属性6、按钮的点击事件onClick 2、Button按钮的颜色和尺寸1、Button按钮的颜色2、按钮自定义颜色3、Button按钮的尺寸 3、图…

MacOS包管理工具homebrew使用教程

MacOS包管理工具homebrew使用教程 1.概述与安装2.基本使用3.其他常用命令 1.概述与安装 homebrew是Mac OS X上的强大的包管理工具&#xff0c;可以高效管理各种软件包 安装&#xff1a; 1、安装xcode&#xff1a; xcode-select --install2、一行命令下载&#xff1a; /bin…

DreamTalk:单张图像即可生成逼真人物说话头像动画,助力AI数字人落地

“DreamTalk: When Expressive Talking Head Generation Meets Diffusion Probabilistic Models” DreamTalk是一个基于扩散的音频驱动的富有表现力的说话头生成框架&#xff0c;可以生成不同说话风格的高质量的说话头视频。DreamTalk对各种输入表现出强大的性能&#xff0c;包…

Thingsboard本地源码部署教程

本章将介绍ThingsBoard的本地环境搭建&#xff0c;以及源码的编译安装。本机环境&#xff1a;jdk11、maven 3.6.2、node v12.18.2、idea 2023.1、redis 6.2 环境安装 开发环境要求&#xff1a; Jdk 11 版本 &#xff1b;Postgresql 9 以上&#xff1b;Maven 3.6 以上&#xf…

vue实现循环滚动列表

本文章使用 vue-seamless-scroll 为大家分享了vue实现循环滚动列表的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下&#xff1a; vue实现循环滚动列表 1.安装插件 vue-seamless-scroll vue-seamless-scroll 实例文档 npm install vue-seamless-scroll --save 2.HTM…

代码随想录算法训练营Day50 | 123.买卖股票的最佳时机 III、188.买卖股票的最佳时机 IV

123.买卖股票的最佳时机 III 思路与 121.买卖股票I 一脉相承&#xff0c;一次买卖有2种状态&#xff08;持有/不持有&#xff09;&#xff0c;那么两次买卖就有4种状态&#xff08;第一次持有/不持有、第二次持有/不持有&#xff09; 1、DP数组定义&#xff1a; dp[i][j]为当前…

【Java】Base理论的核心思想和理论三要素

目录 简介 BASE 理论的核心思想 BASE 理论三要素 1. 基本可用 2. 软状态 3. 最终一致性 总结 简介 BASE 是 Basically Available&#xff08;基本可用&#xff09; 、Soft-state&#xff08;软状态&#xff09; 和 Eventually Consistent&#xff08;最终一致性&#xf…

深度强化学习系列【2】- 贝尔曼方程和马尔可夫决策过程

引言: 一直想做点强化学习相关的内容,但是对于其原理一直不是太明了,相比于编程实现,懂得算法部分的机理与理论也是至关重要的。网上找的一些资料都在强调贝尔曼方程和马尔可夫决策过程在强化学习中的作用,但是介绍都不够充分。 另外,在知乎【1】上看到一个说法,说 强化学…

财报解读:基本盘稳定后,联想如何进一步抢占AI时代?

从2021年下半年开始&#xff0c;受诸多因素影响&#xff0c;消费电子行业始终处在承压状态&#xff0c;“不景气”这一关键词屡次被市场提及。 但寒气没有持续&#xff0c;可以看到&#xff0c;消费电子行业正在逐渐回暖。国金证券在今年1月的研报中就指出&#xff0c;从多方面…

【简单模拟】第十一届蓝桥杯省赛第二场C++ B组 / C组《成绩统计》(c++)

1.题目说明 小蓝给学生们组织了一场考试&#xff0c;卷面总分为100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 如果得分至少是 60 分&#xff0c;则称为及格。 如果得分至少为 85 分&#xff0c;则称为优秀。 请计算及格率和优秀率&#xff0c;用百分数表示…

#WEB前端(CCS常用属性,补充span、div)

1.实验&#xff1a; 复合元素、行内元素、块内元素、行内块元素 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; span为行内元素&#xff1a;不可设置宽高&#xff0c;实际占用控件决定分布空间。 div为块内元素&#xff1a;占满整行&#xff0c;可以设置宽高 img为行内块元…

Unity(第二十三部)导航

你可以使用 unity官方提供的 unity导航组件或第三方 unity导航组件&#xff0c;以实现游戏中角色或其他物体的导航。 unity导航组件通常具有多种导航模式&#xff0c;如飞行模式、步行模式、车辆模式等&#xff0c;可以根据不同的需求选择合适的模式。同时&#xff0c;unity导…