echarts绘制graph时的问题

Question

echarts绘制graph时，在series中设置draggable为TRUE后，每次拖动节点后，节点都会返回原来的位置，怎么让节点被拖动后不回调呢

Answer 1

引自免费微信小程序：皆我百晓生

在 ECharts 中，通过 draggable 设置节点可拖拽后，默认情况下节点确实会在鼠标释放后恢复到初始位置。若想实现拖动后节点保持在新位置的效果，需要监听 'mouseup' 事件，并在事件回调中更新 series.data 中对应节点的位置信息。

以下是一个示例代码：

var chart = echarts.init(document.getElementById('main'));

// 假设已有一个 graph 数据
var option = {
    series: [{
        type: 'graph',
        layout: 'force',
        draggable: true,
        data: [
            // 节点数据...
        ],
        edges: [
            // 边数据...
        ],
        force: {
            // 引力、斥力等参数配置...
        }
    }]
};

chart.setOption(option);

// 监听鼠标释放事件
chart.on('mouseup', function (params) {
    if (params.seriesType === 'graph' && params.dataIndex !== -1) {
        var nodeData = params.data;
        // 获取当前鼠标位置，这里使用图形坐标系（即图表内相对坐标）
        var position = chart.convertFromPixel({seriesIndex: params.seriesIndex}, [params.event.zrX, params.event.zrY]);
        
        // 更新节点的 x 和 y 坐标
        option.series[0].data[nodeData.dataIndex].x = position[0];
        option.series[0].data[nodeData.dataIndex].y = position[1];

        // 应用新的option以使节点停留在新位置
        chart.setOption(option);
    }
});

请注意，上述示例代码仅适用于情况较为简单的场景，对于复杂布局或带有特定约束条件的情况，可能需要根据实际需求调整节点坐标更新逻辑。同时，在力导向图布局中，设置固定坐标可能会与布局算法产生冲突，导致视觉效果不符合预期。