1, 什么是数据可视化？
把数据从冰冷的数字转换成图形，目的是借用图形的手段，清晰有效的传述与沟通信息。
2, 数据可视化的使用场景？
通用报表，移动端，大屏可视化，图分析，地理可视化等
3, 常见的数据可视化库有哪些？
（1） 百度出品的开源javascript：Ecarts.js
（2） 国外出品的：Highcharts.js
（3） 蚂蚁金服：AntV
（4） Web端评价最高的javascript可视化库：D3.js （入手较难）
4, Echarts 简介
百度开发的，免费开源，pc , 移动，跨平台使用 ，里面包含：折线图，饼图，仪表等
5, Echarts 的使用
（1） 下载并安装引入echarts文件（官网下载，图表依赖这个库）
下载echarts github.com/apache/incu…
在src下创建文件：里面引入 dist/echarts.min.js
（2） 准备一个具备大小的dom容器（生成的图表会放入这个容器内）
（3） 利用init初始化Echarts实例对象（实例化Echarts对象）
var myChart = echarts.init(document.getElementById('main'));
（4） 指定配置和数据（根据具体需求修改配置项）
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） 利用setOption将配置项设置给echarts 实例对象（让echarts对象根据修改好的配置生效）
myChart.setOption(option);
6 ， Echarts的主要配置
（1）Series：系列列表。每个系列通过 type 决定自己的图表类型
大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
（3） xAxis：直角坐标系 grid 中的 x 轴
（3）boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
（4）yAxis：直角坐标系 grid 中的 y 轴
（5）grid：直角坐标系内绘图网格。
（6）title：标题组件
（7）tooltip：提示框组件
（8）legend：图例组件
（9）color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
7 ， 针对数据可视化项目适配方案
Flexible.js：检测浏览器宽度修改html文字大小
Rem单位：页面元素根据rem 适配大小，配合cssrem插件
Flex；实现页面快速布局
场景：如果把屏幕宽度约束在1024~1920之间适配？
利用媒体查询 + rem进行适配
例如：pc端
Flexible.js 把屏幕分10等份，pc端的图为1920px，cssrem插件基准值是192px, rem值自动生成
