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

关键代码以下

相关文章
相关标签/搜索