1. ECharts简介
EChart是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大多数浏览器，底层依赖矢量图形库zRener，提供直观，交互丰富，可高度个性化定制的数据可视化图表
- 丰富的可视化类型
- 多种数据格式支持
- 流数据的支持
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 详细的文档说明
2. ECharts的基本使用
2.1. ECharts使用五步曲
- 下载并引用echars.js文件
- 准备一个具备大小的DOM容器
- 初始化echarts实例对象
- 指定配置项和数据
- 将配置项设置给echarts实例对象
2.2. 相关配置讲解
- title:标题组件
- tooltip：提示框组件
- legend：图例组件
- toolbox：工具栏
- grid：直角坐标系内绘图网络
- xAxis：直角坐标系gird中的x轴
- yAxis：直角坐标系gird中的y轴
- series：系列列表。每个系列通过type决定自己的图表类型（什么类型的图表）
- color：调色盘颜色列表
- series：系列列表
- type:类型（什么类型的图表）比如：line是折线，bar柱形等
- name：系列名称，用于tooltip的显示，legend的图例筛选变化
- stack：数据堆叠。如果设置相同值，则会数据堆叠
数据堆叠：第二个数据值=第一个数据值+第二个数据值 第三个数据值=第二个数据值+第三个数据值……依次叠加 如果给stack指定不同的值或者去掉这个属性则不会发生数据堆叠
（图：ECharts组件）
数据可视化项目
1.1. 项目需求
设计稿是1920px PC端适配：宽度在1024~1920之间页面元素宽高自适应
1.2. 适配方案
flexible.js+rem单位+flex布局
flexible.js把屏幕分为24等份 PC端的效果图是1920px cssrem插件的基准值是80px rem值自动生成
边框图片
边框图片的使用场景：
盒子大小不一，但是边框的样式相同 为了实现丰富多彩的边框效果，在css3中，新增了border-image属性，这个新属性允许指定一幅图像作为元素的边框
边框图片切图原理：（重要）
把四个角切出去（九宫格的由来）中间部分可以铺排、拉伸或者环绕 按照上右下左顺时针顺序切割
边框图片的使用语法（重要）：
（图：边框图片属性）
通过类名调用字体图标
(1)HTML页面引入字体图标中css文件 (2)标签直接调用图标对应的类名即可（类名在css文件中标注） 引入css文件和声明字体图标的时候一定注意路径问题
立即执行函数用法：
js文件中，会有大量的变量命名，特别是ECharts使用中，需要大量的初始化ECharts对象，为了防止变量名冲突（变量污染）我们采用立即执行函数策略：
(function(){})();
(function(){
var num=1;
})();
(function(){
var num=1;
})();
注意：多个立即执行函数中间必须加分号隔开
