钉钉小程序调用interaction时报错，无法通过require直接引入

[ylnyln123]

钉钉小程序使用my-f2图表的时候无法支持interaction的交互事件，在小程序页面js文件内使用require('@antv/f2/lib/interaction/pie-select')引入页面直接报错can not find page:xxxx/xxx/xxx，import也不行，调用方式： chart.interaction('pie-select', {cancelable: true }),由于项目需要，望该开源项目开发者百忙之中抽出部分时间帮助一下，欢迎直接留言我的邮箱[email protected]

[ylnyln123]

钉钉小程序使用my-f2图表的时候无法支持interaction的交互事件，在小程序页面js文件内使用require('@antv/f2/lib/interaction/pie-select')引入页面直接报错can not find page:xxxx/xxx/xxx，
import也不行，调用方式： chart.interaction('pie-select', {cancelable: true }),
由于项目需要，望该开源项目开发者百忙之中抽出部分时间帮助一下，欢迎直接留言我的邮箱[email protected]

[SteveSuv]

可以自己定义onTouchStart，onTouchMove，onTouchEnd方法来实现各种交互

[ylnyln123]

你好，十分感谢回复，目前遇到的问题是点击之后可以获取到点击事件，但是当选中环形图之后再次点击无法取消，在文档中查到： 1、交互模块默认没有打包至 @antv/f2 模块包中。使用时需要手动引入，2、chart.interaction('pie-select'{cancelable: {Boolean}, // 是否允许取消选中，默认值为 true，表示允许},但是小程序中再次点击无法取消，所以想要引入interaction来解决此问题，或者还有别的办法可以实现再次点击取消选中吗？附上此时图表状态图片，期待回复

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "antvis/my-f2" <[email protected]&gt;; 发送时间:&nbsp;2020年11月16日(星期一) 下午3:29 收件人:&nbsp;"antvis/my-f2"<[email protected]&gt;; 抄送:&nbsp;"叶立楠的邮箱"<[email protected]&gt;;"Author"<[email protected]&gt;; 主题:&nbsp;Re: [antvis/my-f2] 钉钉小程序调用interaction时报错，无法通过require直接引入 (#73) 可以自己定义onTouchStart，onTouchMove，onTouchEnd方法来实现各种交互 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ylnyln123]

可以自己定义onTouchStart，onTouchMove，onTouchEnd方法来实现各种交互
目前遇到的问题是点击之后可以获取到点击事件，但是当选中环形图之后再次点击无法取消，在文档中查到：
1、交互模块默认没有打包至 @antv/f2 模块包中。使用时需要手动引入，2、chart.interaction('pie-select'{cancelable: {Boolean}, // 是否允许取消选中，默认值为 true，表示允许},但是小程序中再次点击无法取消，所以想要引入interaction来解决此问题，或者还有别的办法可以实现再次点击取消选中吗？

[Jerryqun]

请问钉钉小程序调用interaction时报错 这个问题你解决了吗

[SteveSuv]

intercation基于Hammer.js手势库，只支持H5，并不支持小程序。
如果要在小程序中使用手势事件，需要自己定义onTouchStart，onTouchMove，onTouchEnd。

当选中环形图之后再次点击无法取消可以这样解决：

 onTouchStart(e) {
      //根据点击坐标获取对应的元素
      const data = this.chart.getSnapRecords(e.touches[0])[0];
        //显示此元素的tooltip
      this.chart.showTooltip(e.touches[0]);
  },
  onTouchMove(e) {
    //根据点击坐标获取对应的元素
    const data = this.chart.getSnapRecords(e.touches[0])[0];
    //显示此元素的tooltip
    this.chart.showTooltip(e.touches[0]);
  },
  onTouchEnd() {
      //取消显示此元素的tooltip
      this.chart.showTooltip(false);
  }