【ECharts】双柱状图重叠版_echarts 一个x轴多个柱状图怎么bargap-100% 不行-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40571965/article/details/125058993

本文介绍如何使用Echarts创建一种特殊的柱状图堆叠效果，通过设置barGap为'-100%'并利用透明色，使得部分柱状图重叠，形成独特的视觉展示。示例代码中展示了'LifeCost'、'个人得分'等数据的堆叠柱状图与线条图组合，适用于数据可视化场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

主要代码片段

不重叠的关键是设置 barGap: '-100%'

同时利用透明色进行占为，即可实现上面的效果。

series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: { borderColor: 'transparent', color: 'transparent' },
      emphasis: {
        itemStyle: { borderColor: 'transparent', color: 'transparent' }
      },
      data: [6, 6.5, 6, 6, 5.5, 6, 6, 6.5, 6, 6, 5.5]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: { show: false, position: 'inside' },
      data: [2.5, 3, 2.5, 3, 2, 3, 3, 3, 2, 2.5, 2.5],
      itemStyle: {
        normal: {
          color: '#C64F4C',
          label: {
            show: true,
            position: 'inside',
            textStyle: { color: 'black', fontSize: '15px' }
          }
        }
      }
    },
    {
      barGap: '-100%',
      name: '',
      type: 'bar',
      stack: 'avg',
      // show: false,
      itemStyle: { borderColor: 'transparent', color: 'transparent' },
      emphasis: {
        itemStyle: { borderColor: 'transparent', color: 'transparent' }
      },
      data: [7, 7.5, 6.5, 7, 6, 7, 7, 7.5, 6.5, 6.5, 6]
    },

    {
      barGap: '-100%',
      name: '',
      type: 'bar',
      stack: 'avg',
      // show: false,
      data: [1, 1.4, 0.9, 1.5, 1, 1, 1, 1.6, 1, 1, 1.5]
    },
    {
      name: '个人得分',
      type: 'line',
      symbolSize: 8,
      symbol: 'dotted',
      smooth: true,
      itemStyle: {
        normal: { color: '#FFC000', borderColor: '#FF8F00', borderWidth: 2 }
      },
      lineStyle: { width: 2, color: '#FFC000' },
      data: [8, 9, 7, 8, 8, 7.7, 8, 9, 7, 8, 7.7]
    }
  ]