vue3引入插件和配置全局属性并引入@AntV/G2

main.js

import { createApp } from 'vue'
import router from './router/index'

import * as G2 from '@antv/g2'//注,需要写成 * as G2 而不是 G2

import App from './App.vue'

const app = createApp(App)

app.use(router)
app.config.globalProperties.$G2 = G2
app.mount('#app')

G2的使用参考文档：

export default {
    name: "g2Demo",
    components: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
        this.initComponent();
    },
    data() {
        return {
            msg: "",
            chart: null,
            data: [{
                    genre: "Sports",
                    sold: 275
                },
                {
                    genre: "Strategy",
                    sold: 115
                },
                {
                    genre: "Action",
                    sold: 120
                },
                {
                    genre: "Shooter",
                    sold: 350
                },
                {
                    genre: "Other",
                    sold: 150
                },
            ],
        };
    },
    // 方法集合
    methods: {
        initComponent() {
            console.log(this.$G2)
            // 此函数为个人习惯,喜欢创建一个初始化的函数
            this.msg = "vue-cli案例";
            const chart = new this.$G2.Chart({
                container: "c1",
                width: 600,
                height: 300,
            });
            chart.source(this.data);
            chart.interval().position("genre*sold").color("genre");
            this.chart = chart;
            this.chart.render();
        },
    },
    // 计算属性
    computed: {},
};