如何在ECharts中创建填充圆点的半饼图？解决endAngle异常及点缺失问题

开发者阿泽

2026-7-14

在ECharts中实现目标半环形饼图的解决方案

完全可以实现你要的这种半环形饼图，针对你遇到的标记点缺失和endAngle参数设置错误问题，直接给你可落地的解决思路和代码示例：

一、修正endAngle参数，生成半饼范围

半饼图的核心是控制角度区间：

若要下半圆半饼，设置 startAngle: 180、endAngle: 0
若要上半圆半饼，设置 startAngle: 0、endAngle: 180
默认clockwise为顺时针排布数据，如需逆时针，可设为false。

二、解决标记点缺失问题

标记点消失通常是角度调整后，默认位置计算逻辑不匹配半饼场景，可通过两种方式修复：

绑定数据项生成标记点：在markPoint.data中用valueIndex直接对应数据项，标记点会自动跟随对应数据段显示
手动指定坐标：通过coord属性传入[x,y]坐标，精准控制标记点位置（坐标可根据环形半径和角度计算得出）

完整代码示例

option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '60%'], // 内外半径控制环形宽度
      startAngle: 180,
      endAngle: 0,
      clockwise: true,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 25, name: '分类1' },
        { value: 30, name: '分类2' },
        { value: 20, name: '分类3' },
        { value: 25, name: '分类4' }
      ],
      markPoint: {
        symbol: 'circle',
        symbolSize: 14,
        itemStyle: {
          color: '#fff',
          borderColor: '#333',
          borderWidth: 2
        },
        data: [
          { valueIndex: 0 },
          { valueIndex: 1 },
          { valueIndex: 2 },
          { valueIndex: 3 }
        ]
      }
    }
  ]
};