我想知道如何集成G2图表

[ye21st]

这个特性解决了什么问题？

希望能知道如何集成G2图表，我这里会报错。

这个 API 长什么样？

这是我的代码:

<template>
    <div class="leading-4 ml-4 mr-4 border border-solid border-black">
        <nut-row gutter="3" class="month-box">
            <nut-col :span="8" class="inline-block leading-4">
                <div class="flex">
                    2024年01月
                    <IconFont class="leading-4" name="triangle-down"></IconFont>
                </div>
            </nut-col>
        </nut-row>
        <nut-row class="day-box rounded-lg">
            <nut-col :span="12">
                <nut-row>
                    <nut-col :span="24">
                        <span>今日支出</span>
                        <span>108.00</span>
                    </nut-col>
                </nut-row>
                <nut-row>
                    <nut-col :span="12">
                        <span>本月支出</span>
                        <span>1000.00</span>
                    </nut-col>
                    <nut-col :span="12">
                        <span>本月收入</span>
                        <span>1000.00</span>
                    </nut-col>
                </nut-row>
            </nut-col>
            <nut-col :span="12" class="flex">
                <div class="self-center">
                    <div ref="container"></div>
                    <nut-button shape="round" type="info" size="small">
                        查看账单
                    </nut-button>
                </div>
            </nut-col>
            <div id="container"></div>
        </nut-row>
    </div>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro';
import { Chart } from '@antv/g2';
import { onMounted } from 'vue';

onMounted(() => {
    // 准备数据
    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',
    });

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

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

<style lang="scss">
.month-box {
    line-height: 40px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 10px;
}
.chart-container {
    padding: 1rem;
}
</style>

报错图片如下：