小程序echart图层级显示问题

前言

使用过echart插件开发小程序的同学，应该都会遇到这个问题。尤其常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会穿透所固定的顶部，并且无论你怎么给顶部区域设置css的z-index都是无效的。 来看下案发现场例子：

其实微信官方有写到，诸如canvas，video等组件是使用客户端创建的原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。为了解决这个问题，官方提供了cover-view 与 cover-image这两个组件，这两个组件其实也是使用原生组件进行渲染，所以可以在显示层级上覆盖其他原生组件，但是也有一些明显使用限制：

我从实际开发来看，最棘手的限制就是cover-view能嵌套的组件太少，内部只能嵌套cover-view,cover-image及button，样式上不支持单边border，单边radius，及shadow阴影。 下面这张是设计师原图，可以看到顶部tab按钮是用到了单边radius，这就无法实现了。

实战踩坑分享(基于taro框架开发)

头部实现

其实这里只需要将普通的view组件换成cover-view即可，fixed定位于顶部

画线

既然无法实现单边border，那要怎么画单条线呢？ 聪明的你可能想到了利用移动端1px线条的画法，例如：

    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-image: linear-gradient(0,#ededed,#ededed 50%,transparent 50%);
复制代码

遗憾的是经过测试，该写法无效；

需要注意的是，很多情况下开发者工具模拟器可以达到正常想要效果，真机就不能，所以开发时一定要用真机调试

这边就利用一个空壳cover-view实现，例如底部线条：

.cover-border-b{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px; // 这边开发用了taro框架，实际高度相当于小程序2rpx单位
        background-color: #ededed; // 边框颜色
   }
复制代码

使用：放置直接父元素下面，并将其父元素设置position:relative属性;

<CoverView className='cover-border-b'></CoverView>
复制代码

弹出层选择器

穿透问题

同理，将弹出层实现全部换成cover-view，上面提到过cover-view能嵌套的组件只有cover-view,cover-image及button,这样有个很大的问题就是无法使用picker组件了。

遇到的坑

正常情况下，弹出层都会以一个单独的组件抽离出来。这边实践发现，抽离出来后，却无法直接在组件中通过this.props.children获取到数据进行渲染：

<FloatLayoutCover>
        <CoverView>test text</CoverView>
        <CoverView>test text</CoverView>
        <CoverView>test text</CoverView>
</FloatLayoutCover>
复制代码

以上写法真机中是无法渲染出数据的，测试发现只传文字时才会进行渲染：

<FloatLayoutCover>
        test text
        test text
        test text
</FloatLayoutCover>
复制代码

但这个写法是毫无意义的，都无法对其设置样式。最后是以数据形式传入，在组件内部对数据进行处理：

<FloatLayoutCover
     title='选择时间'
     isOpened={panelShow}
     onConfirm={this.handleResult.bind(this)}
     showCloseIcon={false}
     contentHeight={400}
     data={data}
     activeIndex={activeIndex}
>
</FloatLayoutCover>
复制代码

<CoverView className='layout-body' style={{height: contentHeight + 'rpx'}}>
     {
        data.map((item,index) => {
            return 
              <CoverView 
                  className={`${index === activeIndex && 'active'} option-item`} 
                  onClick={() => this.props.onConfirm(index)}>
              {item}
            </CoverView>
       })
     }
</CoverView>
复制代码

最后实现效果：

最后

如果你也是基于taro框架进行echart开发的话，在初始编译完成打开项目运行的时候（npm run dev:weapp），应该也会遇到下面这个报错。

被这个问题坑了很长一段时间，最后发现是每次重新编译时，taro框架不仅仅是将我存放echart.js文件移动到dist对应目录下，还对它进行了某种处理，导致实际运行的dist目录下的echart.js文件被破坏了，只能每次冷编译完成后，手动将开发目录下的echart.js替换掉dist目录下编译生成的。 如果你对此问题有更好的办法，欢迎留言，谢谢。