echarts 柱状堆叠图 通过stack属性控制

 

 

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    legend: {
        data: ['百度', '谷歌', '折线'],
        icon:"react",  // 设置legend的图标样式
        top:"bottom",  // 设置legend的位置
        itemGap:40  // 设置legend之间的间距
        
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: { //设置指示器类型
                type: 'shadow'
            },
            axisTick:{show:false},
            axisLine:{
                lineStyle:{
                    width:2
                }
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            max:350,
            interval: 50,
            axisLine:{   // 是否显示轴线
                show:false,
            },
            axisTick:{ // 是否显示刻度
                show:false
            },
           
        },
        {
            type: 'value',
            min: 0,
            max: 0.35,
            interval: 0.05,
            axisLabel: {
                formatter: '{value}%'
            },
            axisLine:{
                show:false
            },
            axisTick:{
                show:false
            }
        }
    ],
    series: [
        {
            name: '百度',
            type: 'bar',
            stack:"总量",  // 数据堆叠，必须添加相同的stack属性
            data: [50, 60, 40, 50, 80, 120, 135, 200, 300, 180, 320, 200],
            itemStyle:{
                color:"#277eab"
            }
            
        },
        {
            name: '谷歌',
            type: 'bar',
            stack:"总量",
            data: [30, 20, 9, 26, 28, 70, 175, 90, 48, 18, 6, 30],
            itemStyle:{
                color:"#8bb4fb"
            }
        },
        {
            name: '折线',
            type: 'line',
            smooth:true,
            symbol: 'circle',     //设定为实心点
            symbolSize: 10,   //设定实心点的大小
            data: [50, 120, 80, 120, 150, 200, 180, 300, 340, 300, 260,240],
           
        }
    ]
};