HarmonyOS JS 怎麼實現餅狀圖？

在開發中我們可以參考 canvans 基本使用

我們今天實現一個 canvas 怎麼實現餅狀圖功能，我們從以下幾個方面進行實現

1. 程式碼實現

2. 執行效果

第一步程式碼實現

1. html 程式碼

<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:[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;
        }
    }
}
 

第二步執行效果如下