前言?

常见的是需求是：顶部固定，其他内容可以滚动，这时你会发现绘制的图形是会穿透所固定的顶部。并且无论你怎么给顶部区域设置css的z-index都是无效的，网上搜都是叫使用cover-view组件，然鹅我使用起来没有效果 ?

这个是在模拟器的显示效果

在这里插入图片描述

这个是在真机的显示效果，所以还是先看真机的显示效果到底有没有符号预期

使用了老的canvas渲染方式导致，canvas 组件是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上

使用 Canvas 2D接口进行渲染，设置echart属性force-use-old-canvas="true"

  <ec-canvas  force-use-old-canvas="true" canvas-id="echart-pie" ec="{{ecPie}}"></ec-canvas>

在这里插入图片描述

这种方法是以牺牲性能为代价的，官方也已经说了，不到万不得已，大家慎用吧！

最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 force-use-old-canvas=“true” 的情况下，使用新的 Canvas 2d（默认）。

使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。

在这里插入图片描述

哥，一键Ⅲ连