小程序开发中遇到的问题(13)-微信小程序echarts图表层级太高

需求是弹出框。 意外的是： 弹出框的层级z-index无论设置多高，图表canvas永远都浮动在了弹出层上；

网上查找 ，一些大佬说用cover-view 试一下。 去官网看到api解释cover-view：

”覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。“

这样看，似乎就是我们想要的东西，然后看官网示例的时候，就有点迷糊了

<pre>
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">  
  <cover-view class="controls">
    <cover-view class="play" bindtap="play">
      <cover-image class="img" src="/path/to/icon_play" />
    </cover-view>
    <cover-view class="pause" bindtap="pause">
      <cover-image class="img" src="/path/to/icon_pause" />
    </cover-view>
    <cover-view class="time">00:00</cover-view>
  </cover-view>
</video>
</pre>

如果理解得不错的话，cover-view应该在map、video、canvas、camera、live-player、live-pusher

打开ec-canvas

<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
bindinit="init"
bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
</canvas>

这cover-view应该加在哪里呀？

难道这样写

<cover-view>
<ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>
</cover-view>

微信开发者工具报错提示 内只能嵌套 和 ，ec-canvas/ec-canvas 标签的子节点树在真机上都会被忽略。

打开真机一看，果然，什么图都没了。。。。。。肿么办。。。苦寻解决方案无果。。

最后的最后，妥协了。这样解决了问题

 <view class="shit-wechat" hidden="{{filter|| filterOpen}}">
          <ec-canvas id="mychart-dom-multi-scatter" canvas-id="mychart-multi-scatter" ec="{{ ecScatter }}"></ec-canvas>
</view>

解决思路。 弹框弹出的时候，设置 图表的hidden为true; 虽然没有完全解决问题，将就用了 ！

(给小程序阅读此文的朋友致歉：富文本编辑器编辑后，小程序中wxParse渲染的时候，偶尔内容不见了，会成一个黑背景，勿怪！）