首页 > 微信 > 详细

微信小程序避坑指南——echarts层级太高/层级遮挡

时间:2021-06-04 12:13:53      阅读:111      评论:0      收藏:0      [点我收藏+]

问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图;

技术分享图片

 

 

 解决方案(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能):

第一步:wxml

<!-- echarts饼图——用wx:if控制dom显隐,hidden没办法隐藏 -->
<ec-canvas id="storeChart" canvas-id="storeChart" ec="{{ pieChart }}" wx:if="{{!showDate}}"></ec-canvas>

<!-- vant的日期选择控件——弹出日期控件就隐藏echarts,关闭日期控件就重新渲染echarts -->
<view class="calendar">
    <van-calendar show="{{ showDate }}" color="#ff4366" type="range" bind:close="onClose" bind:confirm="onConfirm" min-date="{{ minDate }}"
  max-date="{{ maxDate }}" allow-same-day/>
</view>

第二步:js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showDate: false, // 饼图、日期 显隐
    //饼图
    pieChart: {
      lazyLoad: true // 延迟加载
    },
    pieData: {
      data: [{
        value: 10,
        name: ‘杭州‘
      }, {
        value: 20,
        name: ‘广州‘
      }, {
        value: 38,
        name: ‘上海‘
      }]
    },
  },

  // 显示日期
  onDisplay() {
    this.setData({
      showDate: true,
    });
  },
  // 关闭日期
  onClose() {
    this.setData({
      showDate: false,
    });
    //dom节点出现需要时间,延迟一下重新渲染饼图
    setTimeout(()=>{
    this.pieEchartsComponnet = this.selectComponent(‘#storeChart‘); //获取饼图dom
    this.pieChart() // 饼图初始化
    },0)
  },
})

 

微信小程序避坑指南——echarts层级太高/层级遮挡

原文:https://www.cnblogs.com/elevens/p/14848521.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!