VUE Introduces Implementation Using G2 Chart
- 2021-11-13 00:20:27
- OfStack
Catalog Introduction to G2 Chart
Use
Use the complete code (histogram) in the template to supplement the world map under 1
Introduction to G2 chart
Use
Use
Use the complete code (histogram) in the template to supplement the world map under 1
Introduction to G2 chart
G2 is a set of visualization engine based on graphics syntax theory, which is data-driven, provides graphics syntax and interactive syntax, and has high usability and extensibility
With G2, you can build various interactive statistical charts using Canvas or SVG in one statement without paying attention to various tedious implementation details of charts
G2 Chart Official Website Address
https://antv.gitee.io/zh
G2 Icon Detailed Development Manual
https://antv-g2.gitee.io/zh/docs/api/general/chart
Use
Step 1: Install the G2 dependency package
npm instal @antv/g2
Step 2: Prepare an DOM container for G2 before drawing
<div id="webInfo"></div>
Step 3: Introduce
import G2 from "@antv/g2";
Step 4: Define in mounted
let chart = null can be defined globally first;
const chart = new G2.Chart({})
chart = new G2.Chart({
container: "webInfo",// Specify the Chart Container
forceFit: true,// Compulsory cooperation
width: 600, // Specify chart width
height: 306,// Height
padding: [20, 30, 30, 50],// Inner margin
})
Step 5: Load the data source
/ Update the chart now /
chart.changeData(chartData)
/ Just update the data, but don't need to update the chart immediately /
chart.source(chartData)
/ Called when a chart needs to be updated /
chart.repaint()
Extended Clear Graphic Syntax
/ Clean up all /
chart.clear();
Use complete code in template (histogram)
<template>
<div id="c1"></div>
</template>
<script>
export default {
name: "spectaculars",
data(){
return{
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:700,
height:600
},
}
},
methods:{
test(){
const data = this.basicColumnChartProp.data;
const chart = new G2.Chart({
container: this.basicColumnChartProp.container,
width : this.basicColumnChartProp.width,
height : this.basicColumnChartProp.height
});
chart.source(data);
chart.interval().position('genre*sold').color('genre')
chart.render();
}
},
mounted() {
this.test();
},
}
</script>
World map under supplement 1
(At the beginning, the project required to find the map of G2, and I felt that something in the API document was not clear. Record 1 here)
<template>
<div id="c1"></div>
</template>
<script>
const DataSet = require('@antv/data-set');
export default {
name: "spectaculars",
data(){
return{
basicColumnChartProp:{
container:'c1',
},
}
},
methods:{
test(){
fetch('src/views/dataCenter/data/world/countries.geo.json')
.then(res => res.json())
.then(mapData => {
const chart = new G2.Chart({
container:this.basicColumnChartProp.container,
forceFit: true,
height:700,
padding: [10,10]
});
chart.tooltip({
showTitle: false
});
// Synchronization measurement
chart.scale({
longitude: {
sync: true
},
latitude: {
sync: true
}
});
chart.axis(false);
chart.legend('trend', {
position: 'left'
});
// Map the background of the world
const ds = new DataSet();
const worldMap = ds.createView('back')
.source(mapData, {
type: 'GeoJSON'
});
const worldMapView = chart.view();
worldMapView.source(worldMap);
worldMapView.tooltip(false);
worldMapView.polygon().position('longitude*latitude').style({
fill: '#fff',
stroke: '#ccc',
lineWidth: 1
});
const userData = [
{ name: 'Russia', value: 86.8 },
{ name: 'China', value: 106.3 },
{ name: 'Japan', value: 94.7 },
{ name: 'Mongolia', value: 98 },
{ name: 'Canada', value: 98.4 },
{ name: 'United Kingdom', value: 97.2 },
{ name: 'United States of America', value: 98.3 },
{ name: 'Brazil', value: 96.7 },
{ name: 'Argentina', value: 95.8 },
{ name: 'Algeria', value: 101.3 },
{ name: 'France', value: 94.8 },
{ name: 'Germany', value: 96.6 },
{ name: 'Ukraine', value: 86.3 },
{ name: 'Egypt', value: 102.1 },
{ name: 'South Africa', value: 101.3 },
{ name: 'India', value: 107.6 },
{ name: 'Australia', value: 99.9 },
{ name: 'Saudi Arabia', value: 130.1 },
{ name: 'Afghanistan', value: 106.5 },
{ name: 'Kazakhstan', value: 93.4 },
{ name: 'Indonesia', value: 101.4 }
];
const userDv = ds.createView()
.source(userData)
.transform({
geoDataView: worldMap,
field: 'name',
type: 'geo.region',
as: [ 'longitude', 'latitude' ]
})
.transform({
type: 'map',
callback: obj => {
// obj.trend = obj.value
obj.trend = (obj.value > 100) ? ' More men ' : ' More women ';
return obj;
}
});
const userView = chart.view();
userView.source(userDv, {
trend: {
alias: ' Every 100 Number of males corresponding to females '
}
});
userView.polygon()
.position('longitude*latitude')
.color('trend', [ '#F51D27', '#0A61D7' ])
.opacity('value')
.tooltip('name*trend')
.animate({
leave: {
animation: 'fadeOut'
}
});
chart.render();
})
},
},
mounted() {
this.test();
},
}
</script>