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

2022-07-21   阅读:694   分类:前端    标签: wepy

微信小程序使用过百度 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统计图

【腾讯云】云服务器等爆品抢先购,服务器108元每年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/911.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×