小程序ECharts图层级显示问题解决办法

前端

2024-01-19 08:07:12

作为一名小程序开发者，在使用ECharts绘制图表时，经常会遇到图表层级显示问题。尤其是当我们需要将图表固定在页面顶部，而其他内容可以自由滚动时，我们会发现图表会穿透固定的顶部区域，即使为其设置了z-index也无效。

ECharts图层级问题的原因

造成这一问题的根源在于微信小程序的组件渲染机制。与其他平台不同，小程序使用的是Webview渲染方式，其中canvas、video等组件被视为原生组件，其层级由系统控制，不受CSS样式影响。

解决方案

微信官方文档中也提到了这一问题，并给出了相应的解决办法：

使用fixed定位： 我们可以使用fixed定位将图表固定在页面顶部，使其不受其他滚动内容的影响。
设置绘图区域的z-index： 将图表所在区域的z-index设置为比其他组件更高的值，但需要注意的是，这个值不能高于Webview的层级。

实例代码

以下代码演示了如何使用fixed定位和设置z-index来解决小程序ECharts图层级显示问题：

// 在Page({})中
onReady() {
  const query = wx.createSelectorQuery();
  query.select('#echarts').boundingClientRect();
  query.exec(res => {
    this.setData({
      echartsHeight: res[0].height + 'px',
      echartsTop: res[0].top + 'px'
    });
  });
},

/* 在page.wxss中 */
.echarts-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 40px);
  z-index: 999;
}

.echarts {
  height: 100%;
}