VueJS 3使用vue-google-charts出现$createElement未定义报错如何解决？

报错原因 #

你遇到的是vue-google-charts版本与Vue版本不兼容问题。你参考的教程基于Vue2编写，对应的vue-google-charts 1.x版本仅支持Vue2，若你当前项目使用Vue3，就会触发$createElement、_self未定义的渲染报错。

解决方案 #

1. 按Vue版本安装对应适配的依赖包

• Vue2项目执行安装命令：
  npm install vue-google-charts@1
• Vue3项目执行安装命令：
  npm install vue-google-charts@latest

2. 正确注册组件

Vue3全局注册（main.js文件）

import { createApp } from 'vue'
import App from './App.vue'
import GChart from 'vue-google-charts'

const app = createApp(App)
app.use(GChart)
app.mount('#app')

单文件组件局部注册

import { GChart } from 'vue-google-charts'

export default {
  components: {
    GChart
  },
  data() {
    return {
      // 饼图数据，第一行为表头
      chartData: [
        ['分类', '数值'],
        ['类别1', 150],
        ['类别2', 230],
        ['类别3', 75]
        // 其余数据项
      ],
      chartOptions: {
        width: 1100,
        height: 400
      }
    }
  }
}

3. 确认数据格式符合要求
   饼图传入的data数组第一行必须是表头定义，后续每一行对应一组分类和数值，符合Google Charts的标准数据规范。

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