如何用ApexCharts实现带自定义指示器与圆弧圆角的半环形图？

你的需求完全可以通过ApexCharts实现，以下是针对两个核心要求的具体实现思路和修改后的代码：

一、实现圆弧圆角边缘 #

ApexCharts的饼图（含donut类型）内置了borderRadius配置项，直接在plotOptions.pie中设置即可实现圆弧的圆角边缘：

plotOptions: {
  pie: {
    startAngle: -90,
    endAngle: 90,
    offsetY: 10,
    borderRadius: 12 // 数值越大，圆角效果越明显，可按需调整
  }
}

二、添加自定义指示器 #

自定义指示器可以通过ApexCharts的Annotations功能实现，支持绘制线条、圆点、文本等元素；如果需要更复杂的样式，也可以在图表容器上叠加独立的HTML元素（灵活性更高）。

完整示例代码 #

结合你的基础代码，修改后的完整实现如下：

<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
var options = {
  series: [65, 35], // 调整为「目标值+剩余值」结构，适配半环形指示器场景
  chart: {
    type: "donut",
    height: 300
  },
  plotOptions: {
    pie: {
      startAngle: -90,
      endAngle: 90,
      offsetY: 10,
      borderRadius: 12, // 圆角边缘配置
      donut: {
        size: '70%' // 控制环形的宽度
      }
    }
  },
  annotations: {
    position: 'absolute',
    xaxis: [{
      x: 50,
      y: 50,
      marker: {
        size: 8,
        fillColor: '#fff',
        strokeColor: '#00E396',
        strokeWidth: 2
      },
      label: {
        text: '65%', // 自定义指示器显示的数值
        style: {
          fontSize: '24px',
          fontWeight: 'bold',
          color: '#333'
        },
        offsetY: 20
      }
    }],
    lines: [{
      x1: 50,
      y1: 50,
      x2: 50,
      y2: 75,
      strokeColor: '#00E396',
      strokeWidth: 2
    }]
  },
  grid: {
    padding: {
      bottom: -80
    }
  },
  colors: ['#00E396', '#EBEFF2'], // 自定义环形的填充色与底色
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        }
      }
    }
  ],
  legend: {
    show: false // 隐藏默认图例，适配指示器场景
  },
  dataLabels: {
    enabled: false // 隐藏默认数据标签
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>

代码说明 #

1. 圆角边缘：通过plotOptions.pie.borderRadius直接设置，数值可根据视觉需求灵活调整
2. 自定义指示器：
   • 用annotations.lines绘制指示器的竖线
   • 用annotations.xaxis.marker绘制指示器的圆点
   • 用annotations.xaxis.label显示当前数值
   • 如果需要更复杂的样式（如带背景的文本、图标），可在#chart容器内添加独立HTML元素，通过绝对定位调整位置
3. 半环形适配：将series调整为「目标值+剩余值」的结构，配合donut.size控制环形宽度，隐藏默认图例和数据标签，更贴合指示器的视觉效果

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