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