如何制作数据可视化⽹页
前⾔
之前发表过⼀篇关于借助可视化平台完成数据可视化的博客——，利⽤可视化平台实现数据可视化确实⼗分简单，但是让这个完成好的可视化作品不能实现远程访问，就很难受。（之前的可视化平台其实可以实现远程访问，但是还需要申请注册，未注册的⼀次性仅⽀持2个ip的访问）
如何利⽤⽹页来制作⼀个属于我们⾃⼰的可视化作品呢？
客观，别急，请听我慢慢道来
可视化神器：
请允许让我介绍介绍它：
当我知道echarts是百度开发出来，惊讶之余，也改变了我对百度的⼀些看法…
ECharts 是⼀个使⽤ JavaScript 实现的开源可视化库，涵盖各⾏业图表，满⾜各种需求。
ECharts 遵循 Apache-2.0 开源协议，免费商⽤。
ECharts 兼容当前绝⼤部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展⽰。
以上载⾃菜鸟教程
制作这样的可视化图表，需要具备的能⼒
1. ⼀点点的HTML
2. ⼀点点的CSS
3. 相对较多的的JavaScript
进⼊正题
还是⽼规矩，这⾥我还是以基于echarts实现的地图组件为例。
不过在此之前，你仍需要准备⼀些东西
1. echarts.min.js（需要⽤到的echarts库）
2. china.js（echarts的中国地图需要⽤到）
3. jquery.js（JavaScript函数库）
关于这三个⽂件以及下⽂中组件需要的数据，我已上传⾄百度云盘
密码:ujp6
下⾯给出的是官⽅下载地址：
echarts.min.js与china.js两个⽂件，⼩伙伴们也可以⾃⾏到官⽅github下载：
jquery.js官⽅下载地址：
我们开始吧
⾸先我们需要写⼀个前端的简单页⾯
这个难度不⼤，稍微了解⼀些html就明⽩了，所以我直接放出代码简要说明⼀下就好了。
<!DOCTYPE html>
<html>ps用cutterman切不出图
将汇编语言编写的程序
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ecshop去购物车
*{
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⽂件。jquery下载文件请求
初始化⼀个echarts组件对象，与id名为map的标签绑定，存放在ec_map变量中：
var ec_map = echarts.ElementById("map"));
定义⼀个地图组件的option：
属性的意义已在代码注释中给出，在echarts官⽹中有详细说明：
var ec_option={
//标题属性
title:{
text:"map",//设置标题⽂本
excel教程课件},
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.ElementById("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：由于⼀些浏览器的安全限制机制原因，禁⽌跨域，你可以将这些代码部署到⾃⼰的服务器上然后远程访问，或者搭建⼀个本地的服务器即可实现访问，如果你不知道该怎么做，那么也可以下载⼀个，它是⼀款开发web的软件，使⽤它运⾏你的⽹页⽂件会⾃动搭建好本地服务器
Q：打开本地的html⽂件，只显⽰地图俩字，没有出现地图组件
——
A：这个应该是你的map.js的代码敲错了，请仔细检查⼀些代码错误，或者检查是否遗漏标点符号
结语
以上就是关于使⽤echarts制作可视化⽹页的教程内容，篇幅有限，本⽂只是以制作地图组件为引例，
如需其他组件可直接参考echarts的官⽅⽂档，相信你⼀定会收获满满的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。