数据可视化

数据可视化简单理解，就是将数据转换成易于人辨识和理解的视觉表现形式，如各种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的宽高）

<canvas width:"800" height="400"></canvas>

操作canvas

canvas标签任何操作务必通过js完成，通过js中的“笔”来完成

getContext是canvas的一个方法

let canvas = document.querySelector('canvas')
//获取画布的笔【上下文】
let ctx = canvas.getContext('2d')

绘制线段

canvas的坐标系左上角为(0,0)

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
//线段起点
ctx.moveTo(100,100)
//其他点（可以有多个，起点会先连接先写的其他点）
ctx.lineTo(100,200)
ctx.lineTo(200,100)
//设置图形填充的颜色(需在绘制前调用)
ctx.fillStyle = "red"
ctx.fill()
//设置线段的颜色(需在绘制前调用)
ctx.strokeStyle = 'purple'
//设置线段的宽度(需在绘制前调用)
ctx.lineWidth = '20'
//将起点和最后一个点连接在一起(需在绘制前调用)
ctx.closePath()
//写完点后需调用stroke方法来绘制线段
ctx.stroke()

绘制矩形

方法一：

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
​
//绘制矩形
ctx.strokeRect(100,200,100,200)
//第一个参数为矩形距离x轴的距离
//第二个参数为矩形距离y轴的距离
//第三个参数为矩形的宽
//第四个参数为矩形的高
//总结：四个参数分别为x、y、w、h

注意：这种方法不能设置填充颜色！

方法二：带有填充颜色的矩形（默认为黑色）

let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
​
//设置图形填充的颜色
ctx.fillStyle = "red"
ctx.fill()
//绘制矩形
ctx.fillRect(200,200,100,200)//四个参数与方法一相同

绘制圆形

arc(x,y,radius,starAngle,endAngle,anticlockwise)

x：圆心的x坐标（距离x轴距离）

y：圆心的y坐标（距离y轴距离）

radius：半径

starAngle：开始角度

endAngle：结束角度

anticlo