uni-app renderjs使用echart时 tooltip高于uni-popup 导致uni-popup内容被覆盖

uni-app renderjs使用echart时 tooltip高于uni-popup 导致uni-popup内容被覆盖

信息类别 详情
产品分类 uniapp/App
PC开发环境 Mac
系统版本 M1 big sur 11.4
开发工具 HBuilderX
工具版本 3.1.18
手机系统 全部
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • 华为p30
  • iphone 12pro max

操作步骤：

  • 用户登录后：
    1. 点击tab栏 数据，点击顶部后弹出模态窗；
    2. 在模态窗输入栏中输入 梅西新项目001，点击确认；
    3. 选择顶部中的时间，月报表 2021-04 到 2021-07时间段进行查询，
    4. 页面通过ajax获取数据后显示echart图表后，
    5. 点击图表显示tooltip内容（蓝色框内容）；
    6. 点击顶部项目xxx弹出通过uni-popup弹出项目列表选择框（黄色框）;

预期结果：

  • 黄色框内容应当优先显示在界面的最上面，蓝色框内容会被覆盖

实际结果：

  • 问题出现：
    • 蓝色框内容会覆盖到黄色框上面，这个应该是渲染优先级错误导致，希望能得到解决；

bug描述：

  • 通过renderjs使用echart时出现的问题，疑似渲染优先级导致 uni-popup低于echart的tooltip显示

更多关于uni-app renderjs使用echart时 tooltip高于uni-popup 导致uni-popup内容被覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app renderjs使用echart时 tooltip高于uni-popup 导致uni-popup内容被覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的z-index层级冲突问题。在uni-app中使用renderjs渲染ECharts时，ECharts的canvas元素和tooltip默认会创建在较高的层级，而uni-popup组件的默认z-index可能不足以覆盖它们。

解决方案：

  1. 调整uni-popup的z-index
.uni-popup {
  z-index: 9999 !important;
}
  1. 控制ECharts tooltip的z-index 在ECharts配置中显式设置较低的z-index：
tooltip: {
  z: 100, // 设置较低的z-index值
  // 其他tooltip配置
}
  1. 使用renderjs的样式穿透 在renderjs模块中通过样式控制：
const chart = echarts.init(dom);
chart.setOption({
  tooltip: {
    // 其他配置
  }
});

// 通过CSS选择器调整tooltip层级
const tooltipEl = dom.querySelector('.echarts-tooltip');
if(tooltipEl) {
  tooltipEl.style.zIndex = '100';
}
  1. 动态控制显示时机 在弹出uni-popup时，暂时隐藏ECharts的tooltip：
// 显示popup时
chart.dispatchAction({
  type: 'hideTip'
});
回到顶部