1. Use in vue prototypes
1. Install antv/g2 first
yarn add @antv/g2 --save
2. Hang it into the vue prototype instance
const G2 = require('@antv/g2')
.$G2 = G2
3. It can be used directly in the mounted life cycle in the vue file
<template>
<div>
<div ></div>
</div>
</template>
<script>
export default {
mounted() {
();
},
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.$({
container: "c1",
width: 600,
height: 300
});
();
chart
.interval()
.position("genre*sold")
.color("genre");
= chart;
();
}
}
};
</script>
2. Quote on demand
1. Or install atv/g2
yarn add @antv/g2 --save
2. Directly introduce on demand in components
<template>
<div>
<div ></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() {
()
},
methods: {
initLineChart() {
const chart = new Chart({
container: "l1",
autoFit: true,
height: 500
});
();
({
year: {
range: [0, 1]
},
value: {
min: 0,
nice: true
}
});
({
showCrosshairs: true, // Show Tooltip Assistant shared: true
});
chart
.line()
.position("year*value")
.label("value");
().position("year*value");
();
}
}
};
</script>
<style scoped>
</style>
Sample code
<template>
<div>
<div><h1 style="color: white">{{title}}</h1></div>
<span>
<div ></div>
<div ></div>
</span>
</div>
</template>
<script>
import G2 from '@antv/g2';
export default {
name: "spectaculars",
data(){
return{
title:'Regional goods follow-up board',
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: 'Brazil',
population: 18203
}, {
country: 'Indonesia',
population: 23489
}, {
country: 'USA',
population: 29034
}, {
country: 'India',
population: 104970
}, {
country: 'China',
population: 131744
}
]
}
}
},
methods:{
test:function () {
const data = ;
// Step 1: Create a Chart object const chart = new ({
container: , // Specify the chart container ID width : , // Specify the chart width height : // Specify the chart height });
// Step 2: Loading the data source (data);
// Step 3: Create graphic syntax and draw a bar chart. The graphic position is determined by the two attributes of genre and sold. Genre maps to the x-axis, and sold maps to the y-axis. ().position('genre*sold').color('genre')
// Step 4: Rendering the chart ();
},
basicBarChart:function () {
let data = ;
let chart = new ({
container: ,
width:,
height:
});
(data);
('country', {
label: {
offset: 12
}
});
().transpose();
().position('country*population');
();
}
},
mounted() {
();
();
},
beforeCreate () {
('body').setAttribute('style', 'background:#000000')
},
beforeDestroy () {
('body').removeAttribute('style')
}
}
</script>
<style scoped>
</style>
This is the end of this article about the sample code of using antv in Vue. For more related content on using antv in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!