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

最新在做小程序项目中遇到图表的地方,为了图方便省事,选择了自己比较熟悉的echarts,写好之后页面如下:
echarts for weixin (canvas原生组件踩坑之路)_第1张图片
在微信开发者工具上面测试没有任何bug,本以为大功告成了,却在真机测试的时候遇到了一个致命的bug,安卓上面滑动图表时明显感觉不是很流畅,有延时的效果,在ios上面更夸张,直接不能滑动了,然后上网查了之后有以下几种方案:
1.去掉ec-canvas.wxml文件中touchStart、touchMove和touchEnd三个事件(亲测无效!!!)
echarts for weixin (canvas原生组件踩坑之路)_第2张图片
2.想了一下,图表是一个canvas组件,而小程序中canvas是一个原生组件,ec-canvas组件层级最高谁都覆盖不了,在开发者工具上可以覆盖的了,但是在真机测试上面谁也覆盖不了,找啊找,找到了下面这个方案感觉上还可以(踩坑之路开始。。。),
echarts for weixin (canvas原生组件踩坑之路)_第3张图片
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标签,为什么同样的代码,在微信开发者上的判断结果和真机上面不一样,然后自己调试了一下,发现在微信开发者工具上面可以走到(转换图片成功)这一步,但是真机测试的时候发现只走到了(开始转换)这一步,
开发者工具:
在这里插入图片描述
真机测试
echarts for weixin (canvas原生组件踩坑之路)_第4张图片
也就是说在真机上面,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 for weixin (canvas原生组件踩坑之路)_第5张图片
生成的图片是这样的:
echarts for weixin (canvas原生组件踩坑之路)_第6张图片
或者这样的
echarts for weixin (canvas原生组件踩坑之路)_第7张图片
( 难受啊,马飞 !!!),,,,如果能重来,我肯定不选echarts,实在不知道改怎么办了,先这样吧。
(2019-08-19)
这两天用F2图表插件重构了这个页面发现还是滑动不流畅,所有。。。不是echarts的坑,也不是F2的坑,可能是canvas原生组件的原因,暂时还未解决。。。(未完待续。。。)

你可能感兴趣的:(小程序,echarts)