小程序开发中遇到的问题(13)-微信小程序echarts图表层级太高
2018-07-30 16:51:31
需求是弹出框。 意外的是: 弹出框的层级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渲染的时候,偶尔内容不见了,会成一个黑背景,勿怪!)