如何在Vue.js中用ApexCharts实现带圆角容器的垂直柱状图？

要实现你需要的胶囊形双层柱状图，核心思路是用两个系列叠加：一个作为灰色背景容器（数据固定为最大值），另一个作为蓝色填充柱（使用实际数据），再通过ApexCharts的配置项调整样式和间距。以下是完整实现代码：

<template>
  <div class="p-4">
    <ClientOnly>
      <apexchart type="bar" :options="chartOptions" :series="series" height="250" />
    </ClientOnly>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 实际业务数据
const actualData = [80, 40, 70, 35, 60, 85, 25];
// 背景容器数据（固定为最大值，确保高度铺满图表）
const backgroundData = actualData.map(() => 100);

const series = ref([
  {
    name: "Background",
    data: backgroundData,
    // 关闭背景系列的交互提示，避免干扰
    tooltip: { enabled: false }
  },
  {
    name: "Value",
    data: actualData
  }
]);

const chartOptions = ref({
  chart: {
    type: "bar",
    toolbar: { show: false },
    // 隐藏图例
    legend: { show: false }
  },
  plotOptions: {
    bar: {
      // 同组内的两层柱子间距设为0，保证完全重合
      barGroupSpacing: 0,
      // 控制柱子宽度（对应需求的16px左右，可根据图表高度调整百分比）
      columnWidth: "25%",
      // 设置胶囊形圆角（值大于柱子宽度的一半即可实现全圆角）
      borderRadius: 20,
      // 保持垂直柱状、底部对齐
      horizontal: false
    }
  },
  // 配置背景和填充柱的颜色
  colors: ["#E9EDF7", "#1A75FF"],
  grid: { show: false },
  xaxis: {
    labels: { show: false },
    axisBorder: { show: false },
    axisTicks: { show: false }
  },
  yaxis: {
    show: false,
    // 锁定y轴范围为0-100，确保背景柱铺满高度
    min: 0,
    max: 100
  },
  // 不需要tooltip则关闭
  tooltip: { enabled: false }
});
</script>

关键配置说明 #

• 灰色容器实现：新增一个数据全为最大值的系列作为底层背景，通过colors配置为浅灰色，同时关闭该系列的交互和提示，避免干扰操作。
• 胶囊形圆角：将borderRadius设为大于柱子宽度一半的值（示例用20），配合columnWidth控制柱子宽度，即可实现两端全圆角的胶囊效果。
• 柱子间距控制：通过barGroupSpacing: 0让同组的两层柱子完全重合，再通过调整columnWidth或图表容器的宽度，就能精准控制柱子间的间距（如果需要固定20px间距，可给图表容器设置固定宽度，比如width: 320px，适配7个16px柱子+6个20px间距的布局）。

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