> 文档中心 > 【HarmonyOS】【ArkUI】鸿蒙 JS实现饼状图

【HarmonyOS】【ArkUI】鸿蒙 JS实现饼状图

 HarmonyOS JS怎么实现饼状图?

在开发中我们可以参考canvans基本使用

image.png

我们今天实现一个canvas怎么实现饼状图功能,我们从以下几个方面进行实现

1.      代码实现

2.     运行效果

第一步代码实现

1.      hml代码

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:[26,15,12,5,25,17], 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[i]/50*Math.PI;//终止角度      ctx.strokeStyle = "white";      ctx.fillStyle = colors[i];      ctx.arc(0,0,150,start,end);      ctx.fill();      ctx.closePath();      ctx.stroke();      start += nums[i]/50*Math.PI;//起始角度  }     },     //绘制圆饼上的数值      pieNum(nums,ctx,end,colors,start){  for (var i = 0;i < nums.length; i ++){      start = nums[i]/50*Math.PI/2;      ctx.rotate(end+start);//旋转数值      ctx.font = "25px scans-serif";      ctx.fillStyle = "#000";      ctx.fillText(nums[i]+"%",100,0);      end = nums[i]/50*Math.PI/2;  }     }}

第二步运行效果如下

image.png

更多相关学习资料:
https://developer.huawei.com/consumer/cn/forum/topic/0202773634874690369?fid=0101591351254000314?ha_source=zzh