echarts 横向条形图 对比

横向条形图 对比

先看效果图

代码：需要改动的数据我都提在了最前面；

let yList = ['2月','对比2月'];
let collectingMediaList = [766, 350];
let dealerLists = [134, 31];
let regionalDelivery = [34, 31];

option = {
    title: {
        text: '渠道集客量对比',
        left: 'center',
    },
    legend: {
        x: 'center',
        top:'30',
        data:['集采媒体','经销商','区域投放']
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: yList
    },
    series: [
        {
            name: '集采媒体',
            type: 'bar',
            stack: '总量',
            barWidth: 100, // 宽度
            itemStyle:{
                normal: {
                    color: '#BB0A30'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            z:  10,
            data: collectingMediaList
        } ,
        {
            name: '经销商',
            type: 'bar',
            stack: '总量',
            barWidth: 100,
            itemStyle:{
                normal: {
                    color: '#333333'
                }
            },
            label: {
                // normal: {
                //     show: true,
                //     position: 'insideRight'
                // }
            },
            z:  10,
            data: dealerLists
        } ,
        {
            name: '区域投放',
            type: 'bar',
            stack: '总量',
            barWidth: 100,
            itemStyle:{
                normal: {
                    color: '#808080'
                }
            },
            label: {
                // normal: {
                //     show: true,
                //     position: 'insideRight'
                // }
            },
            z:  10,
            data: regionalDelivery
        } 
    ]
};

可以在这个地址看看具体效果，还可以调试：
https://gallery.echartsjs.com/editor.html?c=x_FX9ve5gO