ECharts堆叠柱状图：仅为最上层柱子设置圆角

我用Apache ECharts制作堆叠柱状图，希望仅为每个分类的最上层柱子设置圆角，而非所有柱子。当前仅为2012系列配置了borderRadius，左侧巴西的2012作为上层柱子已正确显示圆角，但右侧印尼的2012值为undefined，此时最上层的2011系列未应用圆角。请问如何实现自动为任意最上层柱子添加圆角？

当前代码：

option = {
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['country', '2012', '2011'],
    source: [
      { country: 'Brazil', 2011: 70, 2012: 30 },
      { country: 'Indonesia', 2011: 100, 2012: undefined }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: '2011',
      type: 'bar',
      stack: 'years',
      encode: {
        x: 'country',
        y: '2011'
      }
    },
    {
      name: '2012',
      type: 'bar',
      stack: 'years',
      encode: {
        x: 'country',
        y: '2012'
      },
      itemStyle: { borderRadius: [30, 30, 0, 0] }
    }
  ]
};

核心思路是通过动态判断每个分类下的最上层柱子，再针对性应用圆角样式，利用ECharts的itemStyle回调函数即可实现：

实现步骤 #

1. 调整series的顺序为从底层到上层（与dataset维度顺序对应，方便从后往前判断最上层）
2. 编写通用判断逻辑：遍历当前分类下的所有系列，找到存在有效数值（非undefined、非0）的最后一个系列
3. 给每个series的itemStyle绑定该逻辑，匹配到最上层柱子时应用圆角

修改后的代码 #

// 抽离通用判断函数，避免重复代码
function getTopItemStyle(params) {
  const source = params.data;
  const seriesIndex = params.seriesIndex;
  const allSeries = params.series;
  
  let topSeriesIndex = -1;
  // 从后往前遍历，找到当前分类下有有效数值的最后一个系列
  for (let i = allSeries.length - 1; i >= 0; i--) {
    const seriesName = allSeries[i].name;
    const value = source[seriesName];
    if (value !== undefined && value !== 0) {
      topSeriesIndex = i;
      break;
    }
  }
  
  // 匹配到最上层时返回圆角样式，否则返回空对象
  return topSeriesIndex === seriesIndex ? { borderRadius: [30, 30, 0, 0] } : {};
}

option = {
  legend: {},
  tooltip: {},
  dataset: {
    dimensions: ['country', '2011', '2012'], // 调整维度顺序，对应series从底到上
    source: [
      { country: 'Brazil', 2011: 70, 2012: 30 },
      { country: 'Indonesia', 2011: 100, 2012: undefined }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: '2011',
      type: 'bar',
      stack: 'years',
      encode: { x: 'country', y: '2011' },
      itemStyle: getTopItemStyle
    },
    {
      name: '2012',
      type: 'bar',
      stack: 'years',
      encode: { x: 'country', y: '2012' },
      itemStyle: getTopItemStyle
    }
  ]
};

这样无论哪个系列是某分类的最上层（比如印尼的2011），都会自动应用圆角，完美适配数值为undefined或0的情况。

内容的提问来源于stack exchange，提问作者TinyTiger