如何在ECharts中制作圆点填充的饼图并添加上下蓝色半圆？

1. 将圆点改为带圆角的拉伸矩形 #

放弃饼图系列，改用散点（scatter）系列实现带圆角的矩形：

• 配置symbol: 'rect'指定图形为矩形
• 通过symbolSize: [宽度, 高度]设置拉伸尺寸，比如[40, 20]就能得到宽高比2:1的矩形
• 用symbolRadius设置圆角半径，若半径等于高度的一半（比如10），就能得到两端半圆的矩形效果
• 手动计算每个矩形的x、y坐标，确保它们在同一水平线上均匀排列

核心配置片段：

option = {
  xAxis: { show: false },
  yAxis: { show: false },
  series: [{
    type: 'scatter',
    data: [
      // 示例数据，每个元素为[x坐标, y坐标]，y统一设为中间值
      [100, 50], [150, 50], [200, 50], [250, 50]
    ],
    symbol: 'rect',
    symbolSize: [40, 20],
    symbolRadius: 10,
    itemStyle: {
      color: '#666', // 自定义填充色
      borderWidth: 0
    }
  }]
};

2. 添加上下蓝色半圆 #

用ECharts的graphic组件绘制自定义扇形来实现半圆：

• 上半圆：设置起始角度为180°（π弧度）、结束角度为360°（2π弧度），圆心定位在图表水平中心，y轴位置设为顶部附近
• 下半圆：设置起始角度为0°、结束角度为180°（π弧度），圆心同样在水平中心，y轴位置设为底部附近
• 调整半圆半径，使其和中间矩形的高度匹配，保证视觉衔接自然

核心配置片段：

option = {
  // ... 其他配置
  graphic: [
    // 上蓝色半圆
    {
      type: 'sector',
      shape: {
        cx: '50%', // 水平居中
        cy: 35, // 上半圆y坐标，根据矩形高度调整
        r: 25, // 半径，略大于矩形高度的一半
        startAngle: Math.PI,
        endAngle: Math.PI * 2
      },
      style: {
        fill: '#1890ff'
      }
    },
    // 下蓝色半圆
    {
      type: 'sector',
      shape: {
        cx: '50%',
        cy: 65, // 下半圆y坐标，根据矩形高度调整
        r: 25,
        startAngle: 0,
        endAngle: Math.PI
      },
      style: {
        fill: '#1890ff'
      }
    }
  ]
};

3. 收尾调整 #

• 隐藏图表的网格、坐标轴刻度等无关元素
• 调整图表的grid配置，让内容居中显示
• 统一颜色和尺寸参数，保证整体视觉协调

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