在Vue中使用antv的示例代码
(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )
一，在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实现一个6个输入框的验证码输入组件功能的实例代码