ECharts从入门到精通——第1篇 从零开始制作中国新冠肺炎实时地图

原文地址
作者主页
ECharts为用户提供了诸多可视化图形模板，其中较为有趣的一种就是地图数据模板。今天，我将向各位读者介绍利用ECharts来构建中国新冠肺炎确诊数量实时地图的方法。

一、项目简介

本项目主要模仿了腾讯新闻网站提供的实时新冠肺炎疫情数据追踪。主要使用的技术是ECharts以及Vue，项目的目录结构与《ECharts从入门到精通——第0篇》一致。
项目源码地址

下面向读者展示一下项目效果。

上图是实际的项目效果图。

上图是腾讯网站的显示效果图。

二、思路简介

2.1 ECharts地图基本用法

在正式开工前，我们不妨先看一个ECharts提供的官方案例——美国人口估计（2012）。

现在我们来看一下如何构建这张地图。从《ECharts从入门到精通——第0篇》我们可以知道：构建ECharts图表实际上就是填写option参数，再进行渲染。用户只需要准确的填写option里的各项字段，就可以实现地图绘制的功能。
仔细观察下面的官网案例，不难发现option里具体的参数可以分为五部分title、tooltip、visualMap、toolbox和series。其中title用于设置标题，tooltip用于设置提示框数据，对于上述美国人口案例而言，就是鼠标悬停在地图上时能够出现的数据。visualMap用于控制小导航图的显示效果，地图上不同数据颜色深浅由该参数决定。toolbox要先引入tooltip才能使用，该参数用于控制tooltip的显示效果。series是最为关键的属性，用户通过该属性设置数据以及引入地图。至此，ECharts地图的基本用法已经较为明晰了，我们可以开始具体的工作了。

option = {title: {text: 'USA Population Estimates (2012)',subtext: 'Data from www.census.gov',sublink: 'http://www.census.gov/popest/data/datasets.html',left: 'right'},tooltip: {trigger: 'item',showDelay: 0,transitionDuration: 0.2,formatter: function (params) {var value = (params.value + '').split('.');value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');return params.seriesName + '
' + params.name + ': ' + value;}},visualMap: {left: 'right',min: 500000,max: 38000000,inRange: {color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']},text: ['High', 'Low'],           // 文本，默认为数值文本calculable: true},toolbox: {show: true,//orient: 'vertical',left: 'left',top: 'top',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},series: [{name: 'USA PopEstimates',type: 'map',roam: true,map: 'USA',emphasis: {label: {show: true}},// 文本位置修正textFixed: {Alaska: [20, -20]},data:[{name: 'Alabama', value: 4822023},{name: 'Alaska', value: 731449},………………{name: 'Washington', value: 6897012},{name: 'West Virginia', value: 1855413},{name: 'Wisconsin', value: 5726398},{name: 'Wyoming', value: 576412},{name: 'Puerto Rico', value: 3667084}]}]};myChart.setOption(option);
});

2.2 使用中国地图

为了简化任务，我们不妨先不去加载数据，仅仅加载一张中国地图的图片。而完成这项工作也非常简单，具体来说可以分为两个步骤：一引入中国地图数据，二挂载地图数据。
引入地图数据需要在代码开始部分进行：

import china from 'echarts/map/js/china.js'

经过这个步骤，地图数据已经可以使用了。
而挂载地图数据需要在option参数下进行设置，即在option参数下找到series参数，在series参数里有个map参数，将china作为参数传递给map即可。
详细情况可以参考上面的官网示例。（map: 'USA'）

2.3获取新冠肺炎数据

为了获取实时的新冠肺炎数据，我们可以访问腾讯网站下的“实时更新:新冠肺炎疫情最新动态”

对数据抓包分析后，我们可以发现原始数据来自这个网址

https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5

访问该网址后，用户可以得到一组json数据，具体如下所示。

请注意！不要滥用该网址！如果以较高频率访问该地址，有可能会被限制IP。
获取这些json数据后，我们只需要仿照官网示例，以{name:,value:}的形式重新组织数据，并填入series就可以了。
代码框架如下所示：

三、详细介绍

在具体实现上述项目时，读者可能会遇到一些问题。下面我列举几个比较关键的问题进行介绍。

3.1出现跨域问题

如果读者在代码里用axios或者jquery直接访问

https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5

并在浏览器里运行代码。
您可能会发现什么数据都没有，并且浏览器会报错“Cross-Origin Request Blocked”。

针对这个问题，我在《利用Axios获取数据并处理跨域请求——Cross-Origin Request Blocked问题处理方法》有详细介绍。请读者移步这篇文章了解处理方法。

3.2如何在局部函数里为全局变量赋值

在利用axios或者jquery获取json数据后，读者可能会发现无法在函数外部调用该数据。在这里读者可以先定义一个全局变量，再利用jquery的async属性，对全局变量进行数据统一。请注意，创建方法后需要单独将该方法运行一遍，关键代码如下所示。

3.3分析嵌套的JSON数据

由于此次腾讯提供的JSON数据是一个较为复杂的嵌套JSON数据，读者在处理该数据时可能会有些棘手。在此，我建议读者最好在浏览器控制台里一层层地“剥开”，逐层提取需要的数据。如果有问题，建议阅读我在文章开始提供的源码或者联系我。

四、小结

本文介绍了使用ECharts绘制地图数据的基本方法。有细心的读者可以注意到，本文没有引入新冠肺炎在时间轴上的变化，并且官方提供的中国地图不够“炫酷”。我将会在后续的文章中进一步介绍ECharts的使用及美化方法。
本文至此结束，谢谢您的阅读！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！