今日重点：
一、数据可视化
1、数据可视化
数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
2、数据可视化的场景
（1）通用报表 （2）移动端图表 （3）大屏可视化 （4）图编辑&图分析 （5）地理可视化
3、常见的数据可视化库
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
二、Echarts-体验
1、ECharts的基本使用
五步曲：
步骤1：下载并引入echarts.js文件---图表依赖这个js库
步骤2：准备一个具备大小的DOM容器---生成的图表会放入这个容器内
步骤3：初始化echarts实例对象---实例化echarts对象
var myChart = echarts.init(document.getElementById('main'));
步骤4：指定配置项和数据(option)---根据具体需求修改配置选项
步骤5：将配置项设置给echarts实例对象---让echarts对象根据修改好的配置生效
myChart.setOption(option);
注：（1）使用了echarts ,css样式选择器，尽量不要使用div作为选择器
（2）悬浮框 显示的位置 position: ["35%", "50%"],
（3）extraCssText附加到浮层的 css 样式 -- 可以控制悬浮框的显示大小
extraCssText: 'width:80px;height:80px;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
},
2、Echarts-基础配置
1）series
（1）系列列表。每个系列通过 type 决定自己的图表类型
（2）大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
2）xAxis：直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间 。
3）yAxis：直角坐标系 grid 中的 y 轴
4）grid：直角坐标系内绘图网格。
5）title：标题组件
6）tooltip：提示框组件
7）legend：图例组件
8）color：调色盘颜色列表
9）toolbox: 工具栏
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
3、总结：
三、可视化项目
1、REM适配
1）设计稿是1920px
2）PC端适配： 宽度在 1024~1920之间页面元素宽高自适应
（1）flexible.js 把屏幕分为 24 等份
（2）cssrem 插件的基准值是 80px
插件-配置按钮---配置扩展设置--Root Font Size 里面 设置。
但是别忘记重启vscode软件保证生效
（3）要把屏幕宽度约束在1024~1920之间有适配（媒体查询）
2、边框图片
盒子大小不一，但是边框样式相同，此时就需要边框图片来完成
（1） 边框图片切割原理：
把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。
（2）属性
平铺方式：
（1）stretch 拉伸（默认）
（2）repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
（3）round 环绕，是完整的使用切割后的图片进行平铺
** border-image-slice： 按照 上右下左 顺序切割**
3、通过类名调用字体图标
（1）HTML页面引入字体图标中css文件。
（2）标签直接调用图标对应的类名即可。（类名在css文件中标注）
