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

news2024/12/28 4:31:43

目录

前言

 一、关于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的带时间轴地图展示源代码

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

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

相关文章

ebpf执行报错no BTF found for kernel

一、现象描述 采用cilium epbf框架开发的ebpf程序无法在系统上正常运行。 curtiscurtis-desktop:~$ cd work/ curtiscurtis-desktop:~/work$ ls kmodule vfs_write_moitor curtiscurtis-desktop:~/work$ curtiscurtis-desktop:~/work$ sudo ./vfs_write_moitor -filename/mn…

第九十天学习记录:C++核心:函数提高

函数默认参数 在C中&#xff0c;函数的形参列表中的形参是可以有默认值的。 语法&#xff1a;返回值类型 函数名 &#xff08;参数默认值&#xff09;&#xff5b;&#xff5d; 问&#xff1a;C语言可以在函数的形参赋默认值吗&#xff1f; 答&#xff1a; 在C语言中&#xf…

Unity 之 抖音小游戏本地数据最新存储方法分享

Unity 之 抖音小游戏本地数据最新存储方法分享 一、抖音小游戏文件存储系统背景二、文件存储系统的使用方法2.1 初始化2.1 创建目录2.3 存储数据2.4 删除目录/文件2.5 其他相关操作 三&#xff0c;小结 抖音小游戏是一种基于抖音平台开发的小型游戏&#xff0c;与传统的 APP 不…

Java POI (2)—— Excel文件的上传与导出(实例演示)

一、单文件的上传功能 这里是一个demo的流程图&#xff0c;下面按照这个流程图做了一个简单的实现&#xff0c;有部分判断没有加上&#xff0c;实际操作中&#xff0c;可以根据自己的需求进行增加或者修改。并且此处还是在接受文件传入后将文件进行了下载&#xff0c;保存到本地…

哪个爬虫库用的最多?

在Python中&#xff0c;最常用的爬虫库是requests和BeautifulSoup。requests库用于发送HTTP请求和处理响应&#xff0c;而BeautifulSoup库用于解析HTML文档。这两个库通常结合使用&#xff0c;用于爬取网页内容并提取所需的数据。其他常用的爬虫库还包括Scrapy、Selenium等。 常…

我的创作纪念日(256)

目录 机缘 收获 日常 成就 憧憬 机缘 要说为什么我会选择IT这条路&#xff0c;我觉得是因为从小对电脑的兴趣&#xff0c;从小学2年级开始的电脑生涯&#xff0c;但是那时候也只是玩电脑游戏&#xff0c;而由于我接触电脑较早的缘故&#xff0c;开始有许多的朋友遇到问题…

vue+heatmapjs-vue实现热力图,点击/滑动可以监听并更新

实现效果如下&#xff1a; 点击的次数或者滑动越多&#xff0c;区域的颜色越深 1.下载最新版热力图插件 npm install heatmapjs-vue 2.main.js中全局引用 注意&#xff01;&#xff01;&#xff01;只能全局引用&#xff0c;不能局部引用&#xff0c;局部引用就报错显示不出…

「2024」预备研究生mem-形式逻辑强化:入选名额

一、入选名额 从后往前推 二、课后题

第3章-数组

1. 数组的概述 数组(Array)&#xff0c; 是多个相同类型数据按一定顺序排列 的集合&#xff0c; 并使用一个名字命名&#xff0c; 并通过编号的方式 对这些数据进行统一管理数组的常见概念 数组名下标(或索引)元素数组的长度 数组本身是引用数据类型&#xff0c; 而数组中的元…

spring boot admin服务监控报错

使用spring boot admin监控服务启动出现报错&#xff1a;adminHandlerMapping对象创建失败 org.springframework.beans.factory.BeanCreationException: Error creating bean with name adminHandlerMappingdefined in class path resource [de/codecentric/boot/admin/server…

C++Qt 入门

目录 Qt 是什么 Qt 与 Qt Creator 的关系 暗黑主题音乐播放器界面 UI 设计。 简约的视频界面设计。 炫酷车载音乐 APP 主界面开发。 Qt/C与 QML 如何选择 Qt 版本 Linux 下安装 Qt 配置中文输入法 Qt Creator 简单使用 第一个 Qt 程序 新建一个项目 ​编辑 项目文…

Java JDBC

目录 JDBC定义 为什么需要JDBC JDBC的工作原理 JDBC API JDBC编程模板 JDBC编程步骤 JDBC实战 1.JDBC定义 Java连接数据库的一种能力或是技术 2.为什么需要JDBC 总结&#xff1a;利用JDBC才可以使服务器端和数据库进行数据的传递和交互 场景1&#xff1a; 客户端&am…

chatgpt赋能python:Python选择排序算法图解

Python选择排序算法图解 选择排序是计算机科学中经典的排序算法之一&#xff0c;它的原理是从待排序的数据中选择最小的元素然后排在最前面&#xff0c;接着从剩下未排序的数据中继续这个过程&#xff0c;直到所有的数据都排好序。 在本篇文章中&#xff0c;我将深入探讨Pyth…

微服务架构之网关详解

前言 由于互联网的高速发展&#xff0c;网络数据请求数激增&#xff0c;使得服务器承受的压力越来越大。在早期的系统架构中&#xff0c;为减轻单台服务器的压力&#xff0c;通常使用 Load Balancer 来将网络流量平摊到多个服务器中。如今后端服务的种类和数量在不断变多&…

Django DRF - 【Token】认证基本使用

一. 前言 Django Rest Framework Token是Django Rest Framework中的一个扩展&#xff0c;用于实现用户认证和授权。它为每个用户生成一个唯一的Token&#xff0c;并将其存储在数据库中。在用户进行API请求时&#xff0c;用户需要在请求的HTTP Header中包含Token&#xff0c;这…

【广州华锐互动】机械设备事故VR模拟体验系统

随着虚拟现实技术的不断发展&#xff0c;越来越多的行业开始尝试将VR技术应用到实际场景中&#xff0c;以提供更加真实的体验。其中&#xff0c;机械伤害事故VR警示教育系统的出现&#xff0c;为机械工程师、安全培训人员等行业提供了一种全新的培训方式。在实现上&#xff0c;…

odoo16 中ondelete的用法

odoo 中的many2one类型字段有 ondelete设置&#xff0c;对应数据表中关系处理 a fields.Many2one(‘b’, string‘b’, ondelete‘set null’) 则当对模型b进行delete操作时&#xff0c;会引发如下操作 set null: 当b中删除记录时&#xff0c;modelA中相关记录的anull casc…

Redis实战案例8-缓存击穿及其解决方案和案例说明

1. 缓存击穿 缓存击穿是指一个被频繁访问&#xff08;高并发访问并且缓存重建业务较复杂&#xff09;的缓存键因为过期失效&#xff0c;同时又有大量并发请求访问此键&#xff0c;导致请求直接落到数据库或后端服务上&#xff0c;增加了系统的负载并可能导致系统崩溃 常见的解决…

开源虚拟化工具VirtualBox安装部署

什么是Virtualbox VirtualBox是一款由Oracle开发和维护的免费开源虚拟化软件&#xff0c;用于在一台计算机上创建和管理多个虚拟机。它允许用户在单个物理计算机上运行多个操作系统&#xff0c;例如Windows、Linux、macOS等。VirtualBox提供了一个虚拟化环境&#xff0c;使用户…

详细介绍如何使用 OpenCV 实现自动文档扫描仪--附实现源码

文末附相关源代码实现的免费下载链接 文档扫描是将物理文档转换为数字形式的过程。可以通过扫描仪或手机摄像头拍摄图像来完成。我们将在本教程中讨论如何使用计算机视觉和图像处理技术有效地实现这一目标。 在当今的计算机时代,几乎不需要任何物理文书工作。尽管如此,在仍…