ECharts设置cartesian2d后拖拽节点缩放复位问题及draggable版本咨询

一、拖拽节点后缩放回到初始位置的原因及解决方案 #

原因 #

当graph系列配置coordinateSystem: 'cartesian2d'时，节点的位置完全由data数组中每个项的value（即[x,y]坐标）决定。拖拽节点时，ECharts仅临时修改了节点的视觉显示位置，但并未同步更新option.series[0].data中对应的value值。触发dataZoom缩放操作时，ECharts会重新基于原始的value计算节点在缩放后坐标系中的位置，导致节点回到初始坐标。

解决方案 #

监听graph的dragend事件，在拖拽结束后将节点的当前坐标同步更新到option的data数组中，确保后续dataZoom操作使用最新的位置数据。

修改后的代码示例：

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

var app = {};
var option;

option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  xAxis: {
    min: 0,
    max: 400,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  yAxis: {
    min: 0,
    max: 200,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  dataZoom: [{
    type: 'inside',
    xAxisIndex: [0],
    filterMode: 'empty'
  }, {
    type: 'inside',
    yAxisIndex: [0],
    filterMode: 'empty'
  }],
  series: [{
    type: 'graph',
    coordinateSystem: 'cartesian2d',
    layout: 'none',
    symbolSize: 50,
    label: {
      show: true
    },
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [4, 10],
    data: [{
      name: 'A',
      symbol: 'rect',
      symbolSize: [50, 30],
      value: [100, 100]
    }, {
      name: 'B',
      symbol: 'circle',
      symbolSize: 40,
      value: [300, 100]
    }],
    links: [{
      source: 'A',
      target: 'B'
    }],
    lineStyle: {
      opacity: 0.9,
      width: 2,
      curveness: 0
    },
    draggable: true
  }]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

// 监听拖拽结束事件，同步更新节点坐标
myChart.on('graphnode_dragend', function(params) {
  // 将像素坐标转换为笛卡尔坐标系的数值坐标
  var newCoord = myChart.convertFromPixel({seriesIndex: 0}, params.event.offset);
  // 更新option中对应节点的value值
  option.series[0].data.forEach(item => {
    if (item.name === params.data.name) {
      item.value = newCoord;
    }
  });
  // 重新设置option，确保数据同步
  myChart.setOption(option);
});

window.addEventListener('resize', myChart.resize);

二、draggable属性的生效版本 #

draggable属性在ECharts 3.0.0版本开始正式引入并支持。在graph系列中，无论是默认坐标系还是cartesian2d坐标系，该属性从3.0.0版本起即可控制节点是否可拖拽，后续3.x、4.x、5.x版本均对其进行了兼容性和功能优化。

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