技術標籤：d3.js

<template>
    <div></div>
</template>
<script>
    import * as d3 from 'd3';

    export default {
        mounted() {
            let dataList = [30, 10, 43, 55, 13];
            // 將源資料轉換為可以生成餅圖的資料(有起始角度（startAngle）和終止角度（endAngle）)
            let piedata = d3.pie()(dataList);
            // 畫布的引數
            let mapWidth = 300;
            let mapHeight = 300;
            let mapPadding = 20
            // 定義畫布—— 寬 300 高 300 外邊距 10px
            let svgMap = d3.select("div").append('svg').attr("width", mapWidth).attr("height", mapHeight).style("margin", "10px")
            //定義弧形生成器
            let innerRadius = 0;//內半徑，為0則中間沒有空白
            let outerRadius = mapWidth / 2 - mapPadding; //外半徑
            let arc_generator = d3.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
            // 建立分組
            let groups = svgMap.selectAll("g")
                .data(piedata)
                .enter()
                // 新增分組
                .append("g")
                .attr("transform", "translate(" + (mapWidth / 2) + "," + (mapHeight / 2) + ")")
            // 繪製餅圖——新增弧形路徑
            groups.append("path")
            // 給路徑填充不同的顏色
                .attr("fill", function (d, i) {
                    //定義顏色比例尺，讓不同的扇形呈現不同的顏色
                    let colorScale = d3.scaleOrdinal()
                        .domain(d3.range(piedata.length))
                        .range(d3.schemeCategory10);
                    return colorScale(i);
                })
                // 根據餅圖資料，繪製弧形路徑
                .attr("d", function (d) {
                    return arc_generator(d);   //呼叫弧生成器，得到路徑值
                })
            // 新增文字
            groups.append("text")
                .attr("transform", function (d) {//位置設在中心處
                    return "translate(" + arc_generator.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function (d) {
                    return d.data;
                })
        },
    }
</script>
<style scoped>
</style>