在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报错如下
控制台报错如下