小程序解决canvas层级太高

---

最近在开发小程序，里面有很多图表界面，这才知道小程序canvas的坑。使用echarts在小程序上绘制图表，自定义的tab栏层级不够，页面向上滚动的时候图表在tab栏上面，并且canvas层级比调试框还高。本文介绍两种解决这种问题的方案。

一、问题的出现

二、解决方法

1.将canvas保存成图片，这个方案比较好实现，但是由于图表保存成了图片就无法响应点击事件，效果不好。

JS代码如下：

// 'mychart-dom-pie' ec-canvas的id
 const ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.canvasToTempFilePath({
    
    
      success: res => {
    
    
        console.log("tempFilePath:", res.tempFilePath)
		var path = res.tempFilePath
		//将图片设置到image上就可以了
      },
      fail: res => console.log(res)
    });

WXML代码如下：

<view class="container">
  <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{
    
    { ec }}"></ec-canvas>

</view>

WXSS代码如下：

ec-canvas {
    
    
  width: 300px;
  height: 300px;
}

2.自定义Tab栏使用cover-view、cover-image实现（推荐）

WXML代码：

<cover-view class="top-tab1 flex-wrp flex-tab">
  <cover-view class="tab" wx:for="{
    
    {navTab}}" wx:for-index="idx"
      wx:for-item="itemName" data-idx="{
    
    {idx}}" bindtap="switchTab">
    <cover-view class="tab-item" >
      {
    
    {
    
    itemName}}
    </cover-view>
    <cover-image hidden="{
    
    {currentNavtab!=idx}}" src="/images/blue_line.png" class="blue_line">
    </cover-image>
  </cover-view>
  <cover-view class="gray_line">

  </cover-view>
</cover-view>

三、总结

cover-view和cover-image应该是小程序里层级最高的控件了，结合使用可以完美解决canvas层级太高的问题。