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


    问题:小程序中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)
      },
    })
    
  • 相关阅读:
    MongoDB初探-基本语句和数据结构
    Restful API学习Day5
    Restful API学习Day4
    毕业设计记录1
    解决python爬虫requests.exceptions.SSLError: HTTPSConnectionPool(host='XXX', port=443)问题
    java调用python代码
    mysql使用唯一索引避免插入重复数据
    阅读笔记16
    阅读笔记15
    阅读笔记14
  • 原文地址:https://www.cnblogs.com/elevens/p/14848521.html
Copyright © 2020-2023  润新知