vue-apexchart柱状图X轴类别过多（150个）滚动显示异常求助

针对150个类别的大数据集，外层div包裹无法解决X轴标签拥挤的问题，需利用ApexCharts内置的X轴滚动与优化配置，以下是可行方案：

核心配置修改 #

修改你的chartOptions，重点配置X轴滚动功能与标签优化：

chartOptions: {
    chart: {
      type: "bar",
      height: 350,
      // 可选：启用X轴缩放辅助滚动
      zoom: {
        enabled: true,
        type: 'x',
        autoScaleYaxis: true
      }
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        endingShape: "rounded",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: [], // 你的150个类别数据
      type: 'category', // 指定为类别轴
      scrollbar: {
        enabled: true, // 启用X轴滚动条
        height: 15, // 滚动条高度
        track: {
          background: '#f1f1f1' // 滚动条轨道背景色
        }
      },
      // 可选：旋转标签减少横向拥挤
      labels: {
        rotate: -45,
        rotateAlways: true,
        hideOverlappingLabels: true // 自动隐藏重叠标签
      }
    },
    fill: {
      opacity: 1,
    },
    // 可选：开启tooltip方便查看当前滚动位置的类别
    tooltip: {
      enabled: true,
      shared: true
    }
  },

关键说明 #

• 内置滚动条：通过xaxis.scrollbar.enabled: true启用图表原生X轴滚动，图表仅渲染可视区域内的标签，避免全部拥挤显示。
• 标签优化：labels.rotate旋转标签、hideOverlappingLabels自动隐藏重叠标签，进一步提升可读性。
• 缩放辅助：chart.zoom配置允许用户通过鼠标拖拽缩放X轴，配合滚动条使用更灵活。

额外注意 #

确保Vue-ApexCharts组件容器设置合适宽度（比如width: 100%或固定宽度），让滚动条有足够显示空间。

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