堆叠柱状图(每个堆叠柱显示具体的占比)echarts shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:['百度配置项内容和展示

每个堆叠柱显示的不是具体的数字,取而代之的是每个柱的占比。

配置项如下
      app.title = '堆叠柱状图';

option = {
    tooltip : {
        trigger: 'axis',
        formatter: function (params) {
            var relVal = params[0].name;
            var value = 0;
            for (var i = 0, l = params.length; i < l; i++) {
                value += params[i].value;
            }
            for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].seriesName + ' : ' + (100 * parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
            }
            return relVal;
        },
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data:['百度','谷歌','必应','其他']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'百度',
            type:'bar',
            barWidth : 20,
            stack: '搜索引擎',
            data:[620, 732, 701, 734, 1090, 1130, 1120]
        },
        {
            name:'谷歌',
            type:'bar',
            stack: '搜索引擎',
            data:[120, 132, 101, 134, 290, 230, 220]
        },
        {
            name:'必应',
            type:'bar',
            stack: '搜索引擎',
            data:[60, 72, 71, 74, 190, 130, 110]
        },
        {
            name:'其他',
            type:'bar',
            stack: '搜索引擎',
            data:[62, 82, 91, 84, 109, 110, 120]
        }
    ]
};

    
截图如下