Vue3中ApexCharts分类X轴多Y值散点图数据格式问题求助

要实现分类X轴下每个分类对应多个垂直散点的效果，你需要调整数据格式和图表配置，核心是让ApexCharts识别相同分类并将对应数据点聚合到同一轴标签下：

正确配置方案 #

数据格式 #

使用对象数组格式定义数据，每个数据点明确指定x（分类名）和y（数值），支持单系列或多系列（多系列会用不同颜色区分数据点）：

// 单系列示例
const series = [
  {
    name: "数据组",
    data: [
      { x: "cat1", y: 54 },
      { x: "cat1", y: 60 },
      { x: "cat2", y: 66 },
      { x: "cat2", y: 70 },
      { x: "cat3", y: 33 },
      { x: "cat3", y: 40 },
      { x: "cat4", y: 54 },
      { x: "cat4", y: 58 },
    ],
  },
];

// 多系列示例
const series = [
  {
    name: "系列1",
    data: [
      { x: "cat1", y: 54 },
      { x: "cat1", y: 60 },
      { x: "cat2", y: 66 },
    ],
  },
  {
    name: "系列2",
    data: [
      { x: "cat2", y: 70 },
      { x: "cat3", y: 33 },
      { x: "cat3", y: 40 },
      { x: "cat4", y: 54 },
      { x: "cat4", y: 58 },
    ],
  },
];

图表配置 #

在xaxis中明确指定所有分类，设置type: 'category'，并关闭重复标签显示：

const chartOptions = {
  chart: {
    type: "scatter",
  },
  xaxis: {
    type: "category",
    categories: ["cat1", "cat2", "cat3", "cat4"], // 明确列出所有分类
    labels: {
      showDuplicates: false, // 强制不显示重复的分类标签
    },
  },
  yaxis: {
    title: {
      text: "数值",
    },
  },
};

之前方案的问题分析 #

1. 第一种方式：每个数据点单独创建系列，并用NaN填充其他分类位置，这种方式会让ApexCharts将每个系列视为独立数据组，无法在同一分类下聚合多个点，反而会增加不必要的系列数量。
2. 第二种方式：未在xaxis中指定categories，ApexCharts会自动从所有系列的x值中生成轴标签，导致不同系列中相同的分类名被重复渲染。只要明确指定categories并开启showDuplicates: false，就能解决重复标签问题。

Vue3组件完整示例 #

<template>
  <div id="chart">
    <apexchart type="scatter" :options="chartOptions" :series="series" />
  </div>
</template>

<script setup>
import VueApexCharts from "vue3-apexcharts";

const series = [
  {
    name: "数据组",
    data: [
      { x: "cat1", y: 54 },
      { x: "cat1", y: 60 },
      { x: "cat2", y: 66 },
      { x: "cat2", y: 70 },
      { x: "cat3", y: 33 },
      { x: "cat3", y: 40 },
      { x: "cat4", y: 54 },
      { x: "cat4", y: 58 },
    ],
  },
];

const chartOptions = {
  chart: {
    type: "scatter",
    height: 400,
  },
  xaxis: {
    type: "category",
    categories: ["cat1", "cat2", "cat3", "cat4"],
    labels: {
      showDuplicates: false,
    },
    title: {
      text: "分类",
    },
  },
  yaxis: {
    title: {
      text: "Y值",
    },
  },
  markers: {
    size: 6,
  },
};
</script>

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