在Vue中使用antv的示例代码
作者：sxuan
这篇文章主要介绍了在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>
import { Chart } from "@antv/g2";
export default {
data() {
return {
year: [
{ year: "1991", value: 3 },
{ year: "1992", value: 4 },
{ year: "1993", value: 3.5 },
{ year: "1994", value: 5 },
{ year: "1995", value: 4.9 },
{ year: "1996", value: 6 },
{ year: "1997", value: 7 },
{ year: "1998", value: 9 },
{ year: "1999", value: 13 }
]
};
},
mounted() {
this.initLineChart()
},
methods: {
initLineChart() {
const chart = new Chart({
container: "l1",
autoFit: true,
height: 500
});
chart.data(this.year);
chart.scale({
year: {
range: [0, 1]
},
value: {
min: 0,
nice: true
}
});
chart.tooltip({
showCrosshairs: true, // 展示 Tooltip 辅助线
shared: true
});
chart
.line()
.position("year*value")
.label("value");
chart.point().position("year*value");
chart.render();
}
}
};
</script>
<style scoped>
</style>
示例代码
<template>
<div>
<div><h1 style="color: white">{{title}}</h1></div>
<span>
<div id="c1"></div>
<div id="mountNode"></div>
</span>
</div>
</template>
<script>
import G2 from '@antv/g2';
export default {
name: "spectaculars",
data(){
return{
title:'地区货品跟进看板',
basicColumnChartProp:{
data:[{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }],
container:'c1',
width:600,
height:300
},
basicBarChartProp:{
container:'mountNode',
size:{'width':500,'height':300},
data:[
{
country: '巴西',
population: 18203
}, {
country: '印尼',
population: 23489
}, {
country: '美国',
population: 29034
}, {
country: '印度',
population: 104970
}, {
country: '中国',
population: 131744
}
]
}
}
},
methods:{
test:function () {
const data = this.basicColumnChartProp.data;
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: this.basicColumnChartProp.container, // 指定图表容器 ID
width : this.basicColumnChartProp.width, // 指定图表宽度
height : this.basicColumnChartProp.height // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();
},
basicBarChart:function () {
let data = this.basicBarChartProp.data;
let chart = new G2.Chart({
container: this.basicBarChartProp.container,
width:this.basicBarChartProp.size.width,
height:this.basicBarChartProp.size.height
});
chart.source(data);
chart.axis('country', {
label: {
offset: 12
}
});
chart.coord().transpose();
chart.interval().position('country*population');
chart.render();
}
},
mounted() {
this.test();
this.basicBarChart();
},
beforeCreate () {
document.querySelector('body').setAttribute('style', 'background:#000000')
},
beforeDestroy () {
document.querySelector('body').removeAttribute('style')
}
}
</script>
<style scoped>
</style>
到此这篇关于在Vue中使用antv的示例代码的文章就介绍到这了,更多相关Vue中使用antv内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！