标签：canvas data ctx let 设置 可视化 100 数据
1.canvas初体验
<!-- canvas画布：是html5中新增特性 -->
<!-- 自带宽度高度 300*150 -->
<!-- 浏览器认为canvas标签是一张图片 -->
<!-- 给canvas画布添加文本内容没有意义，不会显示 -->
<!-- 添加子节点也是没有意义 -->
<!-- 在canvas操作必须用js来完成 -->
<!-- 切记不能通过样式来显示文字 线条，必须通过js -->
<!-- 宽度和高度必须通过canvas标签属性来添加，不能通过样式写 -->
<canvas width="600" height="400"></canvas>
</body>
</html>
<script>
// canvas标签的任何操作务必通过js完成
// 通过js当中‘笔’去完成
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();
ctx.stroke()
2.绘制矩形
<body>
<canvas width="400" height="400"></canvas>
</body>
</html>
<script>
let canvas=document.querySelector('canvas');
let ctx=canvas.getContext('2d');
//绘制矩形第一种方式 参数为x y w h 只能描边
ctx.strokeRect(100,200,100,200);
// 绘制矩形第二种方式 可以填充颜色
// 绘制图形之前设置填充颜色
ctx.fillStyle='cyan'
ctx.fillRect(300,200,100,200)
3.绘制圆形
<body>
<canvas width="600" height="400"></canvas>
</body>
</html>
<script>
let canvas=document.querySelector('canvas');
let ctx=canvas.getContext('2d');
//绘制圆形
ctx.beginPath();
// 绘制圆形的方法：x y r 起始弧度 结束弧度 是否逆时针绘制
ctx.arc(100,100,50,0,2*Math.PI,true);
// 设置填充颜色
ctx.fillStyle='red'
ctx.fill()
// 绘制圆形
ctx.stroke();
4.绘制字体和清除画布
<body>
<canvas width="600" height="400"></canvas>
</body>
</html>
<script>
let canvas=document.querySelector('canvas');
let ctx=canvas.getContext('2d');
ctx.fillRect(100,200,100,200)
// 清除画布
ctx.clearRect(100,200,100,200);
// 设置文字字体
ctx.font='20px 微软雅黑'
// 绘制文字
ctx.fillText('数据可视化',50,20);
5.SVG
创建一条直线
创建折线
创建矩形
创建圆
创建圆和椭圆
创建多边形
通过指定点以及点和点之间的线来创建任意形状
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<!-- svg双闭合标签：默认宽度与高度300*150 svg绘制图片务必在标签内部使用 -->
<svg class="box">
<!-- 绘制直线 x1 y1 第一个点的坐标 x2 y2 第二个点的坐标 -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red" ></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red" ></line>
<!-- 绘制折线 可以多个点，最好带有逗号 -->
<polyline points="300 300,150 150,120 400"></polyline>
<!-- 绘制矩形 fill:设置填充颜色 fill-opacity： 设置透明度 -->
<rect x="400" y="200" width="150" height="50" fill="pink"></rect>
<!-- 绘制圆 -->
<circle cx="70" cy="95" r="50"></circle>
</svg>
6.ECharts入门
<!-- 引入echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<!-- 准备一个容器，就是显示图标的区域 -->
<div></div>
</body>
</html>
<script>
// 基于准备好的dom初始化echarts实例
let dom=document.querySelector('div');
// 创建echarts实例
let mycharts=echarts.init(dom);
// 指定图标的配置项与数据
mycharts.setOption({
// 图标的标题
title:{
// 主标题的设置
text:'数据可视化',
// 子标题
subtext:'echarts的基本使用',
// 主标题的颜色
textStyle:{
color:'cyan'
},
// 设置标题位置
left:'center'
},
// x轴的配置对象
xAxis:{
// 数据
data:['衣服','直播','电影','游戏']
},
//y轴的配置项
yAxis:{
// 显示y轴的线
axisLine:{
show:true,
},
// 显示y轴的刻度
axisTick:{
show:true
}
},
// 系列的设置：绘制什么样类型的图标 数据的展示在这里设置
series:[
{
// 图表类型的设置 bar柱状图 line 折线图 pie饼图
type:'bar',
// 图标的数据
data:[10,20,30,40],
color:'red'
}
]
})
</script>
6.1Echarts新特性 数据集
// 基于准备好的dom初始化echarts实例
let dom=document.querySelector('div');
// 创建echarts实例
let mycharts=echarts.init(dom);
// 数据集
let data=[
['衣服',10,22,'x',10],
['直播',12,55,'y',30],
['电影',16,44,'z',60],
['游戏',19,32,'t',30],
]
// 指定图标的配置项与数据
mycharts.setOption({
// 设置字符集
dataset:{
// 数据源
source:data
},
// 图标的标题
title:{
// 主标题的设置
text:'数据可视化',
// 子标题
subtext:'echarts的基本使用',
// 主标题的颜色
textStyle:{
color:'cyan'
},
// 设置标题位置
left:'center'
},
// x轴的配置对象
xAxis:{
// 数据
// data:['衣服','直播','电影','游戏']
},
//y轴的配置项
yAxis:{
// 显示y轴的线
axisLine:{
show:true,
},
// 显示y轴的刻度
axisTick:{
show:true
}
},
// legend: {
// orient: "vertical",
// left: "left",
// data: ["x", "y", "z", "t"]
// },
// 系列的设置：绘制什么样类型的图标 数据的展示在这里设置
series:[
// 柱状图
{
// 图表类型的设置 bar柱状图 line 折线图 pie饼图
type:'bar',
// 图标的数据
// data:[10,20,30,40],
color:'red',
encode:{
y:1,
}
},
// 折线图
{
type:'line',
// data:[10,20,30,40],
color:'pink',
encode:{
y:2
}
},
// 饼图
{
type:'pie',
encode:{
// 饼图旁边文字用的是谁
itemName:3,
value:4
},
// 饼图你可以显示文字，data写法如下
// data:[{
// name:'x',
// value:10
// },
// {
// name:'y',
// value:20
// },
// {
// name:'z',
// value:30
// },
// {
// name:'t',
// value:40
// }
// ],
// 饼图的宽度高度半径
width:150,
height:150,
left:150,
top:100,
radius:25
},
]
})
6.2Echarts组件
let dom=document.querySelector('.box');
let mycharts=echarts.init(dom);
mycharts.setOption({
dataZoom:{},
title:{
text:'echarts组件'
},
xAxis:{
data:['游戏','电影','直播','娱乐']
},
yAxis:{},
series:[
{
name:'柱状图',
type:'bar',
data:[20,30,40,50]
},
{
name:'折线图',
type:'line',
data:[30,40,50,60]
}
],
// 提示组件
tooltip:{
textStyle:{
color:'red'
}
},
// 系列切换组件
legend:{
data:['柱状图','折线图']
},
// 工具栏组件
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: "none"
},
dataView: {
readOnly: false
},
magicType: {
type: ["line", "bar"]
},
restore: {},
saveAsImage: {}
},
},
// 调整布局
grid: {
left:30,
right:0
},
})
标签：canvas,
data,
ctx,
let,
设置,
可视化,
100,
数据
From： https://www.cnblogs.com/luckily7/p/17222337.html