Summary of experience in using echarts charts (avoiding pitfalls)

I sometimes use echarts charts at work, and often fall into pitfalls. I will summarize them today so that I can check them later, and also share them with everyone to avoid mistakes. When using Echarts to display histograms, the first problem is to configure the js of Echarts. What is important to note here is that when configuring, pay attention to the version of Echarts.

Use of Echarts:

Use Echarts to display charts. Compared with Hcharts, there is not much difference between the two. In principle, the json format is parsed through ajax function callback. Data, the parsed data is displayed in charts. The difference between the two is like the difference between office and wps. The biggest difference mainly comes from technical support. Highcharts is based on svg technology. Echarts is based on canvas. The technical foundations of the two are completely different and each has its own characteristics. The latter can realize 3D graphics in the browser, which is completely impossible to achieve with highcharts.

Using echarts mainly includes three parts: json data encapsulation, ajax request and callback processing, and js that references echarts.

json data encapsulation:

Mainly database operations. Here we mainly complete the conversion of the queried data in DataSet format into json format data, and put the queried data into list, the most important thing is to serialize this list

ajax request and callback processing

Because this involves asynchronous requests, ajax requests need to be used. When used, request callbacks are mainly used, and general handlers are also used here, that is Create a class to handle it.

Through this cmd, you can get the specific front end that is executed to send the request. dataType mainly represents the type of data, here it is mainly json format data; Success represents the callback after the data is returned from the background and ajax is executed successfully.

Note that the main problem is the version of echarts.js and echarts-map.js. The two should be unified with the version of esl.js. esl.js It is the version of echarts2. At the beginning, after downloading the latest Echarts3 directly from Echarts Watch, the chart is not displayed.

When testing, the data can always be obtained, but the chart cannot be displayed

When the chart is not displayed, it is generally necessary to test whether the data is correct, or whether the test data is available , the main test is whether the use of ajax is correct. At the beginning, ajax is submitted to the general handler, and the corresponding json format data can be obtained, but the error function callback is always used. The main problem is to configure Let’s look at the js references in myEcharts.js:

These two js must be configured accurately here, because these two js are used to display chart information and directly affect What is the callback of ajax callback function ECharts.Bars() is successful.

The above is the detailed content of Summary of experience in using echarts charts (avoiding pitfalls). For more information, please follow other related articles on the PHP Chinese website!