时空可视化（绘制过去十年中国各省市年度生产总值热力图和过去五年GDP时空变化地图）

时空可视化实习报告

摘要：数据可视化是时空大数据处理过程中的重要技术，能够对复杂的时空数据进行直观显示和动态演示，对协同式知识传播与科学发现有着重要的意义。本实习报告通过前端工具vscode和Echarts，对2012到2021年中国各省级生产总值GDP的展开了分析，得到了过去十年中国各省市年度生产总值热力图和过去五年GDP时空变化地图。

关键词：时空大数据；可视化；Echarts

Visual time-space Practice Report

Abstract: Data visualization is an important technology in the process of spatio-temporal big data processing. It can visually display and dynamically demonstrate complex spatio-temporal data, which is of great significance to collaborative knowledge dissemination and scientific discovery. Through front-end tools vscode and Echarts, this internship report analyzes the GDP of China's provincial level from 2012 to 2021, and obtains the annual GDP heat map of China's provinces and cities in the past ten years and the spatial and temporal change maps of GDP in the past five years.

Keywords: Space-time big data; Visualization;；Echarts

目  录

时空可视化实习报告.... 2

Visual time-space Practice Report. 2

1  引言.... 1

2  数据与方法.... 1

2.1  方法.... 1

2.1.1  基本原理.... 1

2.1.2  主要工具.... 1

2.2  数据.... 2

2.2.1  数据类型.... 2

2.2.2  数据来源.... 2

3  过程与成果.... 2

3.1  实习过程.... 2

3.1.1 生成热力图.... 2

3.1.2 生成时空变化地图.... 6

3.2  实习成果.... 11

3.2.1 热力图.... 11

3.2.2 时空变化图.... 12

3.3  发现的问题与解决方案.... 13

4  总结.... 14

参考文献.... 14

1  引言

数据都是在时间和空间中产生的，所以数据本质上就是时空数据[1]。现在人们直接处理数据的能力已经远远落后于获取数据的能力。理解和利用数据是信息技术发展的迫切需求，数据可视化技术是数据挖掘、数据分析的有效补充。时空大数据可视化技术在智慧城市、商业智能、数据新闻等领域发挥着重要的作用[2,3]。本文基于vscode和Echarts前端可视化工具，通过实践生成热力图和时空变化地图，深入挖掘研究了时空大数据可视化的展示特点及其应用，并对可视化技术的发展进行了总结和展望。

2  数据与方法

2.1  方法

 2.1.1  基本原理

可视化通过利用人脑智能和双眼的感知能力来对数据进行交互的可视表达以增强人的认知，如图1所示为可视化经典参考模型[4]，原始数据经过数据处理之后生成图表展示出来，经过用户视觉映射形成认知信息被人们接收，最终目的是让人们通过可视化发现隐藏在数据背后的现象和规律。从基础数据到最后被人们接受形成认知的过程并不是孤立的，需要数据分析处理、可视化效果设计、人机交互技术融合等多方面协同完成。

图1 可视化参考模型

 2.1.2  主要工具

1. VisualStudio code：作为前端技术的编辑器，可以通过加载各种扩展包将数据图形化、图表化，并在网页中展示出来。
2. Excel：作为数据可视化工具的典型，它简单、方便、功能强大，可以对数据进行筛选、统计等预处理工作，也可以制作简单的折线图、柱状图、饼图等图表。
3. Echarts：ECharts是一个使用JavaScript实现的“数据可视化”库, 它可以流畅的运行在PC和移动设备上，将输入的原始数据转化为一系列清晰易懂的图像和图表，通过修改配置项还能自定义衍生出酷炫的可视化效果。

2.2  数据

2.2.1  数据类型

收集到2012到2021年的国内生产总值GDP数据，包含31个省和直辖市，时间跨度为十年，GDP总值单位为亿元，设地区一列为X坐标轴，时间一列为Y坐标轴，整理如下图。

图1 实验数据

2.2.2  数据来源

在国家统计局（http://www.stats.gov.cn/）中注册并登录账号，在统计数据->数据查询->年度数据里面查找得到2012到2021年的国内生产总值GDP表格数据，下载为.xls格式。

3  过程与成果

3.1  实习过程

3.1.1 生成热力图

（1）下载案例代码

Step1：从McChart网站（MCChart）下载一个热力图的案例代码作为修改的基础，原始案例图如图2所示。

Step2：替换js库链接地址为以下两列网址：https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js、https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js。

图2 原始案例图

（2）替换数据

Step1：根据热力图数组变化规律：左下角为(0，0，x)，向右为（1，0，x），向上为(0，1，x)。地区作为i，年份作为j，数值作为x，则数组应为(i，j，x)，利用excel文本连接函数（如左上角表格=CONCATENATE($A3,",",C$1,",",C3)），将原始数据转换成数组。

Step2：将excel格式的数组复制到Echarts网站的Spreadsheet Tool工具（Spreadsheet Tool - Apache ECharts），即可将其转为js格式的数组，如图3所示。

图3 转为json数组

Step3：将网站上转换得到的js数组复制到word，利用“替换”功能删除引号。将最后结果复制到vscode，替换原本“series”中的“data”数据即可。

Step4：同样可使用Spreadsheet Tool工具将10个年份和31个省份分别转换为一维数组后，将x轴“xAxis”中的“data”改为省份，顺序为从左至右；将y轴“yAxis”中的“data”改为年份，顺序为从下往上，部分代码如图4所示。

图4 替换x，y轴数据

（3）修改热力图配置项

Step1：修改标题title。查阅echarts关于title组件的官方文档https://echarts.apache.org/zh/option.html#title ，将标题修改为：2012年~2020年中国各省市年度生产总值（GDP），副标题修改为：单位（亿元）；并分别修改其字体样式、字号大小、颜色等属性。部分代码如图5所示。

图5 修改标题title

Step2：修改网格grid的配置。查阅echarts关于grid组件的官方文档：Documentation - Apache ECharts，修改热力图的整体布局，部分代码如图6所示。

图6 修改网格grid参数

Step3：修改x轴xAxis、y轴yAxis的配置。

可分别查阅echarts关于xAxis、yAxis组件的官方文档：Documentation - Apache ECharts、Documentation - Apache ECharts，选择坐标轴类型为类目轴，设置坐标轴刻度和标签，部分代码如图4所示。

Step4：修改视觉映射组件visualMap的配置。查阅echarts关于visualMap组件的官方文档：Documentation - Apache ECharts，发现由于本次示例数据的大小差异非常大，最小值为710，最大值为124369.7，若使用连续型visualMap，则热力图的视觉差异不够明显。所以可使用分段型visualMap，借助一些配色网站进行类别的配色（色彩中间色_计算两种颜色中间色(颜色中间值)_在线调色板工具），自定义每段数值区间及颜色。部分代码如图7所示。

 图7 自定义分段区间及颜色

Step5：修改热力图series的配置。查阅echarts关于series-heatmap类型的官方文档：Documentation - Apache ECharts，设置图形类型、标签及样式等，如图8代码所示。

图8修改热力图series参数

Step6：添加工具栏toolbox。查阅echarts关于toolbox的官方文档： Documentation - Apache ECharts，添加保存图片功能，即可将图片下载至本地，代码如图9所示。

图9添加工具栏toolbox

3.1.2 生成时空变化地图

（1）下载案例代码

Step1：从McChart网站（MCChart）下载一个时空变化图的案例代码作为修改的基础，原始案例图如图10所示。

图10 原始案例图

Step2：替换js库链接地址为以下两列网址：https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js、https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js。

Step3：替换geojson地址。可使用阿里云GeoAtlas网站下载全国、省、市、区县等不同等级的geo json格式地图：DataV.GeoAtlas地理小工具系列，如本案例所需地图：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json。

（2）替换数据

使用excel文本连接符号&将每年的数值转换成数组格式（地区：数值），然后将每一年的数组复制到vscode，替换原有数据，如图11所示。

图11 替换数据

（3）修改配置项

Step1：修改散点图series的配置。查阅echarts关于effectScatter组件的官方文档：Documentation - Apache ECharts ，选择散点图类型，设置散点大小和波纹绘制的方式，部分代码如图12所示。

图12 修改散点图series参数

Step2：修改标题title配置。查阅相关文档，将标题修改为：2017-2021年中国各省生产总值(GDP)变化图，副标题修改为：单位（亿元）；并分别修改其字体样式、字号大小、颜色等属性。部分代码如图13所示。

图13 修改title参数

Step3：添加工具栏toolbox。如图9，添加保存图片功能，即可将图片下载至本地。

Step4：时间轴timeline配置。查阅echarts关于timeline组件的官方文档：Documentation - Apache ECharts，这里关闭动画自动播放，部分代码如图14所示。

图14 修改timeline参数

Step5：直角坐标系网格组件grid配置。可不修改，如图15所示。

图15 grid配置

Step6：地理坐标系组件geo配置。查阅echarts关于geo组件的官方文档：Documentation - Apache ECharts所示。

图16 geo配置

Step7：坐标轴xAxis和yAxis配置。可不修改，如图17所示。

图17 配置xAxis和yAxis

3.2  实习成果

3.2.1 热力图

如图18所示，将鼠标置于某一网格即可显示该地区的具体年度生产总值。可见过去十年内广东、江苏的GDP一直名列前茅，西藏、海南地区GDP常年低于1000亿元，东西部地区发展仍不平衡，但各地区GDP基本保持逐年增长状态。

图18 热力图成果

3.2.2 时空变化图

如图19到图23所示，利用时间轴可以动态直观演示过去五年内中国各省市GDP的变化过程。

图19 2017年中国各省生产总值(GDP)变化图

图20 2018年中国各省生产总值(GDP)变化图

图21 2019年中国各省生产总值(GDP)变化图

图22 2020年中国各省生产总值(GDP)变化图

图23 2021年中国各省生产总值(GDP)变化图

3.3  发现的问题与解决方案

（1）问题1：热力图只显示一列。

解决方法：检查xAxis配置，发现“data”里的省份数组多了一个“]”，将其删除即可。

（2）问题2：时空地图上某个省份中显示的点过大。

解决方法：如图24，在series中通过逐步增大被除数改变散点的大小，直至调整到合适的大小为止。

图24 更改散点大小

4  总结

通过本次实习，我学会了用Excel对数据进行预处理，了解到了某些网站能方便快捷地将表格转换为json数组，同时学会了结合Echarts的典型案例网站和官方网站，对可视化图表代码进行改写和配置项修改，对我后期小组实习中将收集到的POI数据进行处理和可视化奠定了基础。

在今后的研究中，时空大数据的集成、快速高效处理、创造匹配心理映像的大数据可视化表征、可扩展性等问题[1]，是时空大数据可视化面临的挑战，同时也逐渐成为今后时空大数据可视化研究的热点与方向。

参考文献

1. 杨丽娜,马照亭,朱立宁,刘丽.时空数据可视化研究[J].测绘与空间地理信息,2020,43(05):140-142+146+149.
2. 边馥苓，杜江毅，孟小亮．时空大数据处理的需求、应用与挑战[J]．测绘地理信息，2016,41(6):1-4.
3. 李德仁，马军，邵振峰．论时空大数据及其应用[J]．卫星应用，2015(9);7-11.
4. CARD SK,MACKINLAY J D.Readings in in-formation visualization.using vision to think Morgan Kaufmann Publishers Inc[M].San Francisco:Morgan Kaufmann Publishers,1999.