数据可视化
数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
数据可视化的场景:数据可视化在互联网公司中经常用于通用数据报表,移动端图表,大屏可视化,图编辑&图分析,地理可视化等。
常见的数据可视化库
D3.js
目前 Web 端评价最高的 Javascript 可视化工具库(入手难) 。ECharts.js
百度出品的一个开源 Javascript 数据可视化库。Highcharts.js
国外的前端数据可视化库,非商用免费,被许多国外大公司所使用。AntV
蚂蚁金服全新一代数据可视化解决方案。
Echarts
Echarts-介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表,且可定制。
- 官网网站:https://echarts.apache.org/zh/index.html
- 官方教程:[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)
Echarts-基本使用步骤
- 第一步:下载Echarts并引入Echarts:https://echarts.apache.org/zh/download.html —— 图表依赖这个js库
<script src="js/echarts.min.js"></script>
- 第二步:准备一个具备大小的DOM容器 —— 生成的图表会放入这个容器内(容器必须有大小)
<div id="main" style="width: 600px;height:400px;"></div>
- 第三步:初始化echarts实例对象 —— 实例化echarts对象
var myChart = echarts.init(document.getElementById('main'));
- 第四步:指定配置项和数据(option) —— 根据具体需求修改配置选项
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
legend: {
//legend:图例组件 (组件)图例组件展现了不同系列的标记(symbol),颜色和名字
data:['销量']
},
xAxis: {
//Axis:轴
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
//series:自定义系列(系列)
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
- 第五步:将配置项设置给echarts实例对象 —— 让echarts对象根据修改好的配置生效
myChart.setOption(option);
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ECharts体验</title>
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<!-- 1. 下载引入EChart.js 文件 -->
<script src="js/echarts.min.js">