Vue3组合式API下vue-chartjs4如何调用renderChart设置默认配置

vue-chartjs v4 相比v3做了全量API重构，旧版的reactiveProp mixin、renderChart配置覆写逻辑均已移除，新版本内置的图表组件本身已经自带响应式更新能力，不需要额外引入mixin。设置全局默认配置的核心逻辑是合并预设基础配置与外部传入的自定义配置，再将合并后的配置传给图表组件，具体实现如下：

自定义组件完整实现（以Doughnut环形图+Vue3组合式API+TS为例） #

<template>
  <Doughnut :chartData="chartData" :options="mergedOptions" />
</template>

<script lang="ts">
import { computed } from 'vue'
import { Doughnut } from 'vue-chartjs'
import { Chart as ChartJS, registerables, ChartData, ChartOptions } from 'chart.js'

ChartJS.register(...registerables);

export default {
  components: { Doughnut },
  props: {
    // 外部传入的图表数据，必传
    chartData: {
      type: Object as () => ChartData<'doughnut'>,
      required: true
    },
    // 外部传入的自定义配置，可选，默认空对象
    options: {
      type: Object as () => ChartOptions<'doughnut'>,
      default: () => ({})
    }
  },
  setup(props) {
    // 在这里定义所有组件共用的默认配置
    const baseDefaultOptions: ChartOptions<'doughnut'> = {
      responsive: true,
      plugins: {
        legend: {
          position: 'bottom'
        }
        // 其余统一配置项（比如tooltip样式、环形厚度、间距等）都可以写在这里
      }
    }

    // 深度合并默认配置与外部传入配置，外部传入配置优先级更高
    const mergedOptions = computed(() => {
      return deepMerge(baseDefaultOptions, props.options)
    })

    // 简易深度合并方法，若项目已引入lodash可直接用_.merge替代
    function deepMerge(target: Record<string, any>, source: Record<string, any>) {
      const result = { ...target }
      Object.keys(source).forEach(key => {
        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
          result[key] = deepMerge(result[key] || {}, source[key])
        } else {
          result[key] = source[key]
        }
      })
      return result
    }

    return { mergedOptions }
  }
}
</script>

注意事项 #

• 禁止使用浅合并（比如直接写{...baseDefaultOptions, ...props.options}）：plugins、scales这类配置是多层嵌套结构，浅合并会直接覆盖整个嵌套对象，导致默认配置中对应层级的子配置全部丢失
• 合并逻辑保证外部传入配置优先级更高：默认配置只处理通用逻辑，调用组件时如果需要覆盖某一项配置，直接传入对应字段即可，不需要重复传全量配置
• 如果项目中已经引入了lodash等工具库，直接使用内置的merge方法替代手写的深度合并函数即可，兼容性和边界处理更完善

组件调用示例 #

<template>
  <!-- 仅传入图表数据，自动使用全部默认配置 -->
  <CustomDoughnut :chart-data="saleChartData" />

  <!-- 传入部分自定义配置，会自动和默认配置合并，覆盖对应字段 -->
  <CustomDoughnut
    :chart-data="userChartData"
    :options="{
      plugins: {
        legend: { position: 'top' }
      }
    }"
  />
</template>

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