echart堆叠柱形图圆角问题?

Question

echarts里堆叠圆柱体的圆角问题

let option = {
        // title: { text: '示例图表' },
        legend: {
            data: ['当日换课', '请假换课'],
            show:true
        },
        xAxis:
            [
                {
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    type: 'category',
                    axisTick: {show: false},
                    axisLine: {//x轴线的颜色以及宽度
                        show: true,
                        lineStyle: {
                            color: "#e2e1e1",
                            width: 0,
                            type: "solid"
                        }
                    },
                },

            ],

        yAxis: [
            {
                type: 'value',
                axisLine: {//y轴线的颜色以及宽度
                    show: true,
                    lineStyle: {
                        color: "#e2e1e1",
                        width: 0,
                        type: "solid"
                    }
                },
                //interval: 20,
                splitNumber: 5,
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)", // 设置Y轴网格线的颜色为蓝色
                    }},

            }
        ],
        series: [
            {
                data: data1,
                type: 'bar',
                stack: 'x',
                itemStyle: {
                    color: '#f5e725', // 为系列1指定颜色
                },
                label: {
                    show: true, // 开启显示
                    position: 'inside' // 在右侧显示数值标签
                },
            },

            {
                data: data2,
                type: 'bar',
                stack: 'x',
                itemStyle: {
                    color: '#1e6df5', // 为系列2指定颜色
                    normal: {
                        // 设置柱状图顶部和底部的圆角半径
                        barBorderRadius: [5, 5, 0, 0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                    }
                },
                label: {
                    show: true, // 开启显示
                    position: 'inside' // 在右侧显示数值标签
                },
            }
        ]
    };

当上层为0的时候下层不是圆角就不好看了，如何破？

下层调为圆角，并不好看

Answer 1

可以动态地设置下层柱子的圆角，当上层为0时给下层加上圆角，否则就是正常的方形。
具体实现：使用 itemStyle 中的 barBorderRadius 动态处理，例如通过 setOption 之前处理 data1 的样式，修改 series[0]（即下层）的方式如下：

data: data1.map((val, idx) => {
      return {
        value: val,
        itemStyle: {
          barBorderRadius: data2[idx] === 0 ? [5, 5, 0, 0] : [0, 0, 0, 0]
        }
      }
    })

完整代码：

var data1 = [1, 3, 4, 5, 5, 3, 3];
var data2 = [0, 3, 4, 5, 0, 3, 0];
option = {
  // title: { text: '示例图表' },
  legend: {
    data: ['当日换课', '请假换课'],
    show: true
  },
  xAxis: [
    {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      type: 'category',
      axisTick: { show: false },
      axisLine: {
        //x轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#e2e1e1',
          width: 0,
          type: 'solid'
        }
      }
    }
  ],

  yAxis: [
    {
      type: 'value',
      axisLine: {
        //y轴线的颜色以及宽度
        show: true,
        lineStyle: {
          color: '#e2e1e1',
          width: 0,
          type: 'solid'
        }
      },
      //interval: 20,
      splitNumber: 5,
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)' // 设置Y轴网格线的颜色为蓝色
        }
      }
    }
  ],
  series: [
    {
      data: data1.map((val, idx) => {
        return {
          value: val,
          itemStyle: {
            barBorderRadius: data2[idx] === 0 ? [5, 5, 0, 0] : [0, 0, 0, 0]
          }
        };
      }),
      type: 'bar',
      stack: 'x',
      itemStyle: {
        color: '#f5e725'
      },
      label: {
        show: true,
        position: 'inside'
      }
    },
    {
      data: data2.map((val) => ({
        value: val
      })),
      type: 'bar',
      stack: 'x',
      itemStyle: {
        color: '#1e6df5',
        barBorderRadius: [5, 5, 0, 0]
      },
      label: {
        show: true,
        position: 'inside'
      }
    }
  ]
};

Answer 2

把data设置为数组对象,再根据数据对每个柱子进行设置样式,删除统一的itemStyle;

                data: [
                    {
                        value: 20,
                        itemStyle: {
                            color: '#f5e725',
                            normal: {
                                barBorderRadius: 0
                            }
                        }
                    },
                    {
                        value: 30,
                        itemStyle: {
                            color: '#f5e725', // 为系列1指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: 0 // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    },
                    {
                        value: 22,
                        itemStyle: {
                            color: '#f5e725',
                            normal: {
                                barBorderRadius: 0
                            }
                        }
                    },
                    {
                        value: 13,
                        itemStyle: {
                            color: '#f5e725',
                            normal: {
                                barBorderRadius: [5, 5, 0, 0]
                            }
                        }
                    },
                    {
                        value: 29,
                        itemStyle: {
                            color: '#f5e725',
                            normal: {
                                barBorderRadius: [5, 5, 0, 0]
                            }
                        }
                    }
                ],
                type: 'bar',
                stack: 'x',
                // itemStyle: {
                //     color: '#f5e725', // 为系列1指定颜色
                //      normal: {
                //         // 设置柱状图顶部和底部的圆角半径
                //         barBorderRadius: [5, 5, 0, 0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                //     }
                // },
                label: {
                    show: true, // 开启显示
                    position: 'inside' // 在右侧显示数值标签
                },
            },

            {
                // data:  [13,37,12,0,0],
                data: [
                    {
                        value: 13,
                        itemStyle: {
                            color: '#1e6df5', // 为系列2指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: [5,5,0,0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    },
                    {
                        value: 37,
                        itemStyle: {
                            color: '#1e6df5', // 为系列2指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: [5,5,0,0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    },
                    {
                        value: 12,
                        itemStyle: {
                            color: '#1e6df5', // 为系列2指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: [5, 5, 0, 0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    },
                    {
                        value: 0,
                        itemStyle: {
                            color: '#1e6df5', // 为系列2指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: [0,0,0,0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    },
                    {
                        value: 0,
                        itemStyle: {
                            color: '#1e6df5', // 为系列2指定颜色
                            normal: {
                                // 设置柱状图顶部和底部的圆角半径
                                barBorderRadius: [0,0,0,0] // [上左圆角, 上右圆角, 下右圆角, 下左圆角]
                            }
                        }
                    }
                ],