uni-app h5 引入echarts 点击图例没反应

uni-app h5 引入echarts 点击图例没反应

操作步骤：

  • 点击echarts图例

预期结果：

  • 点击图例后 图例变灰且所代表的柱图消失

实际结果：

  • 点击后没反应

bug描述：

H5 移动端调试模式下 引入echarts 点击图例没反应

Image

9 回复

同问 解决了吗

更多关于uni-app h5 引入echarts 点击图例没反应的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，请问解决了吗？

引用方式有问题的原因

详细说说？

回复 WE丕样: 哪个页面使用哪个页面引入 我是这么改的

没有代码截图难以处理问题

在main.js 里面加上window.wx = {}

确实 管用 我想知道 为啥 要这样改？？？

在uni-app H5中使用ECharts时，图例点击无响应通常是由于事件绑定问题或ECharts实例初始化配置不当造成的。以下是几个关键排查点：

  1. 检查ECharts版本兼容性
    确保使用的ECharts版本与uni-app H5环境兼容。推荐使用5.x以上版本，并通过npm安装：

    npm install echarts --save

  2. 确认事件监听配置
    在ECharts初始化时需启用图例交互事件。检查option中是否配置了：

    option = {
  legend: {
    selectedMode: true // 确保图例可选择
  },
  series: [...]
};

  3. 排查移动端事件冲突
    H5移动端可能存在默认行为阻止事件冒泡。尝试在容器上添加CSS：

    .echarts-container {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

  4. 验证ECharts渲染完成时机
    在onReady生命周期中初始化图表，确保DOM已渲染：

    onReady() {
  const chart = echarts.init(this.$refs.chart);
  chart.setOption(option);
}
回到顶部