echarts 多个进度条合并

最新推荐文章于 2024-06-27 10:31:04 发布

说改就改

最新推荐文章于 2024-06-27 10:31:04 发布

阅读量852

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_42749720/article/details/124665758

版权

一下代码可以直接复制到echarts官网看效果
echarts
关键点：barGap: ‘-100%’
如果想要两个系列的柱子重叠，可以设置 barGap 为 ‘-100%’。这在用柱子做背景的时候有用。

option = {
  xAxis: {
     type: 'value',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'category',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
     barWidth:20,
      itemStyle:{
          normal: {  //normal 图形在默认状态下的样式;
              barBorderRadius: 10,//柱条圆角半径,单位px.
          }
      },
      zlevel:4
    },{
     type: 'bar',
     barWidth:20,
      itemStyle:{
          normal: {  //normal 图形在默认状态下的样式;
              barBorderRadius: 10,//柱条圆角半径,单位px.
          }
      },
     barGap: '-100%',
     data: [130, 210, 180, 80, 90, 110, 140],
      zlevel:3
    },{
     type: 'bar',
     barWidth:20,
      itemStyle:{
          normal: {  //normal 图形在默认状态下的样式;
              barBorderRadius: 10,//柱条圆角半径,单位px.
          }
      },
     barGap: '-100%',
     data: [140, 220, 190, 80, 90, 110, 140],
      zlevel:2
    },{
     type: 'bar',
     barWidth:20,
      itemStyle:{
          normal: {  //normal 图形在默认状态下的样式;
              barBorderRadius: 10,//柱条圆角半径,单位px.
          }
      },
     barGap: '-100%',
     data: [150, 230, 200, 80, 90, 110, 140],
      zlevel:1
    },
    {
    // 这块用于设置圆角的背景色的，因为知道echarts最大值，所以写死了data的值
     type: 'bar',
     barWidth:20,
      itemStyle:{
          normal: {  //normal 图形在默认状态下的样式;
              barBorderRadius: 10,//柱条圆角半径,单位px.
          }
      },
       color: '#cccccc',//柱条颜色
     barGap: '-100%',
     data: [ 250,  250,  250,  250,  250,  250, 250]
    }
  ]
};