Vue3+TypeScript（Quasar CLI）如何设置ApexCharts全局默认颜色与主题调色板？

问题根源 #

直接修改Apex.colors不生效，是因为ApexCharts的全局配置必须通过ApexCharts.defaultOptions设置，且要在图表实例化前完成配置。

具体实现步骤 #

1. 创建全局配置文件 #

在src/plugins目录下新建apexcharts.ts，写入全局颜色与主题配置：

import ApexCharts from 'apexcharts'

// 设置全局默认颜色数组
ApexCharts.defaultOptions.colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']

// 配置全局主题
ApexCharts.defaultOptions.theme = {
  mode: 'light', // 切换dark/light模式
  palette: 'palette1', // 使用内置调色板，可选palette1-palette10
  monochrome: {
    enabled: false, // 关闭单色模式
    color: '#255aee'
  }
}

// 可选：注册自定义主题
ApexCharts.registerTheme('custom-dark', {
  colors: ['#1abc9c', '#3498db', '#9b59b6'],
  chart: {
    background: '#2d3748'
  },
  title: {
    style: {
      color: '#f7fafc'
    }
  },
  xaxis: {
    labels: {
      style: {
        color: '#cbd5e0'
      }
    }
  }
})

2. 通过Quasar Boot加载配置 #

在src/boot目录下新建apexcharts.ts，配置Vue插件并加载全局设置：

import { boot } from 'quasar/wrappers'
import '../plugins/apexcharts'
import VueApexCharts from 'vue3-apexcharts'

export default boot(({ app }) => {
  // 注册VueApexCharts组件
  app.use(VueApexCharts)
})

3. 在Quasar配置中注册Boot文件 #

修改quasar.config.ts，将上述boot文件加入注册列表：

export default configure(() => {
  return {
    // ...其他配置项
    boot: [
      'apexcharts' // 添加此行
    ],
    // ...
  }
})

4. 验证配置生效 #

在任意组件中使用ApexCharts，无需重复设置颜色：

<template>
  <apexchart type="line" :options="chartOpts" :series="chartSeries" />
</template>

<script setup lang="ts">
const chartSeries = [
  { name: '访问量', data: [120, 190, 300, 210, 250, 320] },
  { name: '转化率', data: [30, 45, 60, 40, 55, 70] }
]

const chartOpts = {
  title: { text: '全局颜色测试' },
  // 可选：使用自定义主题
  // theme: { name: 'custom-dark' }
}
</script>

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