基于Echart的地图数据展示
2020-02-28 16:46:57
“新冠”病毒爆发以来，各部门紧锣密鼓地开展了各类基于大数据的疫情防控工作，将这些防控数据快速、直观的在地图中展示，可以有效的提升掌控全局与指挥决策能力。
Echart是一个使用 JavaScript 实现的开源可视化库，它原本是百度公司开发的一个开源项目，2018年入选Apache 孵化器，成为进入国际顶级开源社区Apache的项目。Echart提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
本文主要使用了Echart的series-map即地图系列，该系列主要用于地理区域数据的可视化，配合 visualMap 组件可以呈现不同区域不同数据的分级展示。
引入 ECharts
Echart核心文件为一个js文件，可以通过官网或GitHub下载，下载后通过script标签引入html页面。也可通过bootcdn等CDN在线引入。
<script src="echarts.js"></script>
一般可引入压缩后的min.js文件，相对编译前的js文件体积较小，运行效率更快。
要显示想要的地图还需要引入相应地图文件，目前官网不支持下载地图文件，可从GitHub源码包中找到相应的文件，中国地图为china.js。
<script src="js/china.js"></script>
地图初始化
首先需要为地图准备一个容器，可以是一个div，并设置好宽度和高度：
<div id="mapChinaChart " style="width:600px;height:400px;"></div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例，并通过 setOption 方法配置参数并生成地图：
var mapChinaChart = echarts.init(document.getElementById('mapChinaChart '));
var optionChina = {
title: {text: '地图标题',},
series: [{
name: '中国',
type: 'map',
mapType: 'china'
}]
};
mapChinaChart.setOption(optionChina);
地图参数配置
series-map常用参数主要有如下几项：
name：地图名称，在多系列图表中可用于图例筛选。
zoom：当前视角的缩放比例。
label：图形上的文本标签，包括文字样式、标签内容格式等。
itemStyle：地图区域的多边形图形样式，可配置每一个区域的颜色、边框样式等。
data：地图系列中的数据内容可以是数组、多维数组或JSON格式。
简单的地图效果
visualMap配置
visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
结合map类图标，visualMap 可以根据map中每一区域data的值（value），在预设的颜色范围内自动为每个区域分配颜色，直接生成不同数值区分的多色地图。
以近期新冠病毒数据为例，visualMap配置如下：
visualMap: {
min: 0,//visualMapPiecewise组件的最小值
max: 1000,//visualMapPiecewise组件的最大值
inRange: {
color: ['lightskyblue','yellow', 'orangered'] //颜色变化范围
},
type:'piecewise',//分段型
pieces: [
{gte: 0, lte: 9, label: '1-9人', color: '#ced88b'},
{gte: 10, lte: 99, label: '10-99人', color: '#fab26b'},
{gte: 100, lte: 499, label: '100-499人', color: '#ff9baa'},
{gte: 500, lte: 999, label: '500-999人', color: '#ff646b'},
{gte: 1000, label: '大于1000人', color: '#ff353d'}
]
}
visualMap组件可以定义为 分段型（Piecewise） 或 连续型（Continuous），通过 type 参数来区分。其中分段型可以指定分段数量后平均分段，或是通过pieces参数定义每一段的数值范围，每一段的标签文字，以及每一段的特别的样式。
在交互功能上，分段型visualMap可以点击每个分段图标来显示/关闭该分段效果，连续型visualMap可通过calculable参数设定一个可拖拽的手柄来调整选中的范围。
数据导入
在具体的数据分析工作中，为快速统计数据，形成分析报告，往往以手工方式对现有数据进行分析处理，并将最终统计数据存储在数据库中或导出到excel表格。为快速实现数据的可视化，结合ECharts现有功能，可将已处理好的数据转换为JSON形式并传递给data参数，即可直接呈现统计效果。
JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
典型的JSON格式可以表示为“键/值”对的集合（A collection of name/value pairs）。
典型的JSON对象
在信息系统设计中，可直接采用各类后端程序语言将数据库中的数据封装为JSON格式。在临时使用尚未建立信息系统的情况下，可采用xlsx.js将excel文件转为JSON格式数据。Sheetjs是一个前端操作Excel的js框架，xlsx.js是其中的一个组成部分，纯js即可读取和导出excel文件，功能强大，支持格式众多，支持xls、xlsx、ods等十几种格式。因浏览器的安全限制，js无法直接读取本地excel文件，但可通过input组件文件上传方式传输excel数据。
从GitHub的Sheetjs项目中找到xlsx.full.min.js，下载后引入并添加input文件上传控件。
<script src="js/xlsx.full.min.js"></script>
<input type="file" id="fileUploader" name="fileUploader" accept=".xls, .xlsx"/>
Excel数据表中第一行为键名，其它行为各地图区域对应的值：
转换excel到JSON代码如下：
$(document).ready(function(){
$("#fileUploader").change(function(evt){
var selectedFile = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var data = event.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.forEach(function(sheetName) {
var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if (XL_row_object.length > 0) {
showmap(XL_row_object);
}
})
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
// 读取上传文件为二进制
reader.readAsBinaryString(selectedFile);
});
});
其中showmap()函数为Echart地图初始化函数，参数为地图的data值。
转换后的JSON内容如下，实际上就是包含两个“键/值”对的二维数组。
[{"name":"湖北","value":61682},{"name":"广东","value":1331},{"name":"河南","value":1262},{"name":"浙江","value":1174},{"name":"湖南","value":1008},{"name":"安徽","value":986},{"name":"江西","value":934},{"name":"江苏","value":631}......]
Excel数据导入自动绘图效果
以上是一个简易的Excel数据导入Echart地图类图表并通过visualMap组件自动分色的例子，通过简单的前端html和js代码建立快速的制图工具。结合后端程序语言和信息系统，还可利用分色筛选、鼠标悬停等交互方式，应用于Dashboard或大屏展现等更多的场景中。