为什么在vue3当中引入Antv/g2失败？(标签-npm|关键词-char)

在vue3当中引入Antv/g2失败。vite构建工具版本4.4.5。
首先我安装了
npm install @antv/g2
然后在组件当中粘贴上了官方的代码

<template>

<div id="c1" ></div>

</template>

<script setup  lang="ts">
import { Chart } from '@antv/g2';

// 准备数据
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 初始化图表实例
const chart = new Chart({
  container: 'container',
  theme: 'classic',
});

// 声明可视化
chart
  .interval() // 创建一个 Interval 标记
  .data(data) // 绑定数据
  .encode('x', 'genre') // 编码 x 通道
  .encode('y', 'sold'); // 编码 y 通道

// 渲染可视化
chart.render();
</script>
<style>
</style>

父组件app中是

<template>
<antv></antv>
</template>

<script setup lang="ts">

import antv from './components/antv.vue'

</script>
<style scoped>
</style>

结果却是空白页。vscode报错如下

img

控制台报错如下

img

根据控制台的报错找到这个答案https://blog.csdn.net/qq_50276105/article/details/128972733?spm=1001.2014.3001.5506

img


我直接把antv放到挂载后生命周期钩子里面了，这样就可以使用DOM了。
结果如下：

img

这个博客应该可以解决你的问题：


里面的解决方案是：

import * as G2 from '@antv/g2'