如何在Apache Echarts堆叠柱状图上添加自定义标记点？

当然可以实现，无需自定义图表，直接用ECharts内置的graphic组件就能在图表任意位置添加自定义标记点，完全兼容堆叠柱状图。

核心实现思路 #

graphic组件是ECharts专门用于添加自定义图形元素的模块，支持圆形、矩形、文本等多种图形，可精准绑定到图表的笛卡尔坐标系，自动计算标记点的位置。

具体配置示例 #

假设你已有堆叠柱状图的基础配置，只需在option中添加graphic字段即可：

option = {
  // 原有堆叠柱状图的配置（xAxis、yAxis、series等）
  xAxis: {
    type: 'category',
    data: ['类别A', '类别B', '类别C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      stack: '总量',
      data: [30, 40, 50]
    },
    {
      name: '系列2',
      type: 'bar',
      stack: '总量',
      data: [20, 30, 10]
    }
  ],
  // 添加自定义标记点
  graphic: [
    {
      type: 'circle',
      // 绑定到笛卡尔坐标系
      coordinateSystem: 'cartesian2d',
      // 使用第一个x轴和y轴
      xIndex: 0,
      yIndex: 0,
      // 标记点对应的x轴类目和y轴数值
      value: ['类别A', 50],
      // 标记点样式
      style: {
        r: 6, // 圆点半径
        fill: '#ff4d4f', // 填充色
        stroke: '#fff', // 边框色
        lineWidth: 2 // 边框宽度
      }
    }
  ]
};

关键配置说明 #

• coordinateSystem: 'cartesian2d'：将标记点绑定到柱状图的笛卡尔坐标系，避免手动计算像素位置
• value: ['类别A', 50]：直接指定标记点对应的x轴类目和y轴数值，ECharts会自动转换为图表内的坐标
• style字段：可自定义圆点的大小、颜色、边框等样式，完全满足个性化需求

扩展场景 #

如果需要添加多个标记点，只需在graphic数组中添加多个对象即可；若标记点位置需要随数据动态变化，可通过JavaScript逻辑生成graphic配置项，无需修改原有图表的series配置。

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