echarts 堆叠都从底部开始计算

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何实现? 要实现 echarts 堆叠柱状,需要使用 echarts.js 库和一些基本的 HTML、CSS 和 JavaScript 代码。下面是实现 echarts 堆叠柱状的基本步骤: 1. 引入 echarts.js 库。在 HTML 页面头部添加以下代码: ```html <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> ``` 2. 在页面中添加一个容器用于显示柱状。可以使用 div 元素,给它一个 ID,例如: ```html <div id="chartContainer" style="width: 800px; height: 600px;"></div> ``` 3. 编写 JavaScript 代码,创建 echarts 实例,配置图表参数,并将图表绑定到容器上。以下是一个简单的 echarts 堆叠柱状示例代码: ```javascript // 创建 echarts 实例 var chart = echarts.init(document.getElementById('chartContainer')); // 配置图表参数 var option = { title: { text: '堆叠柱状示例' }, tooltip: {}, legend: { data:['数据1', '数据2', '数据3'] }, xAxis: { data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, yAxis: {}, series: [ { name: '数据1', type: 'bar', stack: '总量', data: [10, 20, 30, 40, 50, 60] }, { name: '数据2', type: 'bar', stack: '总量', data: [20, 30, 40, 50, 60, 70] }, { name: '数据3', type: 'bar', stack: '总量', data: [30, 40, 50, 60, 70, 80] } ] }; // 将图表绑定到容器上 chart.setOption(option); ``` 通过以上三个步骤,便可实现 echarts 堆叠柱状。当然,以上代码仅为示例代码,实际使用时需要根据具体需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值