常见的数据可视化库：
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender](https://github.com/ecomfe/zrender)，提供直观，交互丰富，可高度个性化定制的数据可视化图表
使用步骤：
1. 引入echarts 插件文件到html页面中
2. 准备一个具备大小的DOM容器
3. 初始化echarts实例对象
4. 指定配置项和数据(option)
5. 将配置项设置给echarts实例对象
这是要求同学们知道以下配置每个模块的主要作用干什么的就可以了
需要了解的主要配置：`series` `xAxis` `yAxis` `grid` `tooltip` `title` `legend` `color`
series系列列表。每个系列通过 `type` 决定自己的图表类型。大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的`stack`值后 后一个系列的值会在前一个系列的值上相加
基本知识具备，进入操作
准备一个index.js文件
放入准备的js文件
引入文件
编写index.js
实例化对象
指定配置和数据
把配置给实例对象
查看效果
修改图表柱形颜色 #2f89cf
修改图表大小 top为 10px bottom为4% grid决定我们的柱状图的大小
X轴相关设置 xAxis
文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
X轴线的样式 不显示
Y 轴相关定制
文本颜色设置为 rgba(255,255,255,.6) 字体大小为 12px
Y 轴线条样式 更改为 1像素的 rgba(255,255,255,.1) 边框
分隔线的颜色修饰为 1像素的 rgba(255,255,255,.1)
修改柱形为圆角以及柱子宽度 series 里面设置
更换对应数据
让图表跟随屏幕自适应
去掉粉色底色，查看效果
