echarts 堆叠都从底部开始计算

- 日理万妓 2022-12-09 02:00 150阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]  
option的值

var colors = ['#5793f3', '#d14a61', '#675bba'];
    
    option = { 
        color: colors,
    
        tooltip: { 
            trigger: 'axis',
            axisPointer: { 
                type: 'cross'
            }
        },
        grid: { 
            right: '20%'
        },
      
        xAxis: 
            { 
                type: 'category',
                axisTick: { 
                    alignWithLabel:true
                },
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
            }
        ,
        yAxis: [
            { 
                type: 'value',
                position: 'left',
                min:0,
                axisLine: { 
                    show: false
                },
                axisLabel: { 
                    formatter: '{value}'
                },
                axisTick: { 
                    show: false
                },
                splitArea: { show: false}
            }
        ],
        series: [
            { 
                name: '蒸发量',
                type: 'bar',
                barMaxWidth:"20",
                barGap: "-100%",
                itemStyle:{ 
                  color:"#2C9DFF",
                  barBorderRadius:[0,0,10,10]
                },
                label:{ 
                  show:true,
                  position:"insideTop"
                },
                z:10,
                data: [99,150,100,20,20,10,15,23,30,60]
            },
            { 
                name: '总数',
                type: 'bar',
                barMaxWidth:"20",
                itemStyle:{ 
                 barBorderRadius:[10,10,0,0],
                 color:"#E7E7E7",
                },
                label:{ 
                  show:true,
                  position:"top",
                  color:"#000"
                },
                data: [100,200,500,100,100,150,600,150,130,175]
            },
           
        ]
    };

重点属性

barGap: "-100%",
     z:10,

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/60bf98507a1b45e2a4d36e1d0859ee6f.png