echarts 堆疊柱狀圖頂部顯示總和

用echarts實現了一個堆疊圖要求能夠在每個柱狀圖上顯示總數,參考了網上的一些辦法,也踩了一些坑

方法一

代碼

series: [{
                    name: n[0],    //完成,
                    type: 'bar',
                    barMaxWidth: 50,    //最大寬度
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],    //未完成
                    type: 'bar',
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#999999'
                        }
                    },
                    data: data2
                },
                {
                    name: '總數',    // 總數顯示,生成一個總數的柱狀圖,將顏色設爲透明,        
                    type: 'bar',     // label將位置設備內部底部,造成一個總數顯示在
                    stack: 'sum',    // 柱狀圖上方的假象
                    label: {
                        normal: {
                            offset: ['50', '80'],
                            show: true,
                            position: 'insideBottom',
                            formatter: '{c}',         // 顯示的總數
                            textStyle: { color: '#000' }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0)'      // 柱狀圖顏色設爲透明
                        }
                    },
                    data: data3
                }
                ]

 

效果如下

有個問題,雖然實現了效果,但是柱狀圖只是透明,而實際上還在,導致了y軸自適應的座標爲最大值的2倍,不是很好

網上找了優化的方法,試了一下,有一定效果但是不知道是不是我的問題,還是有問題,寫出來大家參考一下

優化方法一:該方法會把原先的座標給拉長兩倍,即會有一半的區域是空白的沒有圖像的。比如,原先的總和是100,現在再加上一個100,就是一共200的刻度了。可以使用縮進,使圖表整體向上(橫向則是向右)縮進50%。對應的設置項是

效果如下

可以看到,問題就是雖然縮進了,但是y軸時不閉合的,實現了效果,但是不完美

方法二:

 原理:在原本堆疊的柱狀圖的旁邊,再起一個總和的柱形,顯然這個柱形和原本的柱形的高度是相同的,然後我們將其平移(barGap: '-100%'),使其與原本的柱形重合,這樣,最終的效果就是一個柱形了,高度也不會加倍。

  優化:對於echarts的渲染,我們知道,是根據配置項繪製的canvas,而繪製的順序就是我們代碼書寫的順序。也就是說,如果我們將總和放在後邊,那麼就會是總和的柱形覆蓋原本的柱形,原本柱形的顏色就看不到了。解決辦法有2個:

  1.將總和放在前邊繪製,使用堆疊來覆蓋總和的柱形;

  2.總和在後邊,設置總和的柱形的顏色爲透明(同第一種方法中的設置)。

  除此之外,對於總和文字的顯示,如果我們設置顯示在外部,那麼就可能會出現超出可見區域的現象,處理方法同第一種方案中,調整grid。另外,對於總和的label和原始數據的label,要設置不同的position來避免重疊。如果想要總和看起來明顯一些,可以給總和的柱形添加一個border。對於數據個數比較多又容易出現0導致重疊的問題,可以採用下邊的0不顯示或者如果position已經沒辦法比較重疊時,可以使用拼接換行符、值先按比例放大以擴大圖形爭取到空間,在顯示文字的時候再按同比例縮小以爭取現在來解決。

(參考了博客https://www.cnblogs.com/ljwsyt/p/9963473.html

series: [{
                    name: n[0],//完成,
                    type: 'bar',
                    barMaxWidth: 50,//最大寬度
                    stack: 'sum', 
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],//未完成
                    type: 'bar',
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#999999'
                        }
                    },
                    data: data2
                },
                {
                    name: '總數',       
                    type: 'bar',  
                    barGap: '-100%',         // 左移100%,stack不再與上面兩個在一列
                    label: {                 
                        normal: {
                            show: true,
                            position: 'top',       //  位置設爲top
                            formatter: '{c}',
                            textStyle: { color: '#000' }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0)'    // 仍爲透明
                        }
                    },
                    data: data3
                }
                ]

就是新增一總數列,上面放一個label顯示總數,position設爲top,再左移,由於顏色爲透明,因此不會覆蓋原有的,當然如果放在完成,已完成的前面,顏色可以不爲透明

可以·看到,有效果,但是有個問題是我的x軸不是固定的,柱狀圖寬度會隨着數量多少進行改變,所以需要把柱狀圖設爲固定寬度,所以這種方法也不適合我,當然由於是找的方法,所以我也沒仔細研究,應該可以優化

方法三

series: [{
                    name: n[0],//完成,
                    type: 'bar',
                    barMaxWidth: 50,//最大寬度
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#15c7bd'
                        }
                    },
                    data: data1
                },
                {
                    name: n[1],//未完成
                    type: 'bar',   
                    stack: 'sum',
                    itemStyle: {
                        normal: {
                            color: '#999999'
                        }
                    },
                    data: data2
                },
                {
                    name: '總數',
                    type: 'bar',
                    stack: 'sum',    // 與上面爲一列
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            formatter: '{c}',
                            textStyle: { color: '#000' }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0)'
                        }
                    },
                    data:[["1",0], ["2",0], ["3",0], ["4",0], ["5",0], ["6",0],["7",0], ["8",0], ["9",0], ["10",0],["11",0], ["12",0]]          // 數據默認值爲0
                }
                     ]
// 使用剛指定的配置項和數據顯示圖表。
            var series = option["series"];
            var fun = function (params) {
                var data4 = 0;
                for (var i = 0, l = series.length; i < l; i++) {
                    data4 += series[i].data[params.dataIndex]
                }
                return data4
            }
            //加載頁面時候替換最後一個series的formatter
            series[series.length - 1]["label"]["normal"]["formatter"] = fun

解釋一下,將總數一列所有數據設爲0(根據x軸參數,這裏只是舉例,寫死了各項數據),然後採用function給每一項賦值,替換fomatter,參考博客https://blog.csdn.net/youyuliu/article/details/83017831,詳細看原博客,試過,可行,另一個類似的博客

https://www.cnblogs.com/huaxiaguyuan/p/11097474.html 都可以借鑑

這裏的數據由於項目上的數據是字符串,轉一下就好了,同時我的數據中已經有了總數,所以數據有些對不上,但是方法是可行的

 

方法四

由方法三啓示得來的,既然可以方法四重新賦值,那麼幹脆直接給未完成重新賦值一個label爲總數,去掉總數這一列

用echarts中label的formatter屬性就可以實現了,formatter採用回調函數的格式,有一個參數是params,這是個對象,有一個指向當前數據索引的dataIndex屬性,根據這個屬性可以找到堆積柱狀圖中的數據

 series: [{
            name: n[0],//完成,
            type: 'bar',
            barMaxWidth: 50,//最大寬度
            stack: 'sum',
            itemStyle: {
                normal: {
                    color: '#15c7bd'
                }
            },
            data: data1
        },
        {
            name: n[1],//未完成 
            type: 'bar',
            stack: 'sum',
            label: {
                normal: {       // 重寫未完成label,通過計算屬性重新給formatter賦值,返回
                    show: true,   // 計算的總數
                    position: 'top',
                    formatter: function (params) {
                        return params.value + data1[params.dataIndex]
                    },
                    textStyle: { color: '#000' }
                }
            },
            itemStyle: {
                normal: {
                    color: '#999999'
                }
            },
            data: data2
        }
        ]

效果如下

四種方法,僅供參考,個人感覺方法四較爲便捷

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章