如何让Apache ECharts拖拽TypeScript示例在Angular中正常工作？

你遇到的ECharts点拖拽失效问题，核心原因和对应修复方案如下：

1. 重复设置graphic组件导致覆盖 #

代码中makeDraggable和addEventListeners两个方法都调用setOption配置graphic组件，后执行的addEventListeners会完全覆盖前者的配置，导致拖拽逻辑被冲掉。

修复：将两处graphic配置合并为一次设置，避免重复覆盖。

2. 函数this指向丢失 #

使用普通function定义回调时，this指向的是回调自身上下文，而非Angular组件实例，导致onPointDragging等方法无法访问组件的echartsIntance属性。

修复：改用箭头函数定义回调，确保this始终指向组件实例。

3. 冗余参数传递增加复杂度 #

无需将组件内部方法（如showTooltip）作为参数传入其他方法，直接通过this调用即可，减少不必要的this指向风险。

修改后的关键代码片段 #

onChartInit(echarts) {
  this.echartsIntance = echarts;
  // 合并拖拽相关的graphic配置，仅调用一次setOption
  this.initDraggablePoints(echarts);
}

initDraggablePoints(echartsIntance: any) {
  echartsIntance.setOption({
    graphic: data.map((item, dataIndex) => {
      return {
        type: 'circle',
        position: echartsIntance.convertToPixel('grid', item),
        shape: { cx: 0, cy: 0, r: symbolSize / 2 },
        invisible: true,
        draggable: true,
        ondrag: function() {
          // 这里保留普通函数，因为需要通过this获取当前图形的坐标
          const pos = [this.x, this.y];
          this.onPointDragging(dataIndex, pos);
        }.bind(this), // 绑定组件实例的this
        onmousemove: () => this.showTooltip(dataIndex),
        onmouseout: () => this.hideTooltip(dataIndex),
        z: 100,
      };
    })
  });
}

onPointDragging(dataIndex: number, pos: number[]) {
  if (!this.echartsIntance) return;
  data[dataIndex] = this.echartsIntance.convertFromPixel('grid', pos);
  
  this.echartsIntance.setOption({
    series: [
      {
        id: 'a',
        data: [...data], // 解构数组触发ECharts重新渲染
      },
    ],
  });
}

内容的提问来源于stack exchange，提问作者Ole