如何在ECharts中创建带圆心的半环形图？

方案1：精准配置itemStyle.borderRadius #

ECharts的borderRadius支持数组格式，可分别设置柱子四个角的圆角半径，格式为[左上, 右上, 右下, 左下]。如果你之前仅设置单个数值，只会让四个角圆角一致，无法实现图中针对性的圆角效果，可按需求调整：

option = {
  xAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3', '类别4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80],
      itemStyle: {
        // 顶部两角圆角、底部两角直角，匹配常见的顶部圆角柱状图需求
        borderRadius: [8, 8, 0, 0],
        color: '#409eff'
      }
    }
  ]
};

若需要底部圆角、顶部直角，将数组改为[0, 0, 8, 8]即可；若要上下全圆角，直接设为8或[8,8,8,8]。

方案2：使用custom系列自定义绘制（复杂场景） #

如果你的需求是更特殊的圆角样式（比如柱子中间段带圆角、不同高度柱子圆角自适应），可以用ECharts的custom系列，通过Canvas API手动绘制柱子：

option = {
  xAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3', '类别4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'custom',
      data: [120, 200, 150, 80],
      renderItem: function (params, api) {
        // 计算柱子的坐标和尺寸
        const xCenter = api.coord([api.value(0), 0])[0];
        const yTop = api.coord([api.value(0), api.value(1)])[1];
        const yBottom = api.coord([api.value(0), 0])[1];
        const barWidth = api.size([1, 0])[0] * 0.8; // 柱子宽度占比，可自行调整

        return {
          type: 'rect',
          shape: {
            x: xCenter - barWidth / 2,
            y: yTop,
            width: barWidth,
            height: yBottom - yTop,
            r: 8 // 统一圆角半径，也可针对不同角单独设置
          },
          style: api.style()
        };
      }
    }
  ]
};

这种方式完全自定义柱子形状，适配各种非常规圆角需求。

排查你之前的失效原因 #

你用itemStyle.borderRadius未达预期，大概率是以下情况：

• 仅设置单个数值，未针对特定角配置数组
• 圆角半径设置过大，超过柱子的高度/宽度，导致显示异常
• 分组柱状图场景下，未给每个系列单独配置borderRadius，或配置层级错误

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