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],
           
        }
    ]
};