Build antv data visualization large screen from zero (lightweight vite-react-ts)


Previously, Ofter detailed how to write visualization screens from scratch using Vue. Today, we'll show you how to write visualization charts using React. Why are we still learning React? Because of its lightweight nature, visualization charts like antv are all in React, although antv has one viser (React/Vue/Angular three front-end languages are supported), but the chart is not antv complete and the documentation is unclear.

Most Complete Vue Tutorial - There are many more complex (commands to be executed) Vue tutorials on the Visual Large Screen Web from scratch that are incomplete. Today OF will fully explain how to make a good-looking Visual Large Screen with vue. As long as you follow the steps, you can also achieve your own visualization project.

Knowledge Point 1: Differences between React and Vue

assemblyReact is lightweight and refines the component functionality, which is what you need, and then introduces it one by one (for example, to use link functionality, you need to introduce <Link>components). Therefore, React requires developers to have a certain front-end foundation, which is more suitable for professionals to build lightweight systems.Vue encapsulation components are more powerful, even for beginners, you can introduce components without knowing many principles. As a result, Vue introduces more component redundancy as functions become more and more.
datareact as a whole is a function-based idea, which designs components as pure components. State and logic are passed in through parameters and belong to one-way data flow. Data visualization often does not require two-way data flow.The idea of vue is responsive, that is, based on data variability, by establishing a Watcher for each attribute to listen for, when the attribute changes, a responsive update of the corresponding virtual dom.
jsreact is all in js, generates html through js, and manipulates css, styled-component, jss, and so on through js.vue is a combination of html, css and js. vue has a single file component which can write html, css and JS to a file. HTML provides a template engine to process them.

I. Preparations

Compilation tool: Pycharm

Point 2: Front-end building tools: Vite

New front-end building tools can significantly enhance the front-end development experience. Previously, Ofter introduced that the vue project creation tool is webpack, but it has a big disadvantage that the packaging will be slower as the project gets bigger. This set of visualization library charts is more, so Amway vite is a front-end construction tool.

Point 3: Front-end compiler: TypeScript

TypeScript is a type-defined superset of JS compiled to pure JS, suitable for large-scale JavaScript applications. TS has obvious benefits in terms of teamwork, maintainability, readability, stability (exposing bug s ahead of time during compilation).

1. Create a project

1.1 Create react project with vite

The lower left Terminal terminal executes the following commands

npm create @vitejs/app

Note: Before Ofter shared with you the idea of creating a vue project with a webpack, webpack has a big drawback. As the project gets bigger and slower, using vite will be much faster and more development-friendly.

1.2 Select react/react-ts

√ Project name: ant-visual
√ Select a framework: » react
√ Select a variant: » react-ts

1.3 Start project testing

After creating the project structure, we can see that it is much simpler than the vue project structure.

cd ant_visual //Project Name
npm run dev

2. Installation Library

This time we take the anvt/g2 chart library as an example, install'@antv/g2', and if we need to use routing, install a'react-router-dom'

npm install @antv/g2

npm install react-router-dom

3. Create new directories and files

3.1 Create a new components directory and tsx file

(TypeScript JSX File)

3.2 Create a new assets and style directory

3.3 Create a new router directory and index.tsx file

2. Chart implementation

1. Chart Cases

Let's start by looking at the antv/g2 charts, which have many interactive charts in addition to the commonly used column and line charts.

All Charts| G2

2. Chart Code

Ofter starts with a simple bar chart and gives a complete demonstration.

2.1 Create a new Bar under components. TSX

At the same time, we can copy the code on the official website to Bar. In tsx, like vue, this code is not directly usable and needs some adjustments.

Knowledge Point 4: Chart Rendering

Both Vue and react need to render the Dom, typically through IDs and refs in <div id='a'ref='b'>, but the writing in react is a little different from that in vue.

2.2 Introducing useRef, useEffect

On the basis of the official website code, we need to add the following code:

Change the container content in new Chart() to ref.current

The complete code is as follows:

import { Chart } from '@antv/g2';
import React, {useRef, useEffect} from "react";

const MyChart = () => {
    const ref = useRef(null);
    const data = [
        {city: 'China (Beijing)', type: 'Capital Population', value: 0.01},
        {city: 'China (Beijing)', type: 'Urban population', value: 0.53},
        {city: 'China (Beijing)', type: 'rural population', value: 0.46},
        {city: 'United States (Washington)', type: 'Capital Population', value: 0.01},
        {city: 'United States (Washington)', type: 'Urban population', value: 0.8},
        {city: 'United States (Washington)', type: 'rural population', value: 0.19},
        {city: 'India (Delhi)', type: 'Capital Population', value: 0.02},
        {city: 'India (Delhi)', type: 'Urban population', value: 0.3},
        {city: 'India (Delhi)', type: 'rural population', value: 0.68},
        {city: 'Russia (Moscow)', type: 'Capital Population', value: 0.08},
        {city: 'Russia (Moscow)', type: 'Urban population', value: 0.66},
        {city: 'Russia (Moscow)', type: 'rural population', value: 0.26},
        {city: 'France (Paris)', type: 'Capital Population', value: 0.16},
        {city: 'France (Paris)', type: 'Urban population', value: 0.63},
        {city: 'France (Paris)', type: 'rural population', value: 0.21},
        {city: 'Korea (Seoul)', type: 'Capital Population', value: 0.19},
        {city: 'Korea (Seoul)', type: 'Urban population', value: 0.63},
        {city: 'Korea (Seoul)', type: 'rural population', value: 0.18},
        {city: 'Denmark (Copenhagen)', type: 'Capital Population', value: 0.22},
        {city: 'Denmark (Copenhagen)', type: 'Urban population', value: 0.65},
        {city: 'Denmark (Copenhagen)', type: 'rural population', value: 0.13},
        {city: 'Iceland (Reykjavik)', type: 'Capital Population', value: 0.56},
        {city: 'Iceland (Reykjavik)', type: 'Urban population', value: 0.38},
        {city: 'Iceland (Reykjavik)', type: 'rural population', value: 0.06},

    useEffect(() => {
        if (!ref) return;
        const chart = new Chart({
            container: ref.current,
            autoFit: true,
            height: 500,
        chart.scale('value', {

            alias: 'Percentage (%)',
        chart.axis('city', {
            tickLine: null,
            line: null,
        chart.axis('value', {
            label: null,
            title: {
                style: {
                    fontSize: 14,
                    fontWeight: 300,
            grid: null,
            position: 'top',
            shared: true,
            showMarkers: false,
            .color('type*city', (type, city) => {
                if (type === 'Capital Population') {
                    return '#1890ff';
                if (type === 'Urban population') {
                    return '#ced4d9';
                if (type === 'rural population') {
                    return '#f0f2f3';
                if (type === 'Capital Population' && city === 'China (Beijing)') {
                    return '#f5222d';
            .label('value*type', (val, t) => {
                const color = t === 'Capital Population' ? 'white' : '#47494b';
                if (val < 0.05) {
                    return null;
                return {
                    position: 'middle',
                    offset: 0,
                    style: {
                        fontSize: 12,
                        fill: color,
                        lineWidth: 0,
                        stroke: null,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, .45)',
    return (
            <div ref={ref} className='bar'/>
export default MyChart;

2.3 App. Importing components into TSX

So we can go to App. Introducing the shape chart component in TSX

import './App.css';
import React from 'react';
import Bar1 from './components/Bar';

function App(){
  return (
      <div className='App'>
        <Bar1 />

export default App;

2.4 Running Project

3. CSS style code

If we need to do a visualization screen, we also need to write a css style (className we've defined as'bar'in Bar.tsx)

3.1 Create a bar in the style directory. CSS

css code:

    text-align: left;
    width: 50%;
    height: auto;
    padding: 2rem;

Of course, we can also use existing Apps. CSS writing style, so that I can easily distinguish it, I will write it alone.

3.2 in Bar. Introducing css styles into TSX

import '../style/bar.css'

3.3 Running Project

3. Large screen with bar chart combination

Ofter uses the flex layout, which is relatively simple. If you want to learn, you can enter the following links: Learn to use HTML-flex layout, make beautiful web pages, want to make a nice small system, we also need to learn some front-end knowledge, today OF will explain how to make a good page with pycharm (a good tool for full stack development), after which we can develop web pages/websites by ourselves and put them on the Internet.

4. Summary and next forecast

To summarize, this Ofter explains how to use vite, react, ts, antv/g2 to make a lightweight, static visualization chart, and some of the differences between vue and react. If we need to make a larger screen with more complete charts, better performance, and more dynamic data, Ofter will introduce you next time because of the limited space:

  1. Increase Router routing;
  2. Increase lazy loading;
  3. Get data dynamically.

If you need the source code, check out the following (or commentary) method for free (the benefit of downloading the code is that you don't need to go back to the environment yourself, as long as the npm install installs the library and runs)

Keywords: Front-end React TypeScript Vue data visualization

Added by brown2005 on Wed, 23 Feb 2022 19:00:59 +0200