如何在餅圖中顯示百分比和文字

一、為什麼要在餅圖中顯示百分比和文字

餅圖是一種常用的圖表類型，用於顯示數據的相對大小。在餅圖中，每一塊扇形的大小代表了數據的相對大小，而百分比則提供了更準確的度量方法。同時，如果我們能在餅圖中添加文字，可以更加直觀地顯示數據信息，使得讀者更容易理解和記憶。

二、如何在餅圖中顯示百分比

在餅圖中顯示百分比，可以使用pieChart對象的tooltip屬性。該屬性定義了滑鼠懸停在餅圖上時顯示的提示框內容，我們可以在該屬性中插入百分比文本。

// HTML參數
<div id="chart"></div>

// JavaScript代碼
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A'
            },
            {
                value: 310,
                name: 'B'
            },
            {
                value: 234,
                name: 'C'
            },
            {
                value: 155,
                name: 'D'
            },
            {
                value: 130,
                name: 'E'
            }
        ]
    }],
    tooltip: {
        formatter: '{b}: {c} ({d}%)'
    }
}

chart.setOption(option)

在上述代碼中，我們首先定義了一個id為chart的div元素，用於顯示餅圖。然後使用echarts.init函數初始化圖表對象，並在option對象中設置series屬性和tooltip屬性。在tooltip屬性的formatter屬性中，使用{b}表示扇形名稱，{c}表示數值，{d}%表示百分比，並使用括弧分隔它們。最後使用setOption方法將option中的設置應用到圖表中。

三、如何在餅圖中顯示文字

在餅圖中顯示文字，可以使用pieChart對象的label屬性。該屬性定義了餅圖上各個扇形內的標籤文本，我們可以在該屬性中設置標籤文本。

// HTML參數
<div id="chart"></div>

// JavaScript代碼
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A',
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}:\n{d}%'
                }
            },
            {
                value: 310,
                name: 'B',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 234,
                name: 'C',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 155,
                name: 'D',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            },
            {
                value: 130,
                name: 'E',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{b}'
                }
            }
        ]
    }]
}

chart.setOption(option)

在上述代碼中，我們仍然先定義了一個id為chart的div元素和一個圖表對象chart。然後在option對象中設置series屬性。在series中每一項數據中，我們加入了label屬性，並在其中設置了show屬性顯示標籤，position屬性以inside或outside控制標籤的位置，以及formatter屬性控制標籤內容。通過對不同扇形設置label屬性，我們可以更加豐富地顯示數據信息。

四、其他相關設置

除了上述兩種方式外，我們還可以通過其他設置進行餅圖的優化。例如，如果我們需要強調某一個扇形的大小，我們可以通過設置餅圖的半徑和圓心偏移量實現。

// HTML參數
<div id="chart"></div>

// JavaScript代碼
let chart = echarts.init(document.getElementById('chart'))

let option = {
    series: [{
        type: 'pie',
        data: [
            {
                value: 335,
                name: 'A'
            },
            {
                value: 310,
                name: 'B',
                emphasis: {
                    scale: true
                }
            },
            {
                value: 234,
                name: 'C'
            },
            {
                value: 155,
                name: 'D'
            },
            {
                value: 130,
                name: 'E'
            }
        ],
        radius: ['50%', '70%'], // 控制半徑
        center: ['50%', '50%'], // 控制圓心偏移
    }],
    label: {
        fontSize: 14
    }
}

chart.setOption(option)

在上述代碼中，我們在series中的B數據項中添加了emphasis屬性，其中設置了scale屬性為true。該屬性可以使得滑鼠懸停在扇形上時可以將該扇形放大，以實現突出顯示的效果。同時，我們還設置了餅圖的半徑及圓心偏移，以使得餅圖更加美觀。最後，我們通過設置label的fontSize屬性，控制了標籤的字體大小。

五、總結

在本文中，我們從多個方面對餅圖怎麼顯示百分比和文字進行了詳細的闡述。通過使用tooltip和label屬性，我們可以在餅圖中顯示百分比和文字，並通過其他相關設置進行優化。以上方法既可以使得餅圖更加直觀易懂，也能夠讓數據信息得到更好的展示。