Needs: the need for dynamic rendering more echart charts in a list;
Premise: I am using vue framework
analysis:
1, vue frame structure can be used to obtain dom officially designated ref, or create a id document.getElementById () way to get (here I use the second way to get according to id)
2, id also dynamically acquired, and then loops through dom found in a single item in the dynamic JS id, as in FIG.
PS: Here I am using "item + index" to each echart composed of id chart, and ultimately generate html structure is as follows:
3, each cycle method acquires item id in the JS and dynamic rendering each graph, as shown below:
PS: I marked above steps 1,2,3, respectively, means:
(1) because of me this chart is to be multiplexed pop, so I made a kit form, and entering into the main page, just click on when this component, DOM update will involve playing asynchronous updates (because the data is dynamically obtain the background), then pop
This error, it is necessary to use vue hook $ nextTick to provide specialized treatment, echart rendered in this hook, specifically poke here: https://cn.vuejs.org/v2/api/#Vue-nextTick
(2): This is a list of array data I obtained from the background, the need for array processing, and then get each item, and then initialize each item of echart
(3): This is where the value of the name of the individual eachrt graph generation scheme is the id of each item and then implement dynamic rendering.
This is one method of each rendering echart more dynamic, of course, there are other methods are diverse methods to achieve, we welcome message.
The final shaping as follows:
All test data haha