VUE introduces the implementation of using G2 charts

VUE introduces the implementation of using G2 charts

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
https://antv.gitee.io/

G2 Icon Detailed Development Manual
https://antv-g2.gitee.io/zh/docs/api/general/chart

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>
  • The official website of fetch introduces a file directory, not a specific json file, and the file cannot be found when used
  • The json introduced by fetch is local. Secondly, the remote githup address provided by G2 official website cannot obtain this json file
  • The path of the json file introduced by fetch is not the path from your current file to the json, but the address from index.html to the json file

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:
  • Sample code for using G2 charts in Vue
  • Reference Antv G2 in the vue project, taking the pie chart as an example
  • How to encapsulate G2 charts in Vue

<<:  Analysis of the usage of loop statements (WHILE, REPEAT and LOOP) in MySQL stored procedures

>>:  Tomcat common exceptions and solution code examples

Recommend

Window.name solves the problem of cross-domain data transmission

<br />Original text: http://research.microso...

Ubuntu 20.04 Best Configuration Guide (Newbie Essential)

1. System Configuration 1. Turn off sudo password...

React realizes the whole process of page watermark effect

Table of contents Preface 1. Usage examples 2. Im...

About the location of the H1 tag in XHTML

There has been a lot of discussion about H1 recent...

Docker creates MySQL explanation

1. Download MySQL Image Command: docker pull mysq...

How to use VUE and Canvas to implement a Thunder Fighter typing game

Today we are going to implement a Thunder Fighter...

MySQL table auto-increment id overflow fault review solution

Problem: The overflow of the auto-increment ID in...

How to reset your Linux password if lost

1. The startup menu is to move the cursor to the ...

Introduction to the deletion process of B-tree

In the previous article https://www.jb51.net/arti...

In-depth understanding of the vertical-align property and baseline issues in CSS

vertical-align attribute is mainly used to change...

Vue implements tree table

This article example shares the specific code of ...

What to do if you forget the initial password when installing MySQL on Mac

Forgetting the password is a headache. What shoul...