ECharts堆疊柱狀圖label顯示總和

思路:

將最後一類的label用formatter函數處理爲總和。

option = {
    title: {
        text: '分類銷量(堆疊柱狀圖求和)'
    },
    legend: {
        y: "bottom",
        data: ['百貨', '電子', '服裝']
    },
    xAxis: [{
        type: "category",
        data: [
            20190612,
            20190613,
            20190614,
            20190615
        ]
    }],
    yAxis: [{
        type: "value"
    }],
    series: [{
            name: "百貨",
            type: "bar",
            stack: "1",
            data: [
                10,
                14,
                17,
                8
            ],
            label: {
                show: false,
                position: 'top',
                color: 'black',
                formatter: function(params) {
                    return params.value
                }
            }
        },
        {
            name: "電子",
            type: "bar",
            stack: "1",
            data: [
                1,
                12,
                9,
                22
            ],
            label: {
                show: false,
                position: 'top',
                color: 'black',
                formatter: function(params) {
                    return params.value
                }
            }
        },
        {
            name: "服裝",
            type: "bar",
            stack: "1",
            data: [
                1,
                8,
                13,
                20
            ],
            label: {
                show: true,
                position: 'top',
                color: 'black',
                formatter: function(params) {
                    return params.value
                }
            }
        }
    ]
}
////求和
var series = option["series"];
var fun = function(params) {
    var datavalue = 0;
    for (var i = 0; i < series.length; i++) {
        datavalue += series[i].data[params.dataIndex]
    }
    return datavalue;
}

if(series[series.length - 1]){
  series[series.length - 1]["label"]["formatter"] = fun;  
}

//點擊圖例求和,沒開啓的可以忽略下面代碼
myChart.on("legendselectchanged", function(obj) {
    var b = obj.selected,
        d = [];
    for (var key in b) {
        if (b[key]) {
            for (var i = 0, l = series.length; i < l; i++) {
                var changename = series[i]["name"];
                if (changename == key) {
                    d.push(i);
                }
            }
        }
    }
    var fun = function(params) {
        var datavalue = 0;
        for (var i = 0; i < d.length; i++) {
            for (var j = 0; j < series.length; j++) {
                if (d[i] == j) {
                    datavalue += series[j].data[params.dataIndex]
                }
            }
        }
        return datavalue
    }
    for (var i = 0; i < series.length; i++) {
        series[i]["label"]["show"] = false;
    }
    for (var i = series.length - 1; i >= 0; i--) {
        var name = series[i]["name"];
        if (obj["selected"][name]) {
            series[i]["label"]["formatter"] = fun
            series[i]["label"]["show"] = true
            break;
        }
    }
    myChart.setOption(option);
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章