Wechat appletsiOSOn the systemechartsThe problem of not sliding

When using the echarts plugin in the wechat mini program, I encountered a problem: on iOS, if my finger presses long on a chart, then the page cannot slide, especially the Nightingale rose. As a micro letter small program of the novice development, this problem is true stumped me.

Solution:

1. Add a mask layer.

Use a mask layer to cover the Echarts diagram so that when you long press and slide the page, the mask layer slides and the problem is solved.

Problems encountered:

1. Canvas is a native component and has a very high level, so the View cannot be used as a mask layer. I used a cover-view as a mask layer.

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

2. After adding the mask layer, it works fine on iOS, but it doesn’t work on Android either. I am judging the system on the page to decide whether to create a mask layer.

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

2. Turn charts into pictures.

Since the Echarts icon is only for data display and does not interact with the user, I also considered using images instead of echarts components after the echarts transition animation is finished.

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

Problems encountered:

There was a flicker as the image replaced Echarts. Be careful to remove the echarts after the image has loaded, using the image bindLoad to control this.

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 given by the official technical staff of wechat Echarts plug-in. (Mock the documentation for the wechat miniapp, which is so concise that you can’t find a single word of this attribute. Well, ́ translation •́╬ is frustrating for novices.)

var eChartOption = {
    disableTouch: true.// On ios, echarts cannot slide when long pressing
    color: [
        '#79db66'.'#769efd'.'#f6994f'.'#f5df4e'.'#a668f5'.'#66cbdb'.'#dc76fd'.'#6062e0'.'#ec7997'.'#88e6be',].legend: {
        selectedMode: false.show: false,}}Copy the code