崩溃了唯一的好看的点还被产品移除了

这是根据ui给出来的图写的最难的点在那个圆角数据连接处圆角要与其上数据进行重叠找遍了csdn和稀土掘金都没看到别人怎么实现的问了deepseek200多次断断续续的三天的时间终于把其搞出来了

部分代码如下：

js 复制代码

  option: {
    
    series: [
      // 第二组（2-4堆叠）
      {
        name: '产品B',
        type: 'bar',
        stack: 'group1',
        data: [
          { value: 40, name: '标题1' },
          { value: 40, name: '标题2' },
          { value: 40, name: '标题3' },
          { value: 40, name: '标题4' },
          { value: 40, name: '标题5' },
          { value: 40, name: '标题6' },
        ],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(169, 244, 209, 1)' },
              { offset: 1, color: 'rgba(45, 222, 222, 1)' }
            ]
          },
          borderRadius: [50, 50, 0, 0]
        },
        barWidth: '20%',
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        z: 9
      },
      {
        name: '产品C',
        type: 'bar',
        stack: 'group1',
        data: [
          { value: 30, name: '标题1' },
          { value: 30, name: '标题2' },
          { value: 30, name: '标题3' },
          { value: 30, name: '标题4' },
          { value: 30, name: '标题5' },
          { value: 30, name: '标题6' },
        ],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(115, 216, 226, 1)' },
              { offset: 1, color: 'rgba(73, 127, 237, 1)' }
            ]
          },
          borderColor: 'transparent',
          borderWidth: 0,
          shadowColor: 'rgba(73, 127, 237, 1)',
          shadowOffsetY: 15,
          borderRadius: [50, 50, 0, 0]

        },
        barWidth: '20%',
        z: 8

      },
      {
        name: '产品D',
        type: 'bar',
        stack: 'group1',
        data: [
          { value: 10, name: '标题1' },
          { value: 10, name: '标题2' },
          { value: 10, name: '标题3' },
          { value: 10, name: '标题4' },
          { value: 10, name: '标题5' },
          { value: 10, name: '标题6' },
        ],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(224, 252, 187, 1)' },
              { offset: 1, color: 'rgba(142, 236, 233, 1)' }
            ]
          },
          borderRadius: [50, 50, 0, 0],
          borderColor: 'transparent',
          borderWidth: 0,
          shadowColor: 'rgba(142, 236, 233, 1)',
          shadowOffsetY: 15,
        },
        barWidth: '20%',
        z: 7
      },
    ]
  }

shadowColor: 'rgba(142, 236, 233, 1)', shadowOffsetY: 15, 就这两个实现的类似于box-shadow 两种思路第一让其阴影往上走了一点阴影的颜色与本身最上层的颜色相同第二让其阴影往下走了一点阴影的颜色与本身最下层的颜色相同这样就弥补了圆角连接处产生的间隙但是当其某一数据的值极小连圆角都显示不全的时候就出问题

连圆角都显示不全值太小了于是产品直接说按echarts官网的那种堆叠图做

好吧直接崩溃了白去调研这么久了

崩溃了 唯一的好看的点还被产品移除了

崩溃了唯一的好看的点还被产品移除了