前言
之前发表过一篇关于借助可视化平台完成数据可视化的博客——关于新型冠状病毒肺炎疫情追踪的可视化数据的采集、处理，利用可视化平台实现数据可视化确实十分简单，但是让这个完成好的可视化作品不能实现远程访问，就很难受。（之前的可视化平台其实可以实现远程访问，但是还需要申请注册，未注册的一次性仅支持2个ip的访问）
如何利用网页来制作一个属于我们自己的可视化作品呢？
客观，别急，请听我慢慢道来
可视化神器：echarts
请允许让我介绍介绍它：
当我知道echarts是百度开发出来，惊讶之余，也改变了我对百度的一些看法…
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。
以上载自菜鸟教程
制作这样的可视化图表，需要具备的能力
- 一点点的HTML
- 一点点的CSS
- 相对较多的的JavaScript
进入正题
还是老规矩，这里我还是以基于echarts实现的地图组件为例。
不过在此之前，你仍需要准备一些东西
- echarts.min.js（需要用到的echarts库）
- china.js（echarts的中国地图需要用到）
- jquery.js（JavaScript函数库）
关于这三个文件以及下文中组件需要的数据，我已上传至百度云盘
点我 密码:ujp6
下面给出的是官方下载地址：
echarts.min.js与china.js两个文件，小伙伴们也可以自行到官方github下载：点我
jquery.js官方下载地址：点我
我们开始吧
首先我们需要写一个前端的简单页面
这个难度不大，稍微了解一些html就明白了，所以我直接放出代码简要说明一下就好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
}
body{
width: 100%;
height: 100%;
}
#map{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
<script type="text/javascript" src="js/china.js" ></script>
</head>
<body>
<div id="map">地图</div>
<script type="text/javascript" src="js/map.js" ></script>
</body>
</html>
我们主要说明一下body标签中的内容，第一个div作用是给我们需要创建的echarts组件提供一个承载容器，定义其id属性目的是为了让echarts组件与这个div标签绑定，通俗来说就是用来告诉echarts组件它要在哪个html标签中显示。
而map.js就是我们接下来的主要工作——实现这个地图组件
为了方便理解，我已对相关属性进行标注
地图组件的实现
首先在js文件夹下创建一个map.js文件。
初始化一个echarts组件对象，与id名为map的标签绑定，存放在ec_map变量中：
var ec_map = echarts.init(document.getElementById("map"));
定义一个地图组件的option：
属性的意义已在代码注释中给出，在echarts官网中有详细说明：echarts官方文档
var ec_option={
//标题属性
title:{
text:"map",//设置标题文本
},
tooltip:{
//提示框
tirgger:"item",//提示框的触发类型
formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",//字符串模板
},
visualMap:{
//导航图标
x:"left",//定位visualMap组件显示的位置
y:"bottom",//定位visualMap组件显示的位置
splitList:[//划分不同范围数据块的显示
{
start:0,end:49},
{
start:50,end:99},
{
start:100,end:149},
{
start:150,end:199},
{
start:200}
],
},
series:[{
type:"map",//告诉echarts你设置的组件类型
mapType:"china",//告诉echarts你设置的地图组件是什么地图，这就需要用到china.js了
data:null,//需要显示的数据
label:{
normal:{
show:true,//显示省份名称
fontSize:18,//调整省份标签的大小
},
},
}]
};
你以为这样就完了吗，请你回想一下，我们制作这样一个组件的目的是什么，对呀，将数据可视化呀！但是，你是否注意到，这一系列过程中，我们并没有利用这些数据，所以，接下来，我们需要利用ajax请求调用之前area.json文件中的数据
$.ajax({
type:"get",
url:"js/area.json",
async:false,
success:function(data){
ec_option.series[0].data=data.data;
}
});
完事了吗？并没有！仔细想想之前的都做了什么：绑定指定组件、设置一个组件属性、调用数据文件，还差了什么？将刚刚的组件属性设置到指定组件呀！（敲黑板！）
ec_map.setOption(ec_option);
附上完整map.js代码
var ec_map = echarts.init(document.getElementById("map"));
var ec_option={
title:{
text:"map",
},
tooltip:{
tirgger:"item",
formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",
},
visualMap:{
x:"left",
y:"bottom",
splitList:[
{
start:0,end:49},
{
start:50,end:99},
{
start:100,end:149},
{
start:150,end:199},
{
start:200}
],
},
series:[{
type:"map",
mapType:"china",
data:null,
label:{
normal:{
show:true,//显示省份名称
fontSize:18,
},
},
}]
};
$.ajax({
type:"get",
url:"js/area.json",
async:false,
success:function(data){
ec_option.series[0].data=data.data;
}
});
ec_map.setOption(ec_option);
附上一些你可能会遇到的问题
Q:代码是正确的，打开本地的html文件，地图组件有显示，但地图却是灰色的
——
A:由于一些浏览器的安全限制机制原因，禁止跨域，你可以将这些代码部署到自己的服务器上然后远程访问，或者搭建一个本地的服务器即可实现访问，如果你不知道该怎么做，那么也可以下载一个HBuilder，它是一款开发web的软件，使用它运行你的网页文件会自动搭建好本地服务器
Q:打开本地的html文件，只显示地图俩字，没有出现地图组件
——
A:这个应该是你的map.js的代码敲错了，请仔细检查一些代码错误，或者检查是否遗漏标点符号
结语
以上就是关于使用echarts制作可视化网页的教程内容，篇幅有限，本文只是以制作地图组件为引例，如需其他组件可直接参考echarts的官方文档，相信你一定会收获满满的。