数据可视化
前沿：
概念：
工具：E chart 库（最常用的七个图标）
Echarts的基本使：Echarts主题，动画效果，Echarts API
Echarts 的高级使用：
项目：电商平台数据可视化实时监控系统
实现功能模块：
- 后台搭建-由于图表当中的数据都是从服务器当中获取出来的，所以需要后台搭建服务器。
- 结合Vue 开发图标组件（项目基于Vue 框架）
- WebSocket 实现数据推送（实现服务器像客户端实现数据的推送）
- 主题切换/页面合并/全屏切换。。。
知识储备：HTML，CSS，JS，Echarts，vue,vuex,router,webpack,websocket
项目：前后端并行开发
命令：npm run server/npm run start
项目的演示：1.该项目为电商平台数据可视化实时监控系统
2.可以保证实时获取数据进行分析
3.支持大屏展示，自适应分辨率
4.支持联动效果，一端操作，多端联动展示
数据可视化的概念： 把数据以更直观的形式展示，数据与数据之间的关系一目了然（文不如表，表不如图），可以发现隐藏在数据中的信息（上升或者下降）
可视化的实现方式：1.报表类（excel，水晶报表） 2.商业智能BI（Microsoft BI，power-BI） 3.编码类（echarts.js,d3.js,数据可视化的库）
Echarts 的介绍：百度开发的使用js实现的开源可视化库，兼容性强，底层依赖矢量图ZRender,提供直观，功能丰富，可高度个性化定制的数据可视化图表，好处；开源免费，功能丰富，社区活跃，只有你想不到，没有他做不到的，上百种图形
数据可视化：就是将数据通过更加直观的图表呈现，图标只是一种呈现方式，最核心的还是数据本身，E charts支持多种数据格式：比如Key-value 数据格式，二维表，TypedArray 格式，对流数据的支持：流数据的好处：对超大的数据流量而已，数据本身就需要很多时间，加载多少数据，就动态渲染（流数据的冬天渲染），就只对变化的数据进行渲染（增量渲染技术）
Echarts 的基本使用-1.柱状图
基本使用步骤：1.引入 echarts.js 文件 2.准备一个呈现图表的盒子（细节：需要有宽高）
3.初始化 echarts 实例对象（echarts.init(‘dom’)dom 元素参数，决定了图表最终呈现的位置） 4.准备配置项（特别关键：决定了图表的显示方式和显示的数据，说白了就是一个对象） 5.将配置项设置给Echarts 实例对象（通过 实例对象的.setOption(配置对象)
小结配置项的使用：1.除了配置项变化之外，其他的代码都是固定的
2.配置项的学习和使用应该参照官方文档和示例
一些基本的配置项：
xAxis:直角坐标系中的 X轴 对象{}
yAxis:直角坐标系中的 Y轴 对象{}
series:系列列表，每个系列通过type 决定自己的图表类型 数组[]
const BarArr=[70,80,90]
var option={
title:{
text:‘成绩’，//主标题
link:‘http://www.baidu’//点击主标题会跳转到链接所指的位置
textStyle:{fontStyle=’normal’} //主标题的字体样式
}
xAxis:{type:‘category’, //category代表的是类目轴意味着，需要指定类目轴x 的类别，需要通过data这个属性进行指定data:[‘小明’,‘小红’，‘小紫’]}
yAxis:{type:‘value’//type设置成数值轴，就不需要设置 data ，y轴会根据x轴的每一个类别去去自动寻找 series 中的 data 数值}
series:[{name:‘语文’//三个数值是语文成绩type：‘bar’//代表什么图形，data: BarArr } color:‘red’//柱形图颜色]， 常见效果：标记markPoint:{ //标记出最大值和最小值data: [{type:'max',name:'最大值'
},{type:'min',name:'最小值'}]
}, markLine:{//平均线
data:[{type:'average',name:'平均值'}]
}, 显示分为：数值显示label:{//数值显示（每一个数值显示） show：true，rotate：60，//旋转角度，position:’inside,//每一个数值在柱形图中显示}柱宽度显示：barWidth:’30’,横向柱状图：更改x轴和y 轴 的角色 xAxis:{type:value},yAxis:{type:category,data: BarArr }
}
代码：
小结柱状图：
- 基本的柱转图：基本的代码结构，x 轴和 y 轴的数据，series 的type设置为 bar
- 柱状图常见效果：最大值/最小值 markPoint,平均值 markLine,数值的显示 label,柱的宽度 barWidth
- 柱形图的特点：柱形图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类的排名情况
-
通用配置 title：标题、提示：tooltip()、工具按钮（Echarts提供的）：toolbox，图列：legend，是指任何一种类型的图表都可以使用的配置
Var option={
title:{text:’成绩展示’，textStyle:{color:’red’}//文子样式，标题的位置：left:30,top:30 ,标题的边框：borderWidth,borderColor,borderRadious }
tooltip:{//提示框组建，用于配置鼠标滑过或点击图表时的显示框，trigger 触发类型 ，triggerOn 触发时机，formatter:’显示的内容一般配合模版字符串，参考文档，或者回调函数’
trigger:item: //鼠标移入时触发,移出时不显示
trigger:axis //鼠标只要在坐标轴上都显示
triggerOn:click //鼠标移入时不触发，只有点击的时候才显示提示
formatter:`{b}的标题是{c}`
formatter:function(arg){return arg[0].name+’的分数是’+arg[0].data} //return 出来的值就是显示的内容}
toolbox：{feature:{saveImae:{} //图表可以点击下载，导出图片，dataview:{}可以看到源数据并且可以修改，数据试图，restore:{}重置数据，dataZoom:{}区域缩放，magicType:{type:[‘bar’,’line’]} //动态数据展示，柱状图和折线图之间切换}
legend:图列，用于筛选系列，需要配合series配合使用，legend中的data是一个数组，legend中的data的值需要和series数组中某组数据 的name值一致
legend:{data:[‘语文’,’数学’]}
}