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

雨点打透心脏的1/2处 2023-10-12 23:22 23阅读 0赞

**目录**

前言

一、关于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拥有值域漫游的功能，让你可以轻松进行数值筛选。

![b7900b4baab940f9a7f33f7791282d23.png][]

本文将基于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。

![4b0b3c86b5db42c8bf971d34f572e845.png][]

<table> 
 <tbody> 
  <tr> 
   <td style="width:257px;">文件名</td> 
   <td style="width:425px;">说明</td> 
  </tr> 
  <tr> 
   <td style="width:257px;">map.html</td> 
   <td style="width:425px;">主文件</td> 
  </tr> 
  <tr> 
   <td style="width:257px;">lib/echarts-all.js</td> 
   <td style="width:425px;">echarts集成版js</td> 
  </tr> 
  <tr> 
   <td style="width:257px;">lib/timelineOption.js</td> 
   <td style="width:425px;">数据模拟js包</td> 
  </tr> 
 </tbody> 
</table>

## 二、地图数据可视化 ##

### 1、新建map.html ###

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>ECharts2.2.7地图展示例子</title>
    </head>
    <body>
        
        <div id="main" style="width:100%;height:600px;float:left;"></div>
        
        <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);

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

![5be3264781e54487abf0323dd81f4ba3.png][]

![cac56ca6296446a8a9a921e59ae28898.png][]

## 三、源码展示分析 ##

### 1、初始化阶段 ###

![d744f56720d241b891627c082d1d82a3.png][]

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

![24e0a29df92c45d1b10fa9a178aa2e97.png][]

### 2、timelineOption.js模拟数据 ###

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

## 总结 ##

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

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

[-]: https://blog.csdn.net/yelangkingwuzuhu/article/details/131406155
[b7900b4baab940f9a7f33f7791282d23.png]: https://img-blog.csdnimg.cn/b7900b4baab940f9a7f33f7791282d23.png
[4b0b3c86b5db42c8bf971d34f572e845.png]: https://img-blog.csdnimg.cn/4b0b3c86b5db42c8bf971d34f572e845.png
[5be3264781e54487abf0323dd81f4ba3.png]: https://img-blog.csdnimg.cn/5be3264781e54487abf0323dd81f4ba3.png
[cac56ca6296446a8a9a921e59ae28898.png]: https://img-blog.csdnimg.cn/cac56ca6296446a8a9a921e59ae28898.png
[d744f56720d241b891627c082d1d82a3.png]: https://img-blog.csdnimg.cn/d744f56720d241b891627c082d1d82a3.png
[24e0a29df92c45d1b10fa9a178aa2e97.png]: https://img-blog.csdnimg.cn/24e0a29df92c45d1b10fa9a178aa2e97.png
[Echarts2.2.7]: https://download.csdn.net/download/yelangkingwuzuhu/87961225