chart 完成拓扑图单节点拖拽不影响其他节点位置

本文主要是介绍chart 完成拓扑图单节点拖拽不影响其他节点位置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。

拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。
参考
https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9
https://echarts.baidu.com/examples/editor.html?c=line-draggable&qq-pf-to=pcqq.group
这两篇文章结合，然后再自己调试出来的。

如果需要在画布上画区域的话，建议用markArea不要用markline。这样一个域可以省两个坐标点绘制，而且域也不会像markline那样因为坐标超出画布就不显示连接的线了。

我这是在用vue项目调试的，所以demo是一个vue文件，echat版本应该是4.2的，不过只要版本不是太低应该都没啥问题

贴下主要的代码：

var option = {title: {text: '网络拓扑图'},backgroundColor: "#F5F5F5",xAxis: {min: 0,max: 12,show: false,type: 'value'},yAxis: {min: 0,max: 12,show: false,type: 'value'},series: [{type: 'graph',layout: 'none',id:'a',// coordinateSystem: 'cartesian2d',coordinateSystem: 'cartesian2d',edgeSymbol: ['','arrow'],// symbolSize: 20,
//                force: {
//                  repulsion: 1000,
//                  edgeLength: [150, 200],
//                  layoutAnimation: false
//                },label: {normal: {show: true,position: 'bottom',color: '#12b5d0'}},lineStyle: {normal: {width: 2,shadowColor: 'none'}},xAxis: {min: 0,max: 12,show: false,type: 'value'},yAxis: {min: 0,max: 12,show: false,type: 'value'},// edgeSymbolSize: 8,draggable:true,data: charts.nodes,links: charts.links,itemStyle: {normal: {label: {show: true,formatter: function(item) {return item.data.name}}}}}, {name: 'A',type: 'lines',coordinateSystem: 'cartesian2d',edgeSymbol: ['circle', 'arrow'],effect: {show: true,trailLength: 0,// constantSpeed: 30,symbol: 'arrow',// color: '#12b5d0',color:'#FF0000',symbolSize: 22},data: charts.linesData}]};myChart.setOption(option);// setTimeout(function () {// Add shadow circles (which is not visible) to enable drag.myChart.setOption({graphic: echarts.util.map(charts.nodes, function (item, dataIndex) {return {type: 'circle',position: myChart.convertToPixel('grid', item.value),shape: {cx: 5,cy: 5,r: 20},invisible: true,draggable: true,ondrag: echarts.util.curry(onPointDragging, dataIndex),onmousemove: echarts.util.curry(showTooltip, dataIndex),onmouseout: echarts.util.curry(hideTooltip, dataIndex),z: 100};})});function onPointDragging(dataIndex, dx, dy) {var tempV = myChart.convertFromPixel('grid', this.position);charts.nodes[dataIndex].value = [tempV[0],tempV[1]];// Update datamyChart.setOption({series: [{id: 'a',data: charts.nodes}]});}function showTooltip(dataIndex) {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: dataIndex});}function hideTooltip(dataIndex) {myChart.dispatchAction({type: 'hideTip'});}// }, 50);window.addEventListener('resize',function(){myChart.resize();myChart.setOption({series: [{id: 'a',data: charts.nodes}]});
});

还有的节点以及连线的代码参考第一篇文章，我这边的节点图片需要更换下自己项目中对应的图片地址，最好是在src外面层的其他目录下，比如外建一个static目录存放图片

最后附上demo文件下载地址：(原本是想把下载积分改为1最低的，但是现在上传资源时没得设置了，默认为5积分)
https://download.csdn.net/download/u012138137/11136186
这个是后续做了点优化卡顿的问题，增加异常设备闪动的效果(demo中的图片路径需要自己更换成本地的图标)。
https://download.csdn.net/download/u012138137/11191900

这篇关于chart 完成拓扑图单节点拖拽不影响其他节点位置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---