echarts堆叠条形图显示总值

app.title = '堆叠条形图';

var data1 = [320, 302, 301, 334, 390, 330, 320];

var data2 = [120, 132, 101, 134, 90, 230, 210];

var data3 = function() {

        var datas = [];

        for (var i = 0; i < data1.length; i++) {

            datas.push(data1[i] + data2[i]);

        }

        return datas;

    }();

option = {

    tooltip : {

        trigger: 'axis',

        axisPointer : {            // 坐标轴指示器，坐标轴触发有效

            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

        }

    },

    legend: {

        data: ['直接访问', '邮件营销']

    },

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

    },

    xAxis:  {

        type: 'value',

        max: 600

    },

    yAxis: {

        type: 'category',

        data: ['周一','周二','周三','周四','周五','周六','周日']

    },

    series: [

        {

            name: '直接访问',

            type: 'bar',

            stack: '总量',

            label: {

                normal: {

                    show: true,

                    position: 'insideRight'

                }

            },

            data: data1

        },

        {

            name: '邮件营销',

            type: 'bar',

            stack: '总量',

            label: {

                normal: {

                    show: true,

                    position: 'insideRight'

                }

            },

            data: data2

        },

        {

            name: '总计',

            type: 'bar',

            stack: '总量',

            label: {

                normal: {

                    show: true,

                    position: 'insideLeft',

                    formatter:'{c}',

                    textStyle:{ color:'#000' }

                }

            },

            itemStyle:{

                normal:{

                    color:'rgba(128, 128, 128, 0)'

                }

            },

            data: data3

        }

    ]

};

复制到echarts官网实例中运行即可显示效果：

image

基本思路来了：

一、根据data1和data2算出没周的总值data3

二、series增加显示总数值的堆叠条

三、修改堆叠条样式：背景色和echarts的底色一致，位置为insideLeft居左显示，数字颜色自定义。