About G2 Chart G2 is a visualization engine based on the theory of graphic grammar. It is data-driven, provides graphic grammar and interactive grammar, and is highly easy to use and extensible. With G2, you don't need to pay attention to the cumbersome implementation details of the chart. You can use Canvas or SVG to build a variety of interactive statistical charts with one statement. G2 Charts official website address G2 Icon Detailed Development Manual use Step 1: Install G2 dependency packages npm install @antv/g2 Step 2: Prepare a DOM container for G2 before drawing <div id="webInfo"></div> Step 3: Import import G2 from "@antv/g2"; Step 4: Define in mounted You can first define let chart = null globally; const chart = new G2.Chart({}) chart = new G2.Chart({ container: "webInfo", //Specify the chart container forceFit: true, //Forced fit width: 600, //Specify the chart width height: 306, //Height padding: [20, 30, 30, 50], //Padding}) Step 5: Load the data source /Update chart now/ chart.changeData(chartData) /Just update the data, no need to update the chart immediately/ chart.source(chartData) /Call when the chart needs to be updated/ chart.repaint() Extended Clear Graphics Grammar /clean all/ chart.clear(); Complete code used in the template (bar chart)<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> Adding the world map(I looked for G2's map when the project was in need, but I felt that some things in the API documentation were not explained clearly, so I'll record them 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 }); // Synchronous metrics chart.scale({ longitude: sync: true }, latitude: sync: true } }); chart.axis(false); chart.legend('trend', { position: 'left' }); // Draw the world map background 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: 'Number of men per 100 women' } }); userView.polygon() .position('longitude*latitude') .color('trend', [ '#F51D27', '#0A61D7' ]) .opacity('value') .tooltip('name*trend') .animate({ leave: animation: 'fadeOut' } }); chart.render(); }) }, }, mounted() { this.test(); }, } </script>
This is the end of this article about the implementation of VUE introducing G2 charts. For more relevant content about VUE using G2 charts, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Analysis of the usage of loop statements (WHILE, REPEAT and LOOP) in MySQL stored procedures
>>: Tomcat common exceptions and solution code examples
I followed the tutorial on W3school. I think the t...
<br />Original text: http://research.microso...
1. System Configuration 1. Turn off sudo password...
Table of contents Preface 1. Usage examples 2. Im...
Having used MySQL for such a long time, I believe...
There has been a lot of discussion about H1 recent...
Recently I used MySQL to export table data to an ...
1. Download MySQL Image Command: docker pull mysq...
Today we are going to implement a Thunder Fighter...
Problem: The overflow of the auto-increment ID in...
1. The startup menu is to move the cursor to the ...
In the previous article https://www.jb51.net/arti...
vertical-align attribute is mainly used to change...
This article example shares the specific code of ...
Forgetting the password is a headache. What shoul...