VueJS中基于ApexCharts创建可复用堆叠柱状图组件遇错求助

错误原因分析 #

1. 未导入ApexChart组件：模板中使用<apexchart>但未在组件内导入vue3-apexcharts，导致组件无法正确初始化。
2. 响应式数据绑定错误：原代码中series和chartOptions仅存在于computed返回的对象中，未直接暴露给模板，导致模板引用的变量为undefined，触发ApexCharts初始化时读取options.chart.type失败的报错。
3. 数据硬编码不可复用：原组件将数据和配置硬编码在内部，无法通过父组件传入动态数据，不满足可复用需求。

最终可复用组件代码 #

<template>
  <div class="stacked-bar-chart">
    <apexchart
      :width="width"
      :height="height"
      type="bar"
      :options="chartOptions"
      :series="series"
    />
  </div>
</template>

<script setup>
/* eslint-disable */
import { computed } from "vue";
import ApexChart from "vue3-apexcharts"; // 必须导入组件

// 定义可复用Props，支持父组件传入动态数据
const props = defineProps({
  width: {
    type: [Number, String],
    default: "auto",
  },
  height: {
    type: [Number, String],
    default: 350,
  },
  // 核心系列数据，格式与ApexCharts要求一致
  series: {
    type: Array,
    required: true,
  },
  // X轴分类数据
  categories: {
    type: Array,
    required: true,
  },
  // 图表标题
  title: {
    type: String,
    default: "Stacked Bar Chart",
  },
  // 是否使用水平堆叠布局
  isHorizontal: {
    type: Boolean,
    default: true,
  },
});

// 动态生成图表配置，基于Props响应式更新
const chartOptions = computed(() => ({
  chart: {
    type: "bar",
    height: props.height,
    stacked: true,
  },
  plotOptions: {
    bar: {
      horizontal: props.isHorizontal,
      dataLabels: {
        total: {
          enabled: true,
          offsetX: 0,
          style: {
            fontSize: "13px",
            fontWeight: 900,
          },
        },
      },
    },
  },
  stroke: {
    width: 1,
    colors: ["#fff"],
  },
  title: {
    text: props.title,
  },
  xaxis: {
    categories: props.categories,
    labels: {
      formatter: (val) => `${val}K`,
    },
  },
  yaxis: {
    title: {
      text: undefined,
    },
  },
  tooltip: {
    y: {
      formatter: (val) => `${val}K`,
    },
  },
  fill: {
    opacity: 1,
  },
  legend: {
    position: "top",
    horizontalAlign: "left",
    offsetX: 40,
  },
}));
</script>

<style scoped>
.stacked-bar-chart {
  width: 100%;
}
</style>

父组件调用示例 #

<template>
  <StackedBarChart
    :width="800"
    :height="500"
    :series="chartSeries"
    :categories="chartCategories"
    title="Fiction Books Sales"
  />
</template>

<script setup>
import StackedBarChart from "@/components/apex-charts/StackedBarChart.vue";

// 父组件定义数据，可从接口获取或静态定义
const chartSeries = [
  { name: 'Marine Sprite', data: [44, 55, 41, 37, 22, 43, 21] },
  { name: 'Striking Calf', data: [53, 32, 33, 52, 13, 43, 32] },
  { name: 'Tank Picture', data: [12, 17, 11, 9, 15, 11, 20] },
  { name: 'Bucket Slope', data: [9, 7, 5, 8, 6, 9, 4] },
  { name: 'Reborn Kid', data: [25, 12, 19, 32, 25, 24, 10] }
];

const chartCategories = [2008, 2009, 2010, 2011, 2012, 2013, 2014];
</script>

内容的提问来源于stack exchange，提问作者Robinho de Morais