Introduction to the G2 chart

G2 is a data-driven visualization engine based on graph syntax theory, providing graph syntax and interactive syntax with high ease of use and extensibility

With G2, you can build a wide variety of interactive statistical charts using Canvas or SVG in a single statement without paying attention to the tedious implementation details of charts

G2 chart official website address

https://antv.gitee.io/zh
Copy the code

G2 icon detailed development manual

https://antv-g2.gitee.io/zh/docs/api/general/chart
Copy the code

use

Step 1: Install the G2 dependency package

npm instal @antv/g2
Copy the code

Step 2: Prepare a DOM container for G2 before drawing

<div id="webInfo"></div>
Copy the code

Step 3: Introduce

import G2 from "@antv/g2";
Copy the code

Step 4: Define in Mounted

  1. Let chart = null;
  2. const chart = new G2.Chart({})
Chart = new g2.chart ({container: "webInfo",// specifies the chart container forceFit: true,// specifies the chart container width: 600, // Specifies the chart width height: 50,// height padding: [20, 30, 30, 50],// padding})Copy the code

Step 5: Load the data source

/ Update the chart immediately/chart.changedata (chartData)/just update the data without updating the chart immediately/chart.source(chartData)/call/chart.repaint() when you need to update the chartCopy the code

Added: Extension clears graphic syntax

/ chart.clear();Copy the code