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

这篇具有很好参考价值的文章主要介绍了【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

之前的问题图片如下：

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

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

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

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

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

主要代码如下
说明下，下面pixelRatio和screenWidth是通过wx.getSystemInfoSync()方法获取的文章来源地址https://www.toymoban.com/news/detail-639465.html

//这个是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()
        }
      })
    })
  },

到了这里，关于【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！