这是我参与「第五届青训营 」笔记创作活动的第15天。
什么是数据可视化？
基本概念
数据可视化，是关于数据视觉表现形式的科学技术研究
这个概念向我们传达了两个信息：
数据可视化是一门学科 数据可视化与数据和视觉有关 数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大
数据可视化解决方案
Highcharts、EChart、AntV、three.js、zrender、d3、Canvas、Svg、WebGL、HTML、Chrome、Skia、OpenGL
canvas
canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过js绘制图像
canvas标签
canvas标签只是图形容器，相当于一个画布，canvas元素本身是没有绘图能力的。所有绘制工作必须在js内部完成，相当于使用画笔在画布上画画
注意：
1、必须指定宽高（默认宽为300，高为150）
2、浏览器认为canvas标签是一张图片（可以右键保存图片）
3、给canvas画布添加文本内容或子节点没有意义（浏览器中不会显示）
4、操作canvas画布：画布当中绘制图形、显示文字，都必须通过js完成
5、canvas标签的宽和高务必通过canvas标签属性width|height设置（不能通过样式设置canvas的宽高）
Echarts
是一个基于js的开源可视化图标库，用来开发数据可视化
1、引入Echarts（bootcdn）
2、准备一个容器（div）
ECharts 入门
- 引入 js 库
- 编写渲染容器 DOM，添加 width 和 height 样式属性
- 获取渲染 DOM 对象
- 初始化 ECharts 对象
- 编写 option 参数
- 调用 setOption 完成渲染
