使用wxcharts.js绘图的层级问题

最近在微信小程序使用wxcharts.js绘图时遇到了一个问题， 因为在最终绘制完成的页面要做一个条件筛选，会有一个弹出框，在微信开发者工具上运行是是没有任何问题的，但到了真机预览时遇到了问题，绘制完成的图形总是在最上层，就把弹出框给覆盖了。

• 根据官方文档，cover-view覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image、button。不可以使用input组件，这与我的需求不相符合，所以只能另辟蹊径。

• 详情请看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

好，话不多说，直接上图，下面来看一下问题：

图片.png

解决之后的效果图：

图片.png

下面重点来了，我来说一下我的解决思路：我在data里定义了一个radarImg，然后wxml中判断，是否这个值是否有效，若有效，canvas隐藏；否则，显示canvas。然后在页面渲染图表时，执行了wx.canvasToTempfilepath方法，将生成的图标转化为图片。此时给radarImg赋值，canvas隐藏，image显示。下面是具体实现代码：

wxml:

<view class="canvas-content">
   <canvas
      canvas-id="radarCanvas"
      wx:if="{{!radarImg}}"
      style="width: 260px; height: 180px;">
   </canvas>
   <image wx:else src="{{radarImg}}" style="width: 260px; height: 180px;" />
</view>

js:

handleCanvarToImg(that) {
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 260,
    height: 180,
    canvasId: 'radarCanvas',   //对应canvas的id
    success: function(res) {
      that.setData({ 
        radarImg: res.tempFilePath
      });
    }
  });
},
 
// 在drawRadar之后，调用将canvas转化为图片方法(此处我是在点击按钮出现弹窗的点击事件中调用this.handleCanvarToImg(this)实现)
this.drawRadar(titleArr, countArr);
this.handleCanvarToImg(this);

好了，基本功能是实现了，顺道也说下我的小优化
初次渲染的时候会出现闪现的问题，然后我就给弹窗添加了一个动画

下面展示一个小demo

• wxml:

    <view class='shade' hidden='{{popup}}' bindtap='hidePopup'></view>
    <view class='shade_box popup' hidden='{{popup}}'>
        <view class='title'><text>弹窗：</text></view>
        <view class='content'>我是一个有动画的特效的窗口</view>
        <view class='copy'>© 2018 helang.love@qq.com</view>
        <view class='msg' bindtap='hidePopup'>点击遮罩层关闭弹窗</view>
    </view>
     
    <view  style='margin:20rpx 50rpx;'>
        <button type='primary' bindtap='showPopup'>打开弹窗</button>
    </view>

• wxss:

.shade {
  position: fixed;
  top: 0;
    right: 0;
    bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}
.shade_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 11;
  min-width: 200rpx;
  min-height: 200rpx;
    font-size: 28rpx;
  box-sizing: border-box;
  color: #333;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  word-wrap: break-word;
 
    animation-name:popup;
    animation-duration:0.2s;
    animation-timing-function:linear;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
}
 
@keyframes popup
{
    from{opacity:0;transform:scale(0.3,0.3);}
    to  {opacity:1;transform:scale(1,1);}
}
 
 
/* 当前弹窗样式 */
.popup{
    width: 600rpx;
    height: 600rpx;
    background-color: #ffffff;
}
.popup .title{
    padding: 0 20rpx;
    border-bottom: #e5e5e5 solid 1px;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 32rpx;
    background-color: #f6f6f6;
}
.popup .content{
    margin: 100rpx;
    font-size: 40rpx;
    text-align: center;
    color: #0099ff;
}
.popup .copy{
    color: #999999;
    text-align: center;
}
.popup .msg{
    color: #ff0000;
    text-align: center;
    margin-top: 30rpx;
}

• js：

Page({
  data: {
    popup: true
  },
  /* 隐藏弹窗 */
  hidePopup(flag = true) {
    this.setData({
      "popup": flag
    });
  },
  /* 显示弹窗 */
  showPopup() {
    this.hidePopup(false);
  }
})

好啦，最终完美实现想要的效果，收工~！