Small diary (problem description)
One of the most troublesome things about doing small program projects recently is: when echarts is introduced into the project, it looks fine in the WeChat developer tools, but as soon as it arrives on the real device, various problems occur. Dingle rose statistical chart, as follows
This picture is interactive. Click on each petal to have a fan-shaped zoom effect, um~ very interesting. Just when I adjusted all aspects of the graph in the development tool, a bug appeared when I threw the real device. .
Just like the above, no matter how I click on the petal in the development tool, the center will not be affected, but this bug will appear on the real device. In fact, I have encountered it before, but it just passed by. , so the impact is not very big and I don’t care about it, but this time the picture is quite special, the middle is hollowed out, if you click it, the center will change to various strange colors, and the visual experience will become worse, so I thought about it at the time two solutions
solution
1. Failure: In the option of echarts, add a white pie chart with the highest level to the hollowed out center of the rose diagram to cover the area that will change color in real time
Later, after I implemented it, I found that this method didn’t seem to work, because after adding the pie chart, although it did cover the part that would change color in the middle, another problem appeared:
New problem caused: The newly added pie chart for overlay also has a zoom effect when clicked! (...)
Although, there may be a solution, but I didn't want to find a way to solve the new problem at the time, so I just tried the second method directly, but because I haven't used it successfully before, I still have some doubts about the second method
2. Success: Use cover-view in the center of this Nightingale rose diagram to cover the color-changing bug area
In fact, the ideas of these two methods are the same. I think there must be a better solution, but I didn't think of it (fk!)
The reason why this method is skeptical is that I have not used it successfully before, but now I know why it was not successful, because the cover-view is something in the official uniapp document, so it must not be fake, but the question is why Most of the ineffectiveness of using it is also your own problem. I think the partner who can see this article probably also searched Baidu for several articles to no avail, why the cover-view doesn’t take effect, of course I have searched before, but because most of the articles found are of poor quality (some are exactly the same All of them have dddd), so I was too irritated to watch it at the time, so I didn’t bother to watch it.
But later I found that the problem lies in this: cover-view first needs to find the layer you need to cover (note that it must be used in tags such as canvas and video to be effective, like this
, and then use the parent to adjust the position of the cover-view, this named slot meigui is where I put the cover-view
), because many frameworks are packaged, so sometimes it will not take effect directly in the packaged label
PS: Here is a knowledge point derived: when using slots to pass parameters in uniapp, it is somewhat different from vue. It is recommended to use destructuring assignment, so use slots like this
parent component:
Subassembly:
When I introduced the echarts component in this project, it really did have too many layers. The problem this time made me carefully look at the introduction and use of echarts in one project, and found that my project actually applied echarts more deeply, and the great-grandson components came out.
So the screenshot above is actually the key to solving the use of cover-view. You must find the innermost canvas tag of your reference layer to use the cover-view tag, and you can only use cover-view or cover-view in this tag. cover-image to use
If it helps, please give it a thumbs up~
https://uniapp.dcloud.net.cn/component/cover-view.html#cover-view