数据可视化
数据可视化主要目的,借助于图形化手段清晰有效的传达与沟通信息
数据可视化把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理
Echarts简介
常见的数据可视化库：
> ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 提供直观，交互丰富，可高度个性化定制的数据可视化图表。
使用步骤：
1. 引入echarts 插件文件到html页面中
2. 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>3. 初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));4. 指定配置项和数据(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};5. 将配置项设置给echarts实例对象
myChart.setOption(option)Echarts-基础配置
需要了解的主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`
1. title：标题组件
2. tooltip：提示框组件 .
- trigger 'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
- 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
'none'什么都不触发。
3. legend：图例组件 series里面有了name值legend里面的data可以删掉
4. toolbox:工具箱组件,可以另存为图片
5. grid：直角坐标系内绘图网格,可以控制图表大小
6. xAxis：直角坐标系 grid 中的 x 轴
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
7. yAxis：直角坐标系 grid 中的 y 轴
8. series
- 系列列表。每个系列通过 `type` 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
数据堆叠，同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加。
color：调色盘颜色列表 数组
