基于Echarts2.X的地图数据可视化指南

目录

前言

 一、关于Echarts版本

1、为什么用Echarts2.2.7

2、文件目录说明

二、地图数据可视化

1、新建map.html

2、Echarts图表初始化

3、参数设置

 三、源码展示分析

1、初始化阶段

 2、timelineOption.js模拟数据

总结

前言

        在前面的博文（数据会说话-从我国的收入及消费支出看存款难度）中，我们对2021年的居民可支配收入和消费支出数据进行了表格的展示。在原文中，使用表格展示的方式对数据进行了展示，虽然满足了展示的需求，但是在宏观上，从地理角度对数据进行时空分布没有直观的展示。如何在不采用GIS软件进行空间展示的前提下进行数据展示（毕竟大家对gis还不是人尽皆知）。

        熟悉Echarts的小伙伴一定知道，Echarts现在是Apache的一个前端项目，是百度贡献给Apache的一款前端报表工具，基于Echarts可以基于坐标的图表（如地图、散点图）通过色彩变化表现数值的大小能直观形象的展示数据分布。但如何聚焦到我所关心的数值上？ECharts拥有值域漫游的功能，让你可以轻松进行数值筛选。

        本文将基于Echarts2.2.7版本，重点讲解如何使用Html5和JavaScript进行Echarts地图开发，同时在地图上集成时间轴和数值展示，最后提供一个极简的集成实例，通过实例运行掌握实际开发。 

 一、关于Echarts版本

1、为什么用Echarts2.2.7

        是的，您没有看错，这里采用的2.2.7的版本，社区最新的版本应该是5.4.x，确实不是现在最新的版本，请原谅没有跟上最新的步伐。如果看过最新版本的话，应该了解，Echarts在升级过程中，由于一些问题，将地图的默认实现移除了。需要自己去注册地图数据后才能用，后期可以写一篇如何最新版本的Echarts中进行离线地图报表开发（CSDN也有一些博主进行了新版的地图开发尝鲜，也分享了一些开发心得和经验）。博客中采用的2.2.7的版本是包含了map地图组件的，这是一个极简的包，只需要引入两个js（其中一个是数据模拟js）就可以进行地图展示，方便展示。虽然新版本移除了基础依赖，但基础的配置如参数等变化不大，因此掌握了这个老版本的参数和操作方法，对于新的api的升级也会得心应手。

2、文件目录说明

        这里实例的文件是最少的，极简版的由来。必要的文件只有一个html文件和一个js，另一个js文件是数据模拟js。

文件名说明
map.html主文件
lib/echarts-all.jsecharts集成版js
lib/timelineOption.js数据模拟js包

二、地图数据可视化

1、新建map.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts2.2.7地图展示例子</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100%;height:600px;float:left;"></div>
    <!-- ECharts单文件引入 -->
    <script src="lib/echarts-all.js"></script>
	<script src="lib/timelineOption.js"></script>
</body>

        在上面的代码中，引入了echarts-all.js文件和timelineOption.js文件。echarts-all.js是必须引入的资源。在实际开发中，数据后台返回的，因此timelineOption.js是非必须的，通过接口获取相应数据。在页面上设置一个id为“main”的div，同时设置了它的高度和宽度。

2、Echarts图表初始化

// 基于准备好的dom，初始化echarts图表
 var myChart = echarts.init(document.getElementById('main'));

        这里将采用echarts的init方法对dom元素进行初始化，后续就会采用myChart进行参数的设置和事件的绑定。

option = {
			timeline:{
				data:[
					'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01',
					'2007-01-01','2008-01-01','2009-01-01','2010-01-01','2011-01-01'
				],
				label : {
					formatter : function(s) {
						return s.slice(0, 4);
					}
				},
				autoPlay : true,//是否自动播放
				playInterval : 1000
			},
			options:[
				{
					title : {
						'text':'2002全国宏观经济指标',
						'subtext':'数据来自国家统计局(模拟)'
					},
					tooltip : {'trigger':'item'},
					toolbox : {
						'show':true, 
						orient : 'vertical',
						x: 'right',
						y: 'center',
						'feature':{
							'mark':{'show':true},
							'dataView':{'show':true,'readOnly':false},
							'restore':{'show':true},
							'saveAsImage':{'show':true}
						}
					},
					roamController: {
						show: true,
						x: 'right',
						mapTypeControl: {
							'china': true
						}
					},
					dataRange: {
						min: 0,
						max : 53000,
						text:['高','低'],// 文本，默认为数值文本
						calculable : true,
						x: 'left',
						color: ['orangered','yellow','lightskyblue']
					},
					series : [
						{
							'name':'GDP',
							'type':'map',
							mapType: 'china',
							roam: false,
							itemStyle:{
								normal:{label:{show:true}},
								emphasis:{label:{show:true}}
							},
							'data': dataMap.dataGDP['2002']
						}
					]
				},
				{
					title : {'text':'2003全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2003']}
					]
				},
				{
					title : {'text':'2004全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2004']}
					]
				},
				{
					title : {'text':'2005全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2005']}
					]
				},
				{
					title : {'text':'2006全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2006']}
					]
				},
				{
					title : {'text':'2007全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2007']}
					]
				},
				{
					title : {'text':'2008全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2008']}
					]
				},
				{
					title : {'text':'2009全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2009']}
					]
				},
				{
					title : {'text':'2010全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2010']}
					]
				},
				{
					title : {'text':'2011全国宏观经济指标'},
					series : [
						{'data': dataMap.dataGDP['2011']}
					]
				}
			]
		};

3、参数设置

        在上述的代码中，对地图的信息进行了准确的定义，比如坐标系的定义，时间轴的定义。这些可以在官方的API中进行查找，在此不再赘述。参数和图表绑定的代码如下：

// 为echarts对象加载数据 
myChart.setOption(option);

        经过上述设置就可以进行地图的绑定和显示，先来看一下效果

 三、源码展示分析

1、初始化阶段

         在初始化阶段，我们可以看到Echarts对象的主要参数信息，包括当前版本、依赖、初始化方法和工具类。

 2、timelineOption.js模拟数据

var dataMap = {};
function dataFormatter(obj) {
    var pList = ['北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江','上海','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','广西','海南','重庆','四川','贵州','云南','西藏','陕西','甘肃','青海','宁夏','新疆'];
    var temp;
    var max = 0;
    for (var year = 2002; year <= 2011; year++) {
        temp = obj[year];
        for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            obj[year][i] = {
                name : pList[i],
                value : temp[i]
            }
        }
        obj[year+'max'] = Math.floor(max/100) * 100;
    }
    return obj;
}

function dataMix(list) {
    var mixData = {};
    for (var i = 0, l = list.length; i < l; i++) {
        for (var key in list[i]) {
            if (list[i][key] instanceof Array) {
                mixData[key] = mixData[key] || [];
                for (var j = 0, k = list[i][key].length; j < k; j++) {
                    mixData[key][j] = mixData[key][j] 
                                      || {name : list[i][key][j].name, value : []};
                    mixData[key][j].value.push(list[i][key][j].value);
                }
            }
        }
    }
    return mixData;
}

dataMap.dataGDP = dataFormatter({
    //max : 60000,
    2011:[16251.93,11307.28,...],
    2010:[14113.58,9224.46,...],
    2009:[12153.03,7521.85,...],
    2008:[11115,6719.01,...],
    2007:[9846.81,5252.76,...],
    2006:[8117.78,4462.74,...],
    2005:[6969.52,3905.64,...],
    2004:[6033.21,3110.97,...],
    2003:[5007.21,2578.03,...],
    2002:[4315,2150.76,...]
});

dataMap.dataGDP_Estate = dataMix([dataMap.dataEstate, dataMap.dataGDP]);

        上面是一个模拟的数据例子，实际开发的时候不需要，直接从后台获取数据后进行展示即可。上面的示例数据需要自行扩展。

总结

        以上就是本文的主要内容，本文将基于Echarts2.2.7版本，重点讲解如何使用Html5和JavaScript进行Echarts地图开发，同时在地图上集成时间轴和数值展示，最后提供一个极简的集成实例，通过实例运行掌握实际开发，通过Echarts的地图组件来完成数据的地理可视化，文章行文仓促，如有不当之处，敬请批评指正。 

        传送门：基于Echarts2.2.7的带时间轴地图展示源代码

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C国演义 [第七章]

C国演义 [第七章]

第七章 最长重复子数组题目理解步骤dp含义递推公式初始化为啥dp数组如此奇怪 遍历顺序 代码 最长公共子序列题目理解步骤dp含义递推公式初始化遍历顺序 代码 总结 最长重复子数组 力扣链接 给两个整数数组 nums1 和 nums2 &#xff0c;返回 两个数组中 公共的 、长度最长的子…
阅读更多...
初识express/路由/中间件

初识express/路由/中间件

路由的概念 模块化路由 中间件(要有输入输出) 简化版本 全局生效中间件 局部生效中间件 注意事项 中间件分类 内置中间件,解析请求体/url-encoded 自定义中间件 使用querystring模块解析请求体数据 编写接口 ​​​​​​​
阅读更多...
希尔排序（C语言）

希尔排序（C语言）

希尔排序 一、希尔排序的原理二、动图演示三、代码实现四、实现从小到大排序五、希尔排序的优缺点 一、希尔排序的原理 希尔排序是插入排序的一种更高效的改进版本。 1.将原始待排数据按照设定的增量gap分成多组&#xff0c;每组有n / gap个元素。 2.对这些分组进行插入排序&a…
阅读更多...
单表-DQL

单表-DQL

注意&#xff1a;这张图还包含了对于的顺序&#xff0c;先分组再排序&#xff0c;再分页&#xff0c;顺序不能乱 基本查询 # 1.基本查询 # 查询全部行 select * from tb_emp; select id, user_name, password, name, gender, image, job, entry_date, create_time, update_ti…
阅读更多...
yarn与npm的区别（yarn的安装报错问题）

yarn与npm的区别（yarn的安装报错问题）

一、yarn 是什么&#xff0c;yarn 与 npm 的区别是什么&#xff1f; yarn 是一个软件包管理系统&#xff0c;Yarn 和 npm 都是包管理工具&#xff0c;用于管理用 JavaScript 编写的软件包&#xff0c;yarn的出现是为了弥补 npm的一些缺陷。yarn 与 npm 的区别 &#xff1a; 性能…
阅读更多...
MongoDB复制集原理

MongoDB复制集原理

复制集简介 Mongodb复制集由一组Mongod实例&#xff08;进程&#xff09;组成&#xff0c;包含一个Primary节点和多个Secondary节点&#xff0c;Mongodb Driver&#xff08;客户端&#xff09;的所有数据都写入Primary&#xff0c;Secondary从Primary同步写入的数据&#xff0…
阅读更多...
3.springboot开发篇

3.springboot开发篇

SpringBoot开发实用篇 ​ KF-1.热部署 热部署是不用重启项目&#xff0c;项目自动更新 非springboot项目热部署实现原理 ​ 开发非springboot项目时&#xff0c;我们要制作一个web工程并通过tomcat启动&#xff0c;通常需要先安装tomcat服务器到磁盘中&#xff0c;开发的程序…
阅读更多...
密码学证明方案寒武纪大爆发——扩容、透明性和隐私的变革潜力

密码学证明方案寒武纪大爆发——扩容、透明性和隐私的变革潜力

1. 引言 前序博客有&#xff1a; ZKP大爆炸 本文主要参考&#xff1a; StarkWare 2023年6月博客 Cambrian Explosion of Cryptographic Proofs----The transformative potential for scalability, transparency, and privacy2023年3月Eli Ben-Sasson在The 13th BIU Winter …
阅读更多...
vmware postgresql大杂烩

vmware postgresql大杂烩

Vmware 窗口过界&#xff1a; https://blog.csdn.net/u014139753/article/details/111603882 vmware, ubuntu 安装&#xff1a; https://zhuanlan.zhihu.com/p/141033713 https://blog.csdn.net/weixin_41805734/article/details/120698714 centos安装&#xff1a; https://w…
阅读更多...
形式化验证，QED: Quick Error Detection Tests for Effective Post-Silicon Validation（二）

形式化验证，QED: Quick Error Detection Tests for Effective Post-Silicon Validation（二）

目录 一、Article:文献出处&#xff08;方便再次搜索&#xff09; &#xff08;1&#xff09;作者 &#xff08;2&#xff09;文献题目 &#xff08;3&#xff09;文献时间 &#xff08;4&#xff09;引用 二、Data:文献数据&#xff08;总结归纳&#xff0c;方便理解&am…
阅读更多...
抖音短视频矩阵系统源码：技术开发与实践

抖音短视频矩阵系统源码：技术开发与实践

目录 一.短视频账号矩阵管理系统囊括的技术 1.开发必备的开发文档说明&#xff1a; 二.技术文档分享&#xff1a; 1.底层框架系统架构&#xff1a; 2.数据库接口设计 1.技术开发必备的开发文档说明&#xff1a; 1.1系统架构&#xff1a; 抖音SEO排名系统主要由以下几个模…
阅读更多...
Spring Boot 属性加载原理解析

Spring Boot 属性加载原理解析

基于Spring Boot 3.1.0 系列文章 Spring Boot 源码阅读初始化环境搭建Spring Boot 框架整体启动流程详解Spring Boot 系统初始化器详解Spring Boot 监听器详解Spring Boot banner详解Spring Boot 属性配置解析Spring Boot 属性加载原理解析 在《Spring Boot 框架整体启动流程详…
阅读更多...
【计算机视觉 | 图像分类】arxiv 计算机视觉关于图像分类的学术速递（6月 29 日论文合集）

【计算机视觉 | 图像分类】arxiv 计算机视觉关于图像分类的学术速递（6月 29 日论文合集）

文章目录 一、分类|识别相关(12篇)1.1 Pseudo-Bag Mixup Augmentation for Multiple Instance Learning Based Whole Slide Image Classification1.2 Improving Primate Sounds Classification using Binary Presorting for Deep Learning1.3 Challenges of Zero-Shot Recognit…
阅读更多...
阿里云docker启动xxljob，部署自己的定时任务

阿里云docker启动xxljob，部署自己的定时任务

本次安装版本xxl-job-admin:2.3.0 一&#xff1a;创建xxl-job数据库的各种表 作者官方地址 下载sql执行 二&#xff1a;docker拉取xxl-job镜像 docker pull xuxueli/xxl-job-admin:2.3.0 三&#xff1a;docker启动xxl-job服务 docker run -e PARAMS"--spring.datasour…
阅读更多...
Tensorflow神经网络模型-鲜花种类识别

Tensorflow神经网络模型-鲜花种类识别

必应壁纸供图 Tensorflow神经网络模型-鲜花种类识别 数据集&#xff1a;https://download.csdn.net/download/weixin_53742691/87982215 导入相关依赖 import warnings import re from IPython.display import clear_output, display from tkinter import Tk, filedialog fro…
阅读更多...
wampServer安装Redis 扩展

wampServer安装Redis 扩展

第一步&#xff1a;查看php版本信息 使用 phpinfo() 函数查看 PHP 的版本信息&#xff08;用于选择扩展包&#xff09; 版本信息&#xff1a;PHP版本为 8.0.26&#xff0c;编译器版本 Visual C 2019&#xff0c;CPU架构 x64 。 第二步&#xff1a;根据第一步信息的版本选择扩…
阅读更多...
基于树莓派4B的YOLOv5-Lite目标检测的移植与部署（含训练教程）

基于树莓派4B的YOLOv5-Lite目标检测的移植与部署（含训练教程）

前言&#xff1a;本文为手把手教学树莓派4B项目——YOLOv5-Lite目标检测&#xff0c;本次项目采用树莓派4B&#xff08;Cortex-A72&#xff09;作为核心 CPU 进行部署。该篇博客算是深度学习理论的初步实战&#xff0c;选择的网络模型为 YOLOv5 模型的变种 YOLOv5-Lite 模型。Y…
阅读更多...
【AI底层逻辑】——篇章3（上）：数据、信息与知识香农信息论信息熵

【AI底层逻辑】——篇章3（上）：数据、信息与知识香农信息论信息熵

目录 引入 一、数据、信息、知识 二、“用信息丈量世界” 1、香农信息三定律 2、一条信息的价值 3、信息的熵 总结 引入 AI是一种处理信息的模型&#xff0c;我们把信息当作一种内容的载体&#xff0c;计算机发明以前很少有人思考它的本质是什么。随着通信技术的发展&a…
阅读更多...
【ISO26262】汽车功能安全第3部分：概念阶段

【ISO26262】汽车功能安全第3部分：概念阶段

GB/T34590《道路车辆 功能安全》分为以下部分: 需要文档的朋友，可以和我联系！ tommi_wei@163.com GB/T34590的本部分规定了车辆在概念阶段的要求: ———相关项定义; ———安全生命周期启动; ———危害分析和风险评估;及 ———功能安全概念。 危害事件分类 对于每一个…
阅读更多...
wsl子系统Ubuntu18.04，cuDNN安装

wsl子系统Ubuntu18.04，cuDNN安装

如果觉得本篇文章对您的学习起到帮助作用&#xff0c;请 点赞 关注 评论 &#xff0c;留下您的足迹&#x1f4aa;&#x1f4aa;&#x1f4aa; 本文主要wls子系统Ubuntu18.04安装cuDNN&#xff0c;安装cudnn坑巨多&#xff0c;因此记录以备日后查看&#xff0c;同时&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023