小程序中使用Echarts 中的 Datazoom组件导致的报错问题导致功能不能实现

本文链接：https://blog.youkuaiyun.com/m0_55638304/article/details/127062060

本文介绍了一种解决ECharts在微信环境中触摸操作时出现错误的方法。通过在echarts.vue组件中添加事件处理函数（如preventDefault等），有效解决了触摸事件触发时的报错问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

报错复现
- 参考地址
- - 代码解决报错

报错复现

在这里插入图片描述

参考地址

https://github.com/ecomfe/echarts-for-weixin/pull/853

代码解决报错

再 echarts.vue 组件修改如下

// echarts.vue 组件
touchStart(e) {
      const { disableTouch, chart } = this;
      if (disableTouch || !chart || !e.mp.touches.length) return;
      const touch = e.mp.touches[0];
      this.handler.dispatch('mousedown', {
        zrX: touch.x,
        zrY: touch.y,
         //需要添加的方法即可解决报错
        preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
      });
      this.handler.dispatch('mousemove', {
        zrX: touch.x,
        zrY: touch.y,
        //需要添加的方法即可解决报错
        preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
      });
      this.processGesture(wrapTouch(e), 'start');
    },
     touchMove(e) {
      const {
        disableTouch, throttleTouch, chart, lastMoveTime,
      } = this;
      if (disableTouch || !chart || !e.mp.touches.length) return;

      if (throttleTouch) {
        const currMoveTime = Date.now();
        if (currMoveTime - lastMoveTime < 240) return;
        this.lastMoveTime = currMoveTime;
      }

      const touch = e.mp.touches[0];
      this.handler.dispatch('mousemove', {
        zrX: touch.x,
        zrY: touch.y,
        //需要添加的方法即可解决报错
        preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
      });
      this.processGesture(wrapTouch(e), 'change');
    },
     touchEnd(e) {
      const { disableTouch, chart } = this;
      if (disableTouch || !chart) return;
      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
      this.handler.dispatch('mouseup', {
        zrX: touch.x,
        zrY: touch.y,
        //需要添加的方法即可解决报错
        preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
      });
      this.handler.dispatch('click', {
        zrX: touch.x,
        zrY: touch.y,
        //需要添加的方法即可解决报错
        preventDefault: () => {},
          stopImmediatePropagation: () => {},
          stopPropagation: () => {}
      });
      this.processGesture(wrapTouch(e), 'end');
    },