技術標籤：echartsecharts

遇到一個需求：柱狀堆疊圖除了每個“柱”內部顯示資料，還要在每個“柱”上方顯示總數。類似下圖：

解決：堆疊圖新增一個總數的“柱”，此“柱”的對應data全置為0，則不會顯示總數的堆疊圖，再使用label的formatter顯示計算出的資料總數。

基本程式碼：

...
const totalStackBar = {
    name: '',
    type: 'bar',
    stack: 'stack',
    itemStyle: {
        normal:{
            label: {
                show: true,
                position: 'top' //資料顯示在上方
            }
        }
    }
}
....
//獲取到stack1 和 stack2的值後
totalStackBar.itemStyle.normal.label.formatter = (param) => {
    const data = stack1[param.dataIndex] + stack2[param.dataIndex];
    return data;
}
this.option.series.push(totalStackBar);
....