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

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

 解决方案1：（wx:if控制dom显隐，显示canvas就重新渲染echarts，简单粗暴，但是耗费性能）：

第一步:wxml

第二步: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

第二步:js（同方案1 ）