如何制作数据可视化网页

最新推荐文章于 2024-09-28 13:57:28 发布

野漫横江

最新推荐文章于 2024-09-28 13:57:28 发布

阅读量9.5k

点赞数 16

分类专栏： echarts JavaScript 文章标签：可视化 javascript echarts html5

本文链接：https://blog.csdn.net/WildSky_/article/details/105011861

版权

echarts 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

前言

之前发表过一篇关于借助可视化平台完成数据可视化的博客——关于新型冠状病毒肺炎疫情追踪的可视化数据的采集、处理，利用可视化平台实现数据可视化确实十分简单，但是让这个完成好的可视化作品不能实现远程访问，就很难受。（之前的可视化平台其实可以实现远程访问，但是还需要申请注册，未注册的一次性仅支持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的软件，使用它运行你的网页文件会自动搭建好本地服务器