关于wepy小程序引入echarts统计图之后出现定位穿透问题的解决方案

沃梦达教程前端开发

2022-10-29 5

微信小程序使用过百度 echarts 的开发者会遇到这样的问题，echarts优先级问题，因为 echarts 渲染出来的是画布 canvas ，在小程序中有限级是最高的，为了解决这个问题，我们可以采用以下思路：我们可以先等待 echart

微信小程序使用过百度 echarts 的开发者会遇到这样的问题，echarts优先级问题，因为 echarts 渲染出来的是画布 canvas ，在小程序中有限级是最高的，为了解决这个问题，我们可以采用以下思路：

我们可以先等待 echarts 渲染成功之后，隐藏 echarts，然后通过图片来展示。

1、小程序echarts部分代码

<!-- 图表 -->
 <view class="main">
  <ec-canvas
    id="month-trend-bar-dom1"  
    class="month-trend" 
    canvas-id="month-trend-bar1"
    bind:init="echartBarInit1($wx)"
    :ec=" ec " v-if="echartImg1 ==''">
   </ec-canvas> 
   <!-- image用来解决canvas组件层级过高问题 -->
   <image v-else src="{{echartImg1}}" mode="widthFix"></image>
  </view>
<!-- 图表 -->

2、通过dom操作canvas：这里#month-trend-bar-dom1为id名，为了防止没渲染成功获取不到，这里设置了半秒之后获取操作，可以看到echarts生成的canvas是2d的，所以获取方法得使用 this.selectComponent()

获取节点生成图片：将canvas生成临时图片展示，这里用到 canvasToTempFilePath({})

this.ecComponent1 = this.$wx.selectComponent('#month-trend-bar-dom1')
setTimeout(function () {
   that.ecComponent1.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: detail.width,
    height: detail.height,
    // destWidth: 700,
    // destHeight: 500, //mychart1的option
    success:res => {
     console.log("temp path1", res.tempFilePath)
     that.echartImg1 = res.tempFilePath
    }
  })
}, 500)

3、说明：wepy框架通过 this.$wx.selectComponent()获取，原生小程序通过 this.selectComponent()获取。

4、其他问题参考：

wepy小程序如何引入echarts统计图

wepy框架