How to realize the drilldown function of Echart

This article is to share with you about how to achieve the Echart drill-down function. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Today to achieve Echart double ordinates (one data one percentage), two columns 90% discount, can drill down, there is only one HTML file, Echart and jq are quoted online.

Warm Tip: the display data is not official FIFA data, but the function needs to be written at will.

Official link to Echart: https://www.echartsjs.com/zh/index.html

Display before drilling (figure 1)

Click to drill down (figure 2)

Now let's talk about the process briefly.

HTML file introduces two online js files, one jquery and one echarts.min.js

Give a div in body to store echart diagrams

Js implements data format binding to echart

OK, let's go straight to the third step. The red box in the following figure shows that the instance of echart has been bound to these data formats, and then there is the effect of figure 1 above.

Then we'll talk about how to drill down.

(1) what I write is a click event for the echart instance, and then the click event is passed into the data data shown in figure 1 of echart.

AreaChartDR.on ('click', function (data) {})

(2) destroy the previous echart view

/ / destroy statistical chart echarts.dispose (document.getElementById ("AreaChartDR"))

(3) re-instantiate a new echart. At this time, we can go to the ajax to request the drilled data based on the passed data. Of course, in order to reduce the trouble, I do not write ajax here. I directly set the drilled data, as shown in the figure.

(4) then assign and bind the echart of the new instance

OK, that's all, download the source code down to a HTML file, a roll on it.

The above is how to achieve the drilldown function of Echart. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.