【HarmonyOS】【ArkUI】研究了半天，鸿蒙 JS实现饼状图终于成功啦！分享一下
HarmonyOS JS怎么实现饼状图？在开发中我们可以参考canvans基本使用
我们今天实现一个canvas怎么实现饼状图功能，我们从以下几个方面进行实现
1. 代码实现
2. 运行效果
第一步代码实现
1. hml代码
<div class="container">
<canvas ref="canvas1" style="width: 400px; height: 400px; background-color: #ffff00;"></canvas>
</div> 2. css代码实现
.container {
display: flex;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
flex-direction: column;
} 3. js代码实现
export default {
data: {
title: 'World',
nums:,
colors:["#983335","#77963f","#5d437c","#35859f","#d1702f","#365e96"],
start:0,
end:0
},
onShow(){
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.translate(200,200);
ctx.rotate(-Math.PI/6);//旋转一定角度更加自然
this. pieChart(this.nums,ctx,this.end,this.colors,this.start);
this. pieNum(this.nums,ctx,this.end,this.colors,this.start);
},
//绘制圆饼
pieChart(nums,ctx,end,colors,start){
for (var i = 0;i < nums.length; i ++){
ctx.beginPath();
ctx.moveTo(0,0);
end += nums/50*Math.PI;//终止角度
ctx.strokeStyle = "white";
ctx.fillStyle = colors;
ctx.arc(0,0,150,start,end);
ctx.fill();
ctx.closePath();
ctx.stroke();
start += nums/50*Math.PI;//起始角度
}
},
//绘制圆饼上的数值
pieNum(nums,ctx,end,colors,start){
for (var i = 0;i < nums.length; i ++){
start = nums/50*Math.PI/2;
ctx.rotate(end+start);//旋转数值
ctx.font = "25px scans-serif";
ctx.fillStyle = "#000";
ctx.fillText(nums+"%",100,0);
end = nums/50*Math.PI/2;
}
}
}
第二步运行效果如下
https://my.oschina.net/u/4478396/blog/5482866
页:
[1]