How to use SpringBoot+Echarts to request background data to display pie chart

This article mainly explains "how to use SpringBoot+Echarts to request background data to display pie chart", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use SpringBoot+Echarts to request background data display pie chart"!

Scene

SpringBoot sets up the background to obtain data, and the front-end visualization uses the pie chart of echarts.

Echarts3 official website

Get Echarts

Select the version you need to download from the official website download interface. According to the developer's functional and volume requirements, we provide different packages of downloads. If you have no requirements in size, you can download the full version directly. The development environment recommends downloading the source code version, which contains common error tips and warnings.

Download the latest release version on ECharts's GitHub, and you can find the latest version of echarts library in the dist directory in the unzipped folder.

Get echarts,npm install echarts-- save through npm. For more information, please see "using echarts in webpack".

With the introduction of cdn, you can find the latest version of ECharts on cdnjs,npmcdn or domestic bootcdn.

Introduction of ECharts

ECharts 3 no longer forces the use of AMD to be introduced on demand, and the AMD loader is no longer built into the code. So the way to introduce it is much easier, just using the script tag like a normal JavaScript library.

Draw a simple chart

We need to prepare a DOM container with height and width for ECharts before drawing.

You can then initialize an echarts instance through the echarts.init method and generate a simple bar chart through the setOption method. Here is the complete code.

ECharts

/ / initialize the echarts instance var myChart = echarts.init (document.getElementById ('main')) based on the prepared dom / / specify the configuration items and data of the chart var option = {title: {text: 'ECharts getting started'}, tooltip: {}, legend: {data: ['sales']}, xAxis: {data: ["shirt", "cardigan", "chiffon", "trousers", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales', type: 'bar'' Data: [5, 20, 36, 10, 10, 20]}]} / / display the chart using the configuration items and data you just specified. MyChart.setOption (option)

So your first chart is born!

The above is an example of the official website.

Realize

Introducing echarts into html

Jquery has been introduced into the template and will not be introduced here.

Write js

$(document) .ready (function () {/ / based on the prepared dom, initialize the echarts instance var myChart = echarts.init (document.getElementById ('main')); / / specify the configuration items and data var names= for the chart []; var values= []; / / display a simple loading animation myChart.showLoading () before the data is loaded $.ajax ({type: "post", async: true, / / Asynchronous request (synchronous request will lock the browser, and other user operations must wait for the request to be completed) url: "/ wmsLogisticMonitoring/EcharsShow", / / the request is sent to dataActiont data: {}, dataType: "json", / / returns data in the form of json success: function (result) {/ / execute the function when the request is successful Result is the json object if (result) {for (var iTun0) returned by the server. I