前言

使用過echart插件開發(fā)小程序的同學(xué)，應(yīng)該都會(huì)遇到這個(gè)問題。尤其常見的是需求是：頂部固定，其他內(nèi)容可以滾動(dòng) ，這時(shí)你會(huì)發(fā)現(xiàn)繪制的圖形是會(huì)穿透所固定的頂部，并且無論你怎么給頂部區(qū)域設(shè)置css的z-index都是無效的。
來看下案發(fā)現(xiàn)場例子：

穿透頂部

穿透彈出選擇器

其實(shí)微信官方有寫到，諸如canvas，video等組件是使用客戶端創(chuàng)建的原生組件，而原生組件的層級是最高的，所以頁面中的其他組件無論設(shè)置 z-index 為多少，都無法蓋在原生組件上。為了解決這個(gè)問題，官方提供了cover-view 與 cover-image這兩個(gè)組件，這兩個(gè)組件其實(shí)也是使用原生組件進(jìn)行渲染，所以可以在顯示層級上覆蓋其他原生組件，但是也有一些明顯使用限制：

截取自cover-view文檔

實(shí)戰(zhàn)踩坑分享(基于taro框架開發(fā))

頭部實(shí)現(xiàn)

其實(shí)這里只需要將普通的view組件換成cover-view即可，fixed定位于頂部

畫線

既然無法實(shí)現(xiàn)單邊border，那要怎么畫單條線呢？
聰明的你可能想到了利用移動(dòng)端1px線條的畫法，例如：

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

遺憾的是經(jīng)過測試，該寫法無效；

需要注意的是，很多情況下開發(fā)者工具模擬器可以達(dá)到正常想要效果，真機(jī)就不能，所以開發(fā)時(shí)一定要用真機(jī)調(diào)試

這邊就利用一個(gè)空殼cover-view實(shí)現(xiàn)，例如底部線條：

.cover-border-b{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px; // 這邊開發(fā)用了taro框架，實(shí)際高度相當(dāng)于小程序2rpx單位
        background-color: #ededed; // 邊框顏色
   }

使用：放置直接父元素下面，并將其父元素設(shè)置position:relative屬性;

<CoverView className='cover-border-b'></CoverView>

彈出層選擇器

穿透問題

同理，將彈出層實(shí)現(xiàn)全部換成cover-view，上面提到過cover-view能嵌套的組件只有cover-view,cover-image及button,這樣有個(gè)很大的問題就是無法使用picker組件了。

遇到的坑

正常情況下，彈出層都會(huì)以一個(gè)單獨(dú)的組件抽離出來。這邊實(shí)踐發(fā)現(xiàn)，抽離出來后，卻無法直接在組件中通過this.props.children獲取到數(shù)據(jù)進(jìn)行渲染：

<FloatLayoutCover>
        <CoverView>test text</CoverView>
        <CoverView>test text</CoverView>
        <CoverView>test text</CoverView>
</FloatLayoutCover>

以上寫法真機(jī)中是無法渲染出數(shù)據(jù)的，測試發(fā)現(xiàn)只傳文字時(shí)才會(huì)進(jìn)行渲染：

<FloatLayoutCover>
        test text
        test text
        test text
</FloatLayoutCover>

但這個(gè)寫法是毫無意義的，都無法對其設(shè)置樣式。最后是以數(shù)據(jù)形式傳入，在組件內(nèi)部對數(shù)據(jù)進(jìn)行處理：

<FloatLayoutCover
     title='選擇時(shí)間'
     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>

最后實(shí)現(xiàn)效果：

最終效果

最后

如果你也是基于taro框架進(jìn)行echart開發(fā)的話，在初始編譯完成打開項(xiàng)目運(yùn)行的時(shí)候（npm run dev:weapp），應(yīng)該也會(huì)遇到下面這個(gè)報(bào)錯(cuò)。

getAxis of undefined錯(cuò)誤

被這個(gè)問題坑了很長一段時(shí)間，最后發(fā)現(xiàn)是每次重新編譯時(shí)，taro框架不僅僅是將我存放echart.js文件移動(dòng)到dist對應(yīng)目錄下，還對它進(jìn)行了某種處理，導(dǎo)致實(shí)際運(yùn)行的dist目錄下的echart.js文件被破壞了，只能每次冷編譯完成后，手動(dòng)將開發(fā)目錄下的echart.js替換掉dist目錄下編譯生成的。
如果你對此問題有更好的辦法，歡迎留言，謝謝。