微信小程序echart图表canvas层级太高覆盖解决办法

最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。

微信小程序echarts组件：echarts-for-wx。 先看症状：

解决办法一：

发现原来的echarts-for-wx组件里有个方法。把canvas转成图片，却滚动时可以把转成图片显示，原来canvas设置隐藏 初始化echart后： 效果图：

演示小程序

代码：

canvasToTempFilePath(opt) {
      if (this.data.isUseNewCanvas) {
        // 新版
        const query = wx.createSelectorQuery().in(this)
        query.select('.ec-canvas').fields({ node: true, size: true }).exec(res => {
            const canvasNode = res[0].node
            opt.canvas = canvasNode
            wx.canvasToTempFilePath(opt)
          })
      } else {
        // 旧的
        if (!opt.canvasId) {
          opt.canvasId = this.data.canvasId;
        }
        ctx.draw(true, () => {
          wx.canvasToTempFilePath(opt, this);
        });
      }
    },

在调用页面

data:{
	echarts_show: true,
    canvas_image: '',
}
initChart()
{
var ec_Component = this.selectComponent('#mychart-dom-line');
setTimeout(()=>{
  ec_Component.canvasToTempFilePath({
    success: res => {
      // console.log('drawSuccess', res.tempFilePath);
      this.setData({
        canvas_image: res.tempFilePath,
      })
    },
    fail: res => console.log('失败', res)
  })
},1000)
}
//滚动到临界点时隐藏canvas,显示图片
onPageScroll()
{
	let query = wx.createSelectorQuery()
    query.select('#tide-echart').boundingClientRect((rect) => {
      let top = rect.top;
      //缓存图片不要在这里设置，在inchart时就设置，防止切换图片闪烁
        this.setData({
          echarts_show: false,
        })
      } else {
        this.setData({
          echarts_show: true,
          // canvas_image:''
        })
      }
    }).exec()
}

wxml页面:

<view class="tide-box" id="tide-echart">
  <view class="container" hidden="{{!echarts_show}}">
    <ec-canvas id="mychart-dom-line" type="2d" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  </view>
  <image class="canvas-image" src="{{canvas_image}}" hidden="{{echarts_show}}"></image>
</view>

这种方式有个问题就是滚动位置有点闪烁，过渡不理想。

解决方法二

最后使用cover-view代替view,即头部固定导航栏里全部用cover-view标签。可以设置z-index，比canvas高就行。

功能描述

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。