ECharts多图形元素拖拽点异常：仅首个点圆形可拖拽

我创建了一个包含3个数据点的ECharts图表，给拖拽操作添加了两种图形元素：圆形和虚线矩形。其中圆形拖拽要作用于所有3个数据点，矩形拖拽用于图表整体垂直平移。但同时返回两种图形元素时，只有首个数据点的圆形能拖拽，单独返回一种元素时功能正常。

问题细节 #

• 当前效果：仅第一个数据点的圆形可拖拽，其余两个圆形无法拖拽
• 预期效果：3个数据点的圆形都能正常拖拽，虚线矩形也能正常实现整体垂直平移

相关代码 #

myChart.setOption({
    graphic: data.map(function (item, dataIndex) {
      
      let rec = {
        type: 'group',
        left: 'center',
        position: myChart.convertToPixel('grid', item),
        draggable: 'vertical',
        ondrag: function (dx, dy) {
          onPointDraggingLine(dataIndex, [this.x, this.y]);
        },

        children: [
          {
            type: 'rect',
            top: '200x',
            shape: {
              width: 470,
              height: 0
            },
            style: {
              stroke: 'gray',
              lineWidth: 5,
              lineDash: [6]
            },
            cursor: 'move'
          }
        ]
      };
      let onlyCrc = {
        type: 'circle',
        position: myChart.convertToPixel('grid', item),
        draggable: true,
        ondrag: function (dx, dy) {
          onPointDragging(dataIndex, [this.x, this.y]);
        },
        shape: {
          cx: 0,
          cy: 0,
          r: symbolSize / 2
        },
        invisible: false,

        z: 100,
        cursor: 'move'
      };
   
      return { elements: [rec, onlyCrc] };
       
    })
  }); 

问题原因及解决方案 #

原因分析 #

当前通过data.map返回多个带elements的对象，不符合EChartsgraphic配置的要求——它要么接受单个包含elements数组的配置对象，要么直接接受图形元素对象的数组。这种写法会让每个数据点对应的图形组互相干扰，导致仅第一个组的圆形能响应拖拽。另外，用于整体平移的矩形不需要重复创建，一个就够。

修正代码 #

// 生成所有数据点对应的圆形拖拽元素
const circleElements = data.map(function (item, dataIndex) {
  return {
    type: 'circle',
    position: myChart.convertToPixel('grid', item),
    draggable: true,
    ondrag: function (dx, dy) {
      onPointDragging(dataIndex, [this.x, this.y]);
    },
    shape: {
      cx: 0,
      cy: 0,
      r: symbolSize / 2
    },
    invisible: false,
    z: 100,
    cursor: 'move'
  };
});

// 生成单个用于整体垂直平移的矩形组
const rectGroup = {
  type: 'group',
  left: 'center',
  position: myChart.convertToPixel('grid', [data[1][0], data[1][1]]),
  draggable: 'vertical',
  ondrag: function (dx, dy) {
    onPointDraggingLine(0, [this.x, this.y]);
  },
  children: [
    {
      type: 'rect',
      top: '200px', // 修正原代码中"200x"的笔误
      shape: {
        width: 470,
        height: 0
      },
      style: {
        stroke: 'gray',
        lineWidth: 5,
        lineDash: [6]
      },
      cursor: 'move'
    }
  ]
};

// 将所有图形元素合并为一个数组传入graphic配置
myChart.setOption({
  graphic: [...circleElements, rectGroup]
});

关键修改点 #

• 拆分圆形和矩形元素的创建逻辑，矩形组只生成一次，避免冗余
• 将所有图形元素合并成单个数组直接赋值给graphic，符合ECharts配置规范
• 修正矩形top属性的笔误，从200x改为200px

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