微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表

• 需求
  需要解决下方图中的问题，当底部弹出弹出框时，需要除弹出框外的元素置为透明灰色。下图是真机效果。
  此时，echarts图表依旧高亮显示，需要去掉该高亮效果。
  
  下图是微信开发者工具效果，开发者工具显示正常，真机echarts图表则会高亮。
  

• 问题所在
  通过微信小程序Echarts覆盖正常组件问题解决该文章知道：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。cover-view 可以覆盖在原生组件之上。

• 解决方式

  将写弹出层使用的 view 组件全部替换成 cover-view 组件

  <view class="chartsBox">view>
  <view class="listBox">
  	<view bindtap="showModel">更多指标view>
  view>
  
  <cover-view class='{{bg}}' style="display:{{backgroundVisible ? 'block':'none'}}">cover-view>
  <cover-view class="element-wrapper" animation="{{animation}}" style="display:{{show ? 'block':'none'}}">
    <cover-view class="element">
      <cover-view class='picker_header'>
        <cover-view class="right-bt" catchtap="hidden">关闭cover-view>
      cover-view>
      <cover-view class="box">
        <cover-view class="{{item.checked ? 'all' : 'notAll'}} check" wx:for='{{ items }}' wx:key="index" data-index='{{index}}' catchtap='moreIndicators'>{{ item.name }}cover-view>
      cover-view>
      <cover-view class="tip"><cover-view class="">*cover-view><cover-view>最多选择2项，最少选择1项cover-view>cover-view>
    cover-view>
  cover-view>
  

  .element-wrapper {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 10000;
  }
  .background {
    background-color: rgba(0, 0, 0, 0);
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
  }
  .bg {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 300vh;
    position: absolute;
    top: 0;
    transition-property: background-color;
    transition-timing-function: ease;
    transition-duration: 1s;
    transition-delay: 0;
    z-index: 999;
  }
  
  .element {
    position: absolute;
    width: 100%;
    height: 38vh;
    bottom: 0;
    background-color: #fff;
  }
  .picker_header {
    height: 70rpx;
  }
  .element .right-bt {
    font-size: 28rpx;
    color: #666;
    text-align: right;
    line-height: 66rpx;
    padding-right: 30rpx;
  }
  
  .element .line {
    display: block;
    position: fixed;
    height: 1px;
    width: 100%;
    margin-top: 89rpx;
    background-color: #eee;
  }
  .box {
    color: #333;
    font-size: 24rpx;
    font-family:PingFang SC;
    padding-top: 10rpx;
    text-align: left;
    padding-left: 14rpx;
    background-color:#fff;
    border-top: 1rpx solid #E1E1E1;
  }
  
  .check {
    float: left;
    width:225rpx;
    height:73rpx;
    line-height: 73rpx;
    background:#fff;
    border-radius:7rpx;
    margin: 8rpx !important;
    text-align: center;
    color: #E8380D;
    border: 1rpx solid #E8380D;
  }
  .all {
    color: #fff;
    background-color: #E8380D;
  }
  .notAll {
    color: #E8380D;
    background-color: #fff;
  }
  .tip {
    display: flex;
    font-size: 24rpx;
    color: #888888;
    padding-left: 16rpx;
    padding-top: 10rpx;
  }
  

  var action = '';
  var moveY = 200;
  var animation = animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 400,
      timingFunction: "ease",
      delay: 0
  })
  animation.translateY(moveY + 'vh').step()
  
  Page({
  	data: {
  		items: [],
  		show: false,
  	    backgroundVisible: false,
  	    animation: animation,
  	    bg: 'background',
  	},
  	animationEvents: function (that, moveY, action) {
      that.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 400,
        timingFunction: "ease",
        delay: 0
      })
      that.animation.translateY(moveY + 'vh').step()
      if (action == 'show') {
        that.setData({
          animation: that.animation.export(),
          show: true,
          backgroundVisible: true,
          bg: 'bg',
          disableScroll: 'disableScroll'
        });
      } else if (action == 'hide') {
        that.setData({
          animation: that.animation.export(),
          show: false,
          backgroundVisible: false,
          bg: 'background',
          disableScroll: ''
        });
      }
    },
    showModel: function(e) {
      moveY = 0;
      action = 'show';
      this.animationEvents(this, moveY, action);
    },
    hidden(e) {
      moveY = 200;
      action = 'hide';
      this.animationEvents(this, moveY, action);
    },
    moreIndicators(e) {}
  })