echarts for weixin (canvas原生组件踩坑之路)

最新在做小程序项目中遇到图表的地方，为了图方便省事，选择了自己比较熟悉的echarts，写好之后页面如下：

在微信开发者工具上面测试没有任何bug，本以为大功告成了，却在真机测试的时候遇到了一个致命的bug，安卓上面滑动图表时明显感觉不是很流畅，有延时的效果，在ios上面更夸张，直接不能滑动了，然后上网查了之后有以下几种方案：
1.去掉ec-canvas.wxml文件中touchStart、touchMove和touchEnd三个事件(亲测无效！！！)

2.想了一下，图表是一个canvas组件，而小程序中canvas是一个原生组件，ec-canvas组件层级最高谁都覆盖不了，在开发者工具上可以覆盖的了，但是在真机测试上面谁也覆盖不了，找啊找，找到了下面这个方案感觉上还可以（踩坑之路开始。。。）,

wxml文件关键代码：

js文件关键代码：

  var option= {....}
  chart.on("finished",()=>{
    console.log("开始转换")
    _this.selectComponent('#mychart-dom-bar').canvasToTempFilePath({
      success:res=>{
        console.log("转换图片成功", res.tempFilePath)
        this.setData({
          echart_img_src:res.tempFilePath
        })
      },
      fail:res => {
        console.log("转换图片失败",res)
      }
    })
  });
  chart.setOption(option)

上面是我自己按照大神的方法写的，最后图片是出来了，在开发者工具上看确实是image标签，可是在真机上面，他又变成了ec-canvas标签，为什么同样的代码，在微信开发者上的判断结果和真机上面不一样，然后自己调试了一下，发现在微信开发者工具上面可以走到（转换图片成功）这一步，但是真机测试的时候发现只走到了（开始转换）这一步，
开发者工具:

真机测试

也就是说在真机上面，canvasToTempFilePath(),这个方法没有走,然后找到ec-canvas.js的源码，发现源码时这样写的，

//ec-canvas.js源码
    canvasToTempFilePath(opt) {
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }

      ctx.draw(true, () => {
        wx.canvasToTempFilePath(opt, this);
      });
    },

真机测试了一下，这个里面ctx.draw(true,()=>{}）这一步没有执行，但是在开发者工具上面执行了，接着百度吧，看到很多人都有这个问题，官方好像还没有解决，最后找到了一个方法，是这样写的

canvasToTempFilePath(opt) {
  if (!opt.canvasId) {
    opt.canvasId = this.data.canvasId;
  }

  ctx.draw(true, (() => {
    console.log("执行了(ctx.draw)")
    setTimeout(()=>{
      wx.canvasToTempFilePath(opt, this);
    })
  })());
},

测试了一下，真机上面这个方法真的执行了。

生成的图片是这样的：

或者这样的

（ 难受啊，马飞 ！！！），，，，如果能重来，我肯定不选echarts，实在不知道改怎么办了，先这样吧。
(2019-08-19)
这两天用F2图表插件重构了这个页面发现还是滑动不流畅，所有。。。不是echarts的坑，也不是F2的坑，可能是canvas原生组件的原因，暂时还未解决。。。（未完待续。。。）