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

Detailed explanation of the setting of background-image attribute in HTML

When it comes to pictures, the first thing we thi...

CSS float property diagram float property details

Using the CSS float property correctly can become...

Use Firebug tool to debug the page on iPad

How to debug a page on iPad? When using iOS 5, you...

Detailed explanation of Vue advanced construction properties

Table of contents 1. Directive custom directive 2...

Vue uses canvas to realize image compression upload

This article shares the specific code of Vue usin...

Example of Vue uploading files using formData format type

In Vue, we generally have front-end and back-end ...

HTML tags: sub tag and sup tag

Today I will introduce two HTML tags that I don’t...

Solution to the failure of loading dynamic library when Linux program is running

Unable to load dynamic library under Linux When t...

How to set up Spring Boot using Docker layered packaging

The Spring Boot project uses docker containers, j...

Detailed tutorial on compiling and installing MySQL 8.0.20 from source code

In the previous article, we introduced: MySQL8.0....

Basic syntax of MySQL index

An index is a sorted data structure! The fields t...

Research on the value of position attribute in CSS (summary)

The CSS position attribute specifies the element&...