Echarts graph 拖拽拓扑总结

Echarts 拖拽使用心得，当问题出现时要耐心解决

Echarts graph的临时使用

项目上出了个新需求，要求在页面上显示设备的网络拓扑结构，要求能拖拽，能连线，能显示相关数据。纳尼！ 我是个后台coder，哪会什么前端。所以网上找找相关的知识吧。。。。（没办法…………）。
网上搜了一大堆,出现一个网页上面说了5个开源的JS代码可以实现这种样式。Jtopo :就你了，先试用了下，做了两个效果。嗯就是下面这样的。不太满意。。。。。有点简单。

vis-network：画面很炫啊，就是学习成本有点高，挺好的以后有机会再用吧。。。

Echarts

最后还是老实的用大家都会的Echarts吧。毕竟很多年前就出现的东西，技术也成熟，文档也丰富。
最终实现的功能出现的坑：

1. 后台获取CGI数据：需要同步获取，异步获取出现拖拽问题。显示和最终位置不同步的情况。;
2. 前端设备可拖拽：拖拽需要重新计算位置，重新赋值刷新，还要计算页面的大小变化，不用全百分比设计画布大小了。直接固定大小。不论怎么放大缩小页面都不变化。要不然缩小页面所有设备都挤压到一起，也不好看；
3. 设备间连线不重合设计：当两个设备出现多条连线时会重合连线，需要多加判断对linkStyle:curveness多次赋值，这样就出现多条曲度的线不会重合了；
4. 拖拽的原显示样式问题：Echarts的拖拽是在原图上又添加一个可动的点，然后拖拽的点更新到原点数据上实现的。我把原点的图片换成一个透明图就完美的隐藏掉了。可拖拽点也换成原点的图片，完美解决这个问题。

##最终效果

主要代码

粘贴点主要的代码，网上的实现的例子很多都是官方的例子不能完全实现想要的东西。

		var nodes = [];
		var links = [];

		var charts = {
			nodes: [],
			links: [],
			linesData: []};

        var data=[];
		var oldDataMap = new Map();
		option = {
			title: {
				text: '',
				textStyle: {
					fontWeight: 'normal',
					color: "#FFF"
				}
			},
			backgroundColor: "#FFFFFF",
			xAxis: {
				min: -100,
                max: 100,
                type: 'value',
				splitLine:{show:true},//去除网格线
                splitArea : {show :false},//保留网格区域
                axisLine: {
					onZero: false,
					lineStyle: {
                    type:'solid',
                    color:'#000000',//坐标线的颜色
                    width:'2'//坐标线的宽度
                }
				}
			},
			yAxis: {
				min: -100,
                max: 100,
                type: 'value',
				splitLine:{show:true},//去除网格线
                splitArea : {show :false},//保留网格区域
                axisLine: {
					onZero: false,
					lineStyle: {
                    type:'solid',
                    color:'#000000',//坐标线的颜色
                    width:'2'//坐标线的宽度
                }
				}
			},				
			series: [{
				type: 'graph',
				layout: 'none',
				coordinateSystem: 'cartesian2d',
				// symbolSize: 50,
				label: {
					normal: {
						show: true,
						position: [20,55],
						color: '#2F4F4F'
					}
				},
				lineStyle: {
					normal: {
						width: 2,
						shadowColor: 'none',
						color: 'source',
						curveness:'0.06'
					}

				},
				
            emphasis: {
                focus: 'adjacency',
                lineStyle: {
                    width: 6
                }
            },
				data: charts.nodes,
				links: charts.links,
				itemStyle: {
					normal: {
						label: {
							show: true,
							formatter: function(item) {
								return item.data.name
							}
						}
					}
				}
			}]
		};
		
function onPointDragging(dataIndex, dx, dy) {
   var pos = myChart.convertFromPixel('grid', this.position);
	charts.nodes[dataIndex].value[0] = pos[0];
	charts.nodes[dataIndex].value[1] = pos[1];
	option.data= charts.nodes;
	oldDataMap.set(charts.nodes[dataIndex].name,[pos[0],pos[1]]);
    myChart.setOption(option);
}
myChart.setOption({
 graphic: echarts.util.map(data, function (item, dataIndex) {
	 return {
		 type: 'image',
			 style: {
			 image: 'img/GWHSW.png',
				 x: -25,
				  y: -25,
				   width: 60,
				 height: 60
				 },
		 position: myChart.convertToPixel('grid', item),
		 shape: {
			 r: symbolSizeDe
		 },
		 invisible: false,
		 draggable: true,
		 ondrag: echarts.util.curry(onPointDragging, dataIndex),
		 z: 100
	 };
 })
 function  setNodes(nodes){
        var len = nodes.length
        var Radis = 49;
		var x = 25;
		var y = -30;
		if(len<5){
			Radis = 66;
			x = 30;
		}

		var oldx,oldy;
		data=[];
		charts.nodes=[];
		for(var j = 1; j <= len; j++) {
			var node = {
				name: nodes[j-1].name,
				value: [x, y],
				symbolSize: 45,
				symbol: 'image://img/none.png',  //+ nodes[j-1].img
				// symbol: '',
				itemStyle: {
					normal: {
						color: '#000000',
					}
				}
			};
			if(oldDataMap.get(nodes[j-1].name) !=undefined){
				node.value = [oldDataMap.get(nodes[j-1].name)[0],oldDataMap.get(nodes[j-1].name)[1]];
				data.push([oldDataMap.get(nodes[j-1].name)[0], oldDataMap.get(nodes[j-1].name)[1]]);
			}else{
				data.push([x, y]);
			}
			charts.nodes.push(node);

			x = x+(Radis * Math.cos(2*Math.PI/nodes.length * j));
			y = y+(Radis * Math.sin(2*Math.PI/nodes.length * j));
		}
		}
function setLinks(links){
charts.links=[];
for(var i = 0; i < links.length; i++) {
	let count=1;
	if (links[i].state == 1){
		links[i].name = 'Rssi : '+links[i].value
		links[i].symbol = ['none', 'none']  //这里本来是有箭头的
		links[i].color = '#008241'
	} else{
		links[i].name = 'Rssi : '+links[i].value
		links[i].symbol = ['none', 'none']
		links[i].color = '#00a2e8'
	}
	charts.links.map(
		linkitem=>{
                if(linkitem.source==links[i].source && linkitem.target ==links[i].target){
					count++;
					count*=-1;			
                   }			//处理同向重合的连线
	});
	var link = {
		source: links[i].source,
		target: links[i].target,
		symbol: links[i].symbol,
		symbolSize: [10, 10],
		label: {
			normal: {
				show: true,
				formatter: links[i].name
			}
		},
		lineStyle: {
			normal: {
				color: links[i].color,
				curveness:0.06*count
			}
		}
	};
	charts.links.push(link);}}
	function cycleAjax(){
	var  current_mode=window.parent.document.getElementById("current_mode").value;
     $.ajax({
                type:"POST",
                url:'./web_mgr.cgi',
				async:false, 
				timeout:5000,
                dataType: "json",
				data:'operate_flag='+'get'+'&current_mode='+current_mode,
                success:function (value){ 
				// value.point='1,2,3,4';	
				// value.relation1='1_2_10 1_3_4 2_3_5 4_1_10';
				// value.relation2='1_2_22 1_3_4 2_3_5 1_4_2';
		getCgiLinks(value.relation1,value.relation2);
		setNodes(getCgiNodes(value.point));
		setLinks(links);
		option.series[0].data= charts.nodes;
		option.series[0].links= charts.links ;	
		option.data= charts.nodes;
		option.links= charts.links;		
		},
		error:function(XHR,textStatus,errorThrown){							
				}
		});}

后记

前端的东西研究的不多，基本都是什么时候想用什么时候先查，以后多研究研究H5,还挺好玩的。