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: {},
};