echarts 堆叠都从底部开始计算

最新推荐文章于 2024-12-23 23:34:11 发布

hjy170314

最新推荐文章于 2024-12-23 23:34:11 发布

阅读量838

点赞数

本文链接：https://blog.youkuaiyun.com/hjy170314/article/details/108706538

版权

前端知识专栏收录该内容

104 篇文章

订阅专栏

效果图
在这里插入图片描述
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,