Vue 3使用vue-chart.js出现createElement is not a function错误如何解决？

云上老周

2026-9-30

错误根因

你当前安装的是仅适配Vue 2的vue-chart.js v4及更低版本，这类版本内部调用了Vue 2专属的全局createElement渲染API，而Vue 3已经彻底移除了该全局API，因此触发类型错误。

修复步骤

首先卸载本地已安装的旧版本依赖

npm uninstall vue-chart.js chart.js
# 若使用yarn则执行
# yarn remove vue-chart.js chart.js

安装适配Vue 3的对应版本，vue-chart.js v5及以上版本才支持Vue 3，需配套安装chart.js v4及以上版本

npm install vue-chart.js@^5 chart.js@^4
# 若使用yarn则执行
# yarn add vue-chart.js@^5 chart.js@^4

正确使用示例

以折线图为例，Vue 3组合式API写法如下：

<template>
  <Line
    :chartData="chartData"
    :options="chartOptions"
  />
</template>

<script setup>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js'
import { Line } from 'vue-chart.js'

// 注册需要用到的图表组件、控制器、插件
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

// 图表数据配置
const chartData = {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
  datasets: [
    {
      label: '访问数据',
      data: [32, 56, 21, 48, 72, 63],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.2
    }
  ]
}

// 图表全局配置
const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: '月度访问量统计'
    }
  }
}
</script>