How to draw diagrams using ECharts gallery tables in the React framework?

In the process of front-end development, data visualization is not needed, but it is difficult to implement it only through HTML5 Canvas, so ECharts, HighCharts, chart.js, etc., are used to draw maps under the React framework.

In the original JS application or jQuery project, we usually download the core JS file directly from the official website and import it into our project. However, in the React project, we don’t need to download the core JS file directly, because the React project development has a secondary packaging based on Webpack. Webpack is a front-end project deployment and packaging tool based on Node.js. In short, React project development is based on nodeJS environment. You don’t have to worry about the details.

1. Create a React component with state, render function, componentDidMount hook.

2. The render function needs to render the container element containing the Echart instance and declare the ID so that the Echarts instance can find the target to mount.

3. Set the state state within the component and define the sourceData data source to store the Echarts instance

4.componentDidMount hook, called after the render function has rendered the container element.

1) Generate the coordinate data source and update it to sourceData in state

2) Initialize the Echarts instance and mount it to the div element with the id main

3) Integrate the data to be displayed into an OBJ object including sourceData through mychart.setoption (OBJ), and draw the love graph

The demo source code

2. Nightingale Rose chart to display game data

If relative electron has more intuitive understanding, it can also refer to its format as follows:

1. Create a React component with state and render functions

2. The render function needs to render the container element containing the Echart instance and declare the ID so that the Echarts instance can find the target to mount

3. Set the state state within the component and define the sourceData data source to store the Echarts instance

4.componentDidMount Hook, called after the Render function has rendered the container element

1) Initialize the Echarts instance and mount it on the div element with the id main

2) Integrate the data to be displayed, including state data and cellData, into an OBJ object through mychart.setoption (OBj) and draw it