【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件

之前的问题图片如下：

最开始想到的方案是降低canvas的层级，但是canvas是原生组件，他的层级是没法改变

所以又想到改变vant组件的层级，但是一样无果。。。

随后，看到网上大篇幅的都是使用显示隐藏来操控picker的，这样会如果页面可以滑动，就导致用户还是可以看到echarts的消失

后面想了一种解决方案，就是在小程序中打开picker的时候，将echarts绘成图片，然后隐藏原本的echarts，显示绘制好的image图片，当然我在模拟器中显示的图片很模糊，手机上是可以正常显示的。

可能需要将图片的大小和echarts的保持一致

主要代码如下
说明下，下面pixelRatio和screenWidth是通过wx.getSystemInfoSync()方法获取的

//这个是echarts的初始化，至于setOption就是常用的echarts的配置，可参考官网
init_echarts: function () {
    this.setData({
    	echartsComponnet: this.selectComponent('#mychart');
    })
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      Chart = echarts.init(canvas, null, {
        width:width,
        height:height,
        devicePixelRatio: this.data.pixelRatio
      });
      // Chart.setOption(this.getOption());
      this.setOption(Chart);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });


// 打开picker将echarts转为图片
  transformImage(){
    let that = this;
    return new Promise((resolve,reject)=>{
      that.echartsComponnet.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.screenWidth-40,
        height: 650,
        destWidth: 375 * this.data.pixelRatio,
        destHeight: 700 * this.data.pixelRatio,
        canvasId: 'mychart',
        success(res) {
          resolve()
          that.setData({
            imgSrc:res.tempFilePath,
            showEchartsImg:true
          })
        },
        fail(){
          reject()
        }
      })
    })
  },