微信小程序避坑指南——echarts層級太高/層級遮擋

問題：小程序中echarts因為小程序原生的canvas層級太高，而導致彈窗這類dom元素無法遮擋住canvas，如下圖；

 

 

 解決方案1：（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)
  },
})

 

 解決方案2：（hidden控制dom顯隱，比較推薦，不會銷毀dom重新渲染）：

第一步:wxml

<view hidden="{{!echartsShow}}" style="height:500rpx;width:100%">
    <ec-canvas id="chart" canvas-id="chart" ec="{{ chartsEc }}" force-use-old-canvas="true"></ec-canvas>
</view>

第二步:js（同方案1 ）