echarts 关系图节点拖拽

最近做了一个需求，应用关系图，节点可拖拽并保存坐标，本篇记录一下拖拽功能

拖拽代码如下

moveNodes() {

      this.myChart.on("mouseup",(params)=>{

     //更新节点坐标

        staticData.forceData[params.dataIndex].x = params.event.offsetX;

        staticData.forceData[params.dataIndex].y = params.event.offsetY;

    //更新画布

        this.myChart.setOption({

          series: [

            {

              type: "graph",

              data: staticData.forceData

            }

          ]

        });

     //更新图表布局（图表可能会因为拖拽使得节点位置改变而自适应缩放）

        this.myChart.resize();

      })

    }

需要注意的是，需要在节点中加入fixed:true属性和draggable:true属性

保存坐标功能，需要获取节点在画布中的坐标，否则下次渲染会发现节点位置与拖拽位置不一致

//获取节点在画布中的坐标

        let nodeCode=this.myChart._chartsViews[0]._symbolDraw._data._itemLayouts[params.dataIndex];

        staticData.forceData[params.dataIndex].x = nodeCode[0];

        staticData.forceData[params.dataIndex].y = nodeCode[1];

调用接口保存到数据库中，下次调用节点信息，重新渲染图表会发现节点位置没有偏差