Echarts餅圖中間顯示數值完整教程

Echarts是一個基於JavaScript的開源可視化庫，用於構建互動式的圖表和可視化數據展示界面。其中，餅圖是比較常見的一種圖表，它能夠直觀地展示出各項數據在總量中所佔的比例。而在餅圖中間顯示數值可以進一步提升圖表的可讀性和可視化呈現效果，下面將詳細介紹如何實現這一功能。

一、選取合適的餅圖類型

Echarts提供了多種不同類型的餅圖，包括普通餅圖，環形餅圖，南丁格爾玫瑰圖等。在進行中心數值顯示時，需要選擇一種適合的餅圖類型。下面以普通餅圖為例，具體步驟如下：

// 初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));

// 配置項
var option = {
    title: {
        text: '某站點訪問量統計',
        subtext: '純屬虛構',
        x: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);

二、在餅圖中間顯示數值

為了在餅圖中間顯示數值，需要在series中添加以下代碼：

label: {
    normal: {
        show: true,
        position: 'center',
        formatter: '{b}\n{c}'
    }
}

其中，label是為每個扇形區域添加文本標籤的配置項，normal表示普通的文本樣式，show則代表是否顯示文本。position表示文本的位置，對於餅圖中間顯示數值，需要將其設置為’center’。最後，formatter是文本格式化函數，其中{b}代表數據項名稱（即圖例名稱），{c}代表數據值。同時，在餅圖中心需要添加一個圓形背景，代碼如下：

graphic: [{
    type: 'circle',
    left: 'center',
    top: 'middle',
    shape: {
        cx: 0,
        cy: 0,
        r: 50
    },
    style: {
        stroke: '#ccc',
        fill: '#fff'
    }
}]

其中，graphic是echarts中的圖形組件，用於添加各種繪圖元素。這裡添加了一個圓形背景，left和top分別指定位置居中，shape則指定圓形的屬性，包括圓心坐標和半徑大小。style則指定圓形邊框和背景色。

三、調整餅圖樣式

除了添加餅圖中間的數值顯示外，還可以針對餅圖的樣式進行自定義調整，包括顏色、大小、字體、標籤等。下面以調整餅圖顏色為例，具體代碼如下：

series: [
    {
        name: '訪問來源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
            {value: 335, name: '直接訪問'},
            {value: 310, name: '郵件營銷'},
            {value: 234, name: '聯盟廣告'},
            {value: 135, name: '視頻廣告'},
            {value: 1548, name: '搜索引擎'}
        ],
        itemStyle: {
            normal: {
                color: function (params) {
                    var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                label: {
                    show: true,
                    position: 'center',
                    formatter: '{b}\n{c}'
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

這裡使用了itemStyle來自定義每個扇形區域的樣式，其中normal表示普通狀態下的樣式，color則是扇形的顏色，這裡使用了一個colorList數組來指定多種顏色，每個數值對應一種顏色。同時，label和formatter等屬性與前面相同。

四、總結

通過上述步驟，我們能夠輕鬆地在餅圖中間顯示數值。同時，依據不同的實際需求，我們還可以通過調整標籤樣式、餅圖顏色等方式來自定義圖表樣式，從而更好地展示數據。