Current location - Quotes Website - Signature design - How to make visual report in front end?
How to make visual report in front end?
Here are two js libraries for making front-end visual reports, one is echarts and the other is g2. These two libraries cover the production of most reports, including line charts, bar charts, pie charts, scatter charts and so on. They are simple to use, with detailed documentation and rich examples. Let me briefly introduce these two libraries:

Echarts: This is a front-end visual js library developed by Baidu, which can run smoothly on mobile and PC devices, be compatible with most browsers, and provide intuitive, interactive and highly customizable visual icons. Let me briefly introduce the purpose of this library:

1. Download echart.js locally, as shown below. If it is developed, it is recommended to download the source code version:

2. After the download is successful, we can introduce echarts.js into html locally. The test code is as follows. Simply draw a histogram, very simple:

Save this html file and open it with a browser. The effect is as follows:

Here is just a simple introductory example. For more examples, see the example of official website, which covers the production of various reports, including maps, polar coordinates and heat maps. The process is very detailed and can be edited and run online, so I won't go into details here, as follows:

G2: This is the front-end visualization library developed by Ali. It is easy to learn, data-driven, highly extensible and easy to use. Users can quickly build statistical reports in a few sentences without paying attention to the underlying implementation details. Let me briefly introduce the purpose of this library:

1. The test code is as follows. You can import g2.js library online here, or download g2.js and import it locally. Here is a simple histogram:

The browser effect is as follows:

More examples can be found in official website's tutorial, which is very detailed. Various components are introduced, and the code is also very detailed. Click to view the source code and operation renderings:

At this point, we have completed the simple use of two visual js libraries, echarts and g2. Generally speaking, these two libraries are very easy to use, easy to learn and easy to use. Official website offers a wealth of tutorials for developers to use. Of course, in addition to these two libraries, there are also visual libraries such as D3 and Highcharts, which will not be introduced in detail here. If you are interested, you can search yourself. There are also related tutorials and materials on the Internet. I hope the content shared above can help you.