问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图;
解决方案(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能):
第一步:wxml
<!-- echarts饼图——用wx:if控制dom显隐,hidden没办法隐藏 -->
<ec-canvas id="storeChart" canvas-id="storeChart" ec="{{ pieChart }}" wx:if="{{!showDate}}"></ec-canvas>
<!-- vant的日期选择控件——弹出日期控件就隐藏echarts,关闭日期控件就重新渲染echarts -->
<view class="calendar">
<van-calendar show="{{ showDate }}" color="#ff4366" type="range" bind:close="onClose" bind:confirm="onConfirm" min-date="{{ minDate }}"
max-date="{{ maxDate }}" allow-same-day/>
</view>
第二步:js
Page({
/**
* 页面的初始数据
*/
data: {
showDate: false, // 饼图、日期 显隐
//饼图
pieChart: {
lazyLoad: true // 延迟加载
},
pieData: {
data: [{
value: 10,
name: '杭州'
}, {
value: 20,
name: '广州'
}, {
value: 38,
name: '上海'
}]
},
},
// 显示日期
onDisplay() {
this.setData({
showDate: true,
});
},
// 关闭日期
onClose() {
this.setData({
showDate: false,
});
//dom节点出现需要时间,延迟一下重新渲染饼图
setTimeout(()=>{
this.pieEchartsComponnet = this.selectComponent('#storeChart'); //获取饼图dom
this.pieChart() // 饼图初始化
},0)
},
})