Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the normal components of Echarts coverage in WeChat Mini Programs", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to solve the problem of covering normal components with Echarts in WeChat Mini Programs.

Recently, the company's project needs to use echarts components in Mini Program to display data, and because of the use of a custom navigation bar and mask layer, Echarts graphics cover the top of all components, which does not meet the design requirements.

Try to solve the problem:

Z-index:Echarts uses Wechat native canvas, which is of high priority and z-index is completely invalid.

Cover-view: because page contains elements such as input that cannot be nested with cover-view, cover-view doesn't work either.

Wx.canvasToTempFilePath:wx.canvasToTempFilePath official documentation

The idea is to wait for the completion of the drawing and use this method to export the canvas to a picture instead of canvas for data display. Using display to control the hiding of canvas will show some ugly flickers, so use position:absolute to move the canvas out of the screen in advance.

This method needs to be used in the draw () callback method. Part of the code is as follows:

Ec-canvas.js

In wxml

In js

There are still some problems in this process, for example, if the picture is drawn slowly, it will result in only part of the data or even full transparency of the generated picture. At present, only an imperfect solution has been found, that is, using setTimeOut to increase some delay and wait for the drawing to finish. Therefore, wx.showLoading is added to the transition, but there are still some hidden dangers.

At this point, I believe that everyone on the "WeChat Mini Programs Echarts coverage of normal components how to solve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.