如何在ApexCharts数据标签中使用HTML标签实现自定义布局？

ApexCharts 默认的 dataLabel 确实不支持直接返回 HTML 内容，因为它是基于 SVG 渲染的。要实现你需要的「左侧两行、右侧一行且自适应柱子宽度调整间距」的布局，推荐手动创建 HTML 标签作为自定义数据标签，具体步骤如下：

实现步骤 #

1. 关闭图表默认的 dataLabel，避免冲突
2. 监听图表的 rendered 事件，在每次渲染完成后生成自定义 HTML 标签
3. 计算每个柱子的位置，将自定义标签定位到对应柱子上方
4. 通过 CSS 实现布局，并根据柱子宽度动态调整间距

完整代码示例 #

JavaScript 部分

// 初始化图表
const chart = new ApexCharts(document.querySelector("#chart"), {
  series: [
    {
      name: "销售额",
      data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
    }
  ],
  chart: {
    type: "bar",
    height: 350,
    // 监听渲染完成事件，生成自定义标签
    events: {
      rendered: function() {
        // 先移除旧的自定义标签，避免重复
        document.querySelectorAll('.custom-data-label').forEach(el => el.remove());
        
        const chartContainer = this.el;
        const seriesData = this.w.globals.series[0];
        const chartRect = chartContainer.getBoundingClientRect();
        
        seriesData.forEach((value, index) => {
          // 获取对应柱子的位置和尺寸
          const barElement = chartContainer.querySelector(`.apexcharts-bar-series-0 .apexcharts-bar:nth-child(${index + 1})`);
          if (!barElement) return;
          
          const barRect = barElement.getBoundingClientRect();
          // 计算标签的定位坐标（相对于图表容器）
          const labelLeft = barRect.left - chartRect.left + barRect.width / 2;
          const labelTop = barRect.top - chartRect.top - 30;
          
          // 创建自定义标签容器
          const labelWrap = document.createElement('div');
          labelWrap.className = 'custom-data-label';
          labelWrap.style.position = 'absolute';
          labelWrap.style.left = `${labelLeft}px`;
          labelWrap.style.top = `${labelTop}px`;
          labelWrap.style.transform = 'translateX(-50%)';
          // 根据柱子宽度动态调整左右内容的间距
          labelWrap.style.gap = `${barRect.width * 0.1}px`;
          labelWrap.style.display = 'flex';
          labelWrap.style.alignItems = 'center';
          
          // 左侧两行内容
          const leftText = document.createElement('div');
          leftText.innerHTML = `
            <div>目标：100</div>
            <div>完成率：${Math.round(value/100*100)}%</div>
          `;
          
          // 右侧一行内容（当前数值）
          const rightText = document.createElement('div');
          rightText.textContent = value;
          rightText.style.fontWeight = 'bold';
          rightText.style.color = '#ff4560';
          
          labelWrap.appendChild(leftText);
          labelWrap.appendChild(rightText);
          chartContainer.appendChild(labelWrap);
        });
      }
    }
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: false // 关闭默认数据标签
      }
    }
  },
  xaxis: {
    categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"]
  }
});

chart.render();

CSS 部分

.custom-data-label {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  background: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.custom-data-label div:first-child {
  line-height: 1.4;
}

关键说明 #

• 每次图表渲染（包括窗口 resize、数据更新）都会触发 rendered 事件，确保标签始终和柱子位置匹配
• 通过 barRect.width 动态设置间距，实现自适应柱子宽度的效果
• 自定义标签完全基于 HTML/CSS，你可以自由调整布局、样式，支持所有 HTML 标签

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