如何使用 ApexCharts 在 Vue.js 中创建带有圆形容器的垂直条形图？

Question

[![图像显示了一个简约的垂直条形图，其中有 7 个垂直方向的“药丸”形条。每个栏包含：

1. 外容器：

   • 浅灰色（#E9EDF7）
   • 全圆端（高边框半径）
   • 全高
   • 宽度约16px

2. 内部填充条：

   • 亮蓝色（#1A75FF）
   • 与容器的圆形风格相匹配
   • 不同的高度代表不同的值
   • 与容器宽度相同
   • 与底部对齐

条形间距均匀，间距约为 20 像素。不显示轴线、标签或网格。第一个条显示的尺寸为 145.58 x 15.91 像素。整体效果干净而现代，每个条形都显示为灰色药丸，底部部分填充蓝色。](https://i.sstatic.net/BOqHlTLz.png)](https://i .sstatic.net/BOqHlTLz.png）

我正在尝试在 Vue.js 中创建一个具有特定设计的垂直条形图：每个条形图应该有一个浅灰色圆形容器，内部有一个蓝色填充条。这就是我想要实现的目标：

[图片描述：有 7 个垂直条的条形图。每个条形都有一个浅灰色 (#E9EDF7) 圆形容器，可延伸到整个高度，内部有一个蓝色 (#1A75FF) 圆形条形显示实际值。这些条形似乎具有显着的边界半径，使它们具有药丸状的形状。]

这是我当前的尝试：

<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 series = ref([
  {
    name: "Value",
    data: [80, 40, 70, 35, 60, 85, 25]
  }
]);

const chartOptions = ref({
  chart: {
    type: "bar",
    toolbar: {
      show: false
    }
  },
  plotOptions: {
    bar: {
      borderRadius: 20,
      columnWidth: "25%"
    }
  },
  grid: {
    show: false
  },
  xaxis: {
    labels: {
      show: false
    }
  },
  yaxis: {
    show: false
  }
});
</script>

但是，我不知道如何：

为每个条创建灰色容器效果 在容器和填充栏上获得适当的圆角 保持条之间的间距一致

我正在使用：

Vue 3 ApexCharts（vue3-apexcharts） 打字稿

有人取得过类似的成就吗？如果您能提供有关如何创建此效果的指导，我将不胜感激。

Answer 1

要设置栏和栏容器颜色，请使用

colors

选项和

plotOptions.bar.colors.backgroundBarColors

选项：

const chartOptions = ref({
  ...
  colors: ['#1A75FF'],
  plotOptions: {
    bar: {
      colors: {
        backgroundBarColors: ['#e7ebf5'],
      }
    }
  },

---

同样，您可以使用选项

plotOptions.bar.borderRadius

和

plotOptions.bar.colors.backgroundBarRadius

:

设置半径

const chartOptions = ref({
  plotOptions: {
    bar: {
      borderRadius: 15,
      colors: {
        backgroundBarRadius: 15,
      }
    }
  },

---

请注意，

borderRadius

需要一个像素值。因此，除非您使用固定宽度，否则必须调整该值以实现均匀的圆角。

执行此操作的一个简单方法是在 updated 事件中。它接收图表对象作为参数，因此您可以轻松检查半径并在必要时更新它：

const updateRadius = (chart) => {
  const barWidth = chart.w.globals.barWidth
  const expectedRadius = 0.5 * barWidth
  const currentRadius = chart.w.config.plotOptions.bar.borderRadius
  
  if (currentRadius !== expectedRadius) { // <--- endless loop if you screw this up
    const optionsUpdate = {
      plotOptions: {
        bar: {
          borderRadius: expectedRadius,
          colors: {
            backgroundBarRadius: expectedRadius,
          }
        }
      }
    }
    chart.updateOptions(optionsUpdate, false, false)
  }
}

这里是游乐场