微信小程序echart图表canvas层级太高覆盖解决办法

最新推荐文章于 2026-04-14 10:14:17 发布

原创最新推荐文章于 2026-04-14 10:14:17 发布 · 3.8k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

小程序

最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。

微信小程序echarts组件：echarts-for-wx

先看症状：
在这里插入图片描述

解决办法：
发现原来的echarts-for-wx组件里有个方法。
初始化echart后：
效果图：
在这里插入图片描述小程序演示：

canvasToTempFilePath(opt) {
      if (this.data.isUseNewCanvas) {
        // 新版
        const query = wx.createSelectorQuery().in(this)
        query.select('.ec-canvas').fields({ node: true, size: true }).exec(res => {
            const canvasNode = res[0].node
            opt.canvas = canvasNode
            wx.canvasToTempFilePath(opt)
          })
      } else {
        // 旧的
        if (!opt.canvasId) {
          opt.canvasId = this.data.canvasId;
        }
        ctx.draw(true, () => {
          wx.canvasToTempFilePath(opt, this);
        });
      }
    },

在调用页面

data:{
	echarts_show: true,
    canvas_image: '',
}
initChart()
{
var ec_Component = this.selectComponent('#mychart-dom-line');
setTimeout(()=>{
  ec_Component.canvasToTempFilePath({
    success: res => {
      // console.log('drawSuccess', res.tempFilePath);
      this.setData({
        canvas_image: res.tempFilePath,
      })
    },
    fail: res => console.log('失败', res)
  })
},1000)
}
//滚动到临界点时隐藏canvas,显示图片
onPageScroll()
{
	let query = wx.createSelectorQuery()
    query.select('#tide-echart').boundingClientRect((rect) => {
      let top = rect.top;
      //缓存图片不要在这里设置，在inchart时就设置，防止切换图片闪烁
        this.setData({
          echarts_show: false,
        })
      } else {
        this.setData({
          echarts_show: true,
          // canvas_image:''
        })
      }
    }).exec()
}

wxml页面:

<view class="tide-box" id="tide-echart">
  <view class="container" hidden="{{!echarts_show}}">
    <ec-canvas id="mychart-dom-line" type="2d" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  </view>
  <image class="canvas-image" src="{{canvas_image}}" hidden="{{echarts_show}}"></image>
</view>