本文介绍了数据可视化的概念，并详细探讨了HTML5中的canvas和SVG元素，包括如何绘制线段、矩形、圆形等。同时，文章还深入讲解了ECharts这个JavaScript图表库的使用，包括基本概念、新特性和组件。通过对canvas、SVG和ECharts的学习，读者可以更好地理解和实现数据可视化。
数据可视化简单理解，就是将数据转换成易于人辨识和理解的视觉表现形式，如各种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：结束角度
anticlockwise：是否逆时针（true）或顺时针（false）
360° = 2PI
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
//绘制圆形（开始绘制）
ctx.beginPath();
//绘制圆形的方法
ctx.arc(100,100,50,0,2 * Math.PI,true)
//设置图形填充的颜色
ctx.fillStyle = "red"
ctx.fill()
//绘制圆形（结束）
ctx.stroke()
清除画布
将画布中所有绘制的图形清除
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
//绘制矩形
ctx.fillRect(100,200,100,200)
//清除画布
ctx.clearRect(100,200,100,100)
//四个参数分别为x、y、w、h。代表需要清除的区域
绘制文字
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
//设置文字样式
ctx.font('20px 微软雅黑')
//设置文字颜色
ctx.fillStyle = 'red'
//绘制文字
ctx.fillText('文字',50,50)
//参数分别为：文本内容，文本x轴位置，文本y轴位置
svg
svg是基于XML的图像文件格式。全称为Scalable Vector Graphics，意为可缩放的矢量图形
注意：
1、在html中就是标签（双闭合标签）
2、默认宽高为300x150
3、svg绘制图形务必在svg标签内部
基本的SVG元素
-
<svg></svg>：包裹并定义整个矢量图。 -
<line>：创建一条直线<svg> <line x1="" y1="" x2="" y2="" stroke="red"></line> </svg> <!-- 必选属性： x1，y1：代表第一个点的坐标 x2，y2：代表第二个点的坐标 stroke：绘制直线，值为直线的颜色 可选属性： stroke-width="20"：设置直线的宽度 --> -
<polyline>：创建折线（默认填充）<svg> <polyline points="50 50,100 100,200 200"></polyline> </svg> <!-- 绘制折线的三种方法（可绘制多个点：如x4 y4 x5 y5....）： 1：<polyline points="x1 y1,x2 y2,x3 y3"></polyline> 2:<polyline points=" x1 y1 x2 y2 x3 y3"> </polyline> 3:<polyline points="x1 y1 x2 y2 x3 y3"></polyline> 可选属性： fill-opacity="0"：设置填充颜色透明度（如果为0会将整个折线与填充变透明，所以需搭配stroke使用） stroke="red"：绘制折线并设置颜色 --> -
<rect>：创建矩形<svg> <rect x="400" y="400" width="150" height="50" fill="pink"></rect> </svg> <!-- fill：设置填充颜色 --> -
<circle>：创建圆<svg> <circle cx="70" cy="95" r="50" style="stroke:cyan;fill:none"></circle> </svg> <!-- cx，cy：圆心点坐标 r：半径 style：设置样式 --> -
<ellipse>：创建圆和椭圆<svg> <ellipse cx="70" cy="95" rx="50" ry="60" style="stroke:cyan;fill:none"></ellipse> </svg> <!-- cx，cy：圆心点坐标 rx，ry：x轴和y轴半径 --> -
<polygon>：创建多边形（默认填充）<svg> <polygon points="600 100,300 400,750 100" stroke="red" fill-opacity="0"></polygon> </svg> -
<path>：通过指定点以及点和点之间的线来创建任意形状（默认填充）<svg> <path d=" M x1 y1 L x3 y3 L x4 y4 L x5 y5 Z x6 y6"></path> </svg> <!-- M：移动到初始位置 L：画线 Z：将结束和开始闭合 -->
Echarts
是一个基于js的开源可视化图标库，用来开发数据可视化
基本使用
1、引入Echarts（bootcdn）
2、准备一个容器（div）
<div></div>
<script>
let a = document.querySelector('div')
//创建Echarts实例
let myecharts = echarts.init(a)
//指定图表的配置项和数据（配置项在官网查看）
myecharts.setOption({
//图标的标题
titel:{
//主标题的设置
text:'标题'
//子标题的设置
subtext:'子标题'
}
//x轴配置项
xAxis:{
//x轴数据
data:[]
}
//y轴配置项
yAxis:{
//显示y轴的线
axisLine:{
show:true
},
//显示y轴刻度
axisTick:{
show:true
}
}
//系列的设置：绘制什么样式的图表、数据的展示在这里设置
series:[
{
//图标类型的设置
//bar：柱状图 line：折线图 pie：饼图
type:'bar'
//图标的数据
data:[10,20,30]
//设置颜色
color:'red'
}
]
})
</script>
展示多个图表：
1、多个容器展示多个图表
如果需要多个图表，需要再准备一个容器，创建echars实例。如：
<div class="box1"></div>
<div class="box2"></div>
<script>
let a = document.querySelector('.box1')
let b = document.querySelector('.box2')
//创建Echarts实例
let myecharts1 = echarts.init(a)
let myecharts2 = echarts.init(b)
//指定图表的配置项和数据（配置项在官网查看）
myecharts1.setOption({
})
myecharts2.setOption({
})
</script>
2、一个容器展示多个图表
在series（系列）中设置，会在一个坐标系中展示
<div></div>
<script>
let a = document.querySelector('div')
//创建Echarts实例
let myecharts = echarts.init(a)
//指定图表的配置项和数据（配置项在官网查看）
myecharts.setOption({
//图标的标题
titel:{
//主标题的设置
text:'标题'
//子标题的设置
subtext:'子标题'
}
//x轴配置项
xAxis:{
//x轴数据
data:[]
}
//y轴配置项
yAxis:{}
//系列的设置：绘制什么样式的图表、数据的展示在这里设置
series:[
{
//图标类型的设置
//bar：柱状图 line：折线图 pie：饼图
type:'bar'
//图标的数据
data:[10,20,30]
//设置颜色
color:'red'
},
{
type:'line'
data:[10,20,30]
}
]
})
</script>
4.0新特性：dataset
dataset：数据集，将数据放在一个二维数组中，调用时在series的encode中调用。如：
<div></div>
<script>
let a = document.querySelector('div')
let myecharts = echarts.init(a)
//声明数据：二维数组
let data = [
['衣服',10,22,'x',10],
['直播',12,55,'y',50],
['游戏',16,44,'z',60],
['电影',19,32,'t',70],
]
myecharts.setOption({
series:[
...
{
type:'bar'
//data:[10,20,30],因为数据在外面声明，所以不需要使用data
color:'red'
//调用数组
encode:{
//决定y轴使用数组的数据：值为索引值
y:1
}
},
{
type:'pie'
//data:[10,20,30]
encode:{
//决定柄图旁边的文字：值为索引值
itemName:3
//决定柄图的值：值为索引值
value:4
}
}
]
})
</script>
Echarts基本概念：组件
Echarts中除了绘图之外的其他部分，都可抽象为组件
<div></div>
<script>
let a = document.querySelector('div')
let myecharts = echarts.init(a)
myecharts.setOption({
...
series:[
{
//起名字
name:'柱状图'
type:'bar'
data:[10,20,30],
},
{
//起名字
name:'折线图'
type:'pie'
data:[10,20,30]
}
]
//提示组件（鼠标放在柱状图或折线图上会有提示）
tooltip:{
//提示框文字颜色
textStyle:{
color:'red'
}
}
//系列切换组件（点击显示某一个系列图）
legend:{
data:['柱状图','折线图']
}
})
</script>
Echarts基本概念：坐标系
散点图(scatter)、双坐标（拥有两个y轴）
<div></div>
<script>
let a = document.querySelector('div')
let myecharts = echarts.init(a)
myecharts.setOption({
...
yAxis:[
{
axisLine:{
show:true
},
axisTick:{
show:true
}
},
{
axisLine:{
show:true
},
axisTick:{
show:true
}
}
]
series:[
{
type:'bar'
data:[10,20,30],
//代表当前图标使用第几个y轴
yAxusIndex:0
},
{
type:'pie'
data:[10,20,30]
//代表当前图标使用第几个y轴
yAxusIndex:1
}
]
})
</script>
扫一扫
4234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
