在在Vue中使用中使用antv的示例代码的示例代码
主要介绍了在Vue中使用antv的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定
的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一,在vue原型中使用
1.首先安装antv/g2
yarn add @antv/g2 --save
2.在main.js中挂在到vue原型实例中
const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2
3.在vue文件中可以直接在mounted生命周期中直接使用
<template>
<div>
<div id="c1"></div>
</div>
</template>
<script>
export default {
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() {
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();
}
}
};
</script>
二,按需引用二,按需引用
1.还是安装atv/g2
yarn add @antv/g2 --save
2.直接在组件中按需引入
<template>
<div>
<div id="l1"></div>
</div>
</template>
<script>
评论0