WeChat appletiOSOn the systemechartsThe problem with not sliding

When using the Echarts plugin in the WeChat applet, I ran into a problem: on iOS, if I held my finger down on the chart first, then the page wouldn’t scroll, especially the Nightingale Rose. As a beginner of WeChat applet development, this question really stumped me.

Solution:

1. Add a mask layer.

Overlay the Echarts diagram with a mask so that when the page is long pressed and scrolled, the mask will be the one that slides, and the problem will be solved.

Problems encountered:

1. Canvas is a native component with a high level. View cannot be used as a mask layer. I used Cover-View as the mask layer.

   <cover-view wx:if="{{isIOS}}" class="echart-mask" ></cover-view>
   <e-chart  
        chart-class='echart'
        option='{{ data.getEChartOption(employeeInfoList) }}' 
        bindinstance='getEchartInstance'
   />

2. After adding the mask layer, it can slide normally on IOS system, but it can not slide on Android system (it is really the reciprocity turns へ￣). I’m judging the system on the page to decide whether to create a mask layer or not.

   wx.getSystemInfo({
     success: (result) =>this.setData({ isIOS: result.system.match(/iOS/) }),
   });

2. Turn the chart into a picture.

Since the Echarts icon is only used for data presentation and does not interact with the user, it is also considered to replace the Echarts component with an image after the transition animation of Echarts is finished.

    getEchartInstance({ detail: echart }) {
        echart.on('finished', () => {
            echart
                .getDom()
                .saveAsImage()
                .then((path) => {
                    this.setData({ homeworkCountEchartImg: path });
                });
        });
    },

Problems encountered:

There is a flicker when the image replaces the Echarts. Note that Echarts can be removed after the image has been loaded, which can be controlled using the Image bindload.

Use 3.echartThe plug-indisableTouchProperties.

In the root directory of the Option object, add the DisableTouch property and set it to true. This is a solution from the official technical staff of the WeChat Echarts plugin. WeChat small program documentation, too concise, completely did not find this attribute words well, novice very helpless (•́へ• bi╬).

Var eChartOption = {disableTouch: true, // [ '#79db66', '#769efd', '#f6994f', '#f5df4e', '#a668f5', '#66cbdb', '#dc76fd', '#6062e0', '#ec7997', '#88e6be', ], legend: { selectedMode: false, show: false, }, }