Echarts中堆疊柱狀圖,顯示總數的方式

今天須要作一個堆疊柱狀圖上顯示總數的統計圖,可是網上找了不少方法,網上提供了一種方式以下:字體

添加一組總數數據,總數須要本身計算好,而後設置顯示柱狀圖的顯示顏色爲圖表的背景色,顯示位置是在"top",字體顏色爲白色#e4e4e4;orm

我照作了,可是有問題,圖下圖所示:blog

代碼以下:it

{
                name: "",    // 總數顯示,生成一個總數的柱狀圖,將顏色設爲透明,        
                type: "bar",     // label將位置設備內部底部,形成一個總數顯示在
                stack: "tatol",    // 柱狀圖上方的假象
                barWidth : 0,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        formatter: function(params){
                            if (params.value > 0) {
                                return params.value;
                            }else {
                                return '';
                            }
                        },         // 顯示的總數
                        textStyle: { color: "#000" }
                    }
                },
                itemStyle: {
                    normal: {
                        color: "rgba(128, 128, 128, 0)"      // 柱狀圖顏色設爲透明
                    }
                },
                data: tatolData
            }io

實際上就是搞了個透明的柱狀圖,全部灰色塊會變寬,並且可見柱狀圖會偏移(透明的柱狀圖是站位的),後來思索,本身想到了一個新的方式,邏輯以下:function

疊加的柱狀圖分爲A,B兩塊,下面的是A,上面的是B,當只有A柱狀圖不爲0時,則顯示在A柱狀圖上,只要B柱狀圖不爲0,則顯示在B柱狀圖上。form

效果圖以下所示:class

代碼以下:方法

series : [
            {
                name:"xx",
                type:"bar",
                stack: "oo",
                data:statisticsA,
                triggerEvent: true,
                barWidth : 30,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        formatter: function(params){
                            var index = params.dataIndex;
                            var val = tatolData[index];
                            if(val == 0)
                            {
                                val = "";
                            }
                            else if(statisticsB[index] > 0)
                            {
                                val = "";
                            }
                            return val;
                        },         // 顯示的總數
                        textStyle: { color: "#000" }
                    }
                },
            },
            {
                name:"xxx",
                type:"bar",
                stack: "oo",
                data:statisticsB,
                triggerEvent: true,
                barWidth : 30,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        formatter: function(params){
                            var index = params.dataIndex;
                            var val = tatolData[index];
                            if(val == 0)
                            {
                                val = "";
                            }
                            else if(statisticsB[index] != 0)
                            {
                            }
                            return val;
                        },         // 顯示的總數
                        textStyle: { color: "#000" }
                    }
                },
            },im

關鍵代碼以下

相關文章
相關標籤/搜索