小程序开发中遇到的问题(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渲染的时候,偶尔内容不见了,会成一个黑背景,勿怪!)

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO