Echarts3 关系图

相关代码

页面部分

<div style="height: 100%;margin: 0">
    <div id='chart-lesMiserables' style="float: left;padding-top: 20px;width: 100%;color:#A52A2A">div>
    <div id="chart-container" style="height: 100%">div>
div>

配置项

var categories = [{"name":"A","icon":"roundRect"},{"name":"B","icon":"rect"},{"name":"C","icon":"circle"}];
var nodes = [{"id":"1","name":"1","symbol":"roundRect","category":0},{"id":"2","name":"2","symbol":"rect",,"category":1},{"id":"3","name":"3","symbol":"circle","category":2}];
var links = [{"source":"1","target":"2"},{"source":"2","target":"3"}];
nodes.forEach(function (node) {
		node.label = {
	      show: true,
	      position : 'inside'
	    };
	});
	var chartDom = document.getElementById('chart-container');
	var myChart = echarts.init(chartDom);
	var option = {
	    title: {
	      text: '',
	      subtext: 'Default layout',
	      top: 'bottom',
	      left: 'right'
	    },
	    tooltip: {},
	    legend: [
	      {
	    	show : true,
	        data: categories
	      }
	    ],
	    animationDuration: 1500,
	    animationEasingUpdate: 'quinticInOut',
	    series: [
	      {
	        name: '',
	        type: 'graph',
	        layout: 'force', //图的布局，'force'类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
	        symbolSize: 50,
	        data: nodes,
	        links: links,
	        categories: categories,
	        roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
	        coordinateSystem : null,//坐标系可选
            xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex : 0, //y轴坐标 
            nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
            focusNodeAdjacency : true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
	        force: {
                repulsion: 500,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                edgeLength: [150, 100],//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                layoutAnimation : true
                // 因为力引导布局会在多次迭代后才会稳定, 这个参数决定是否显示布局的迭代动画(节点数量过多, 图在迭代的过程中会旋转),
                // 在浏览器端节点数据较多(>100)的时候不建议关闭, 布局过程会造成浏览器假死。
	        },
            edgeSymbolSize: [4, 15],
	        edgeSymbol: ['none', 'arrow'],
	        //symbol:'roundRect',//关系图节点标记的图形。ECharts 提供的标记类型包括 'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）  也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
            //symbolSize:10 ,//也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
            //symbolRotate:,//关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
            //symbolOffset:[0,0],//关系图节点标记相对于原本位置的偏移。[0, '50%']
	        label: {
	          position : 'inside',//标签的位置。['50%', '50%'] [x,y]
	          formatter: '{b}'
	        },
	        lineStyle: {
	          color: 'source',
	          curveness: 0,
	          opacity : 1
	        },
	        emphasis: {
	          focus: 'adjacency',
	          lineStyle: {
	            width: 10
	          }
	        }
	      }
	    ]
    };
    myChart.setOption(option);
	option && myChart.setOption(option);

鼠标移动显示节点所有父节点关系

function appendPath(params){    //拼接节点关系并显示在左下角，
        var option = myChart.getOption();
        var series = option.series[params.seriesIndex]; //获取图表
        var nodesOption = series.data;//获取所有数据
        var links= series.links;//获取所有连线
        if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
            var id=params.data.id;
            var i = 0;
            var map = {};
            for( i = 0 ; i < links.length; i++){
                map[links[i].target] = links[i].source;
            }
            var nameMap = {};
            for( i = 0 ; i < nodesOption.length; i++){
            	nameMap[nodesOption[i].id] = nodesOption[i].name;
            }
            var str=nameMap[id];
            while(true){           
                if(map[id] == undefined){
                    break;
                }
                //获取父节点的图例名称并连接
                str =nameMap[map[id]]+"->" + str; 
                id = map[id] ;
            }
            return str;
        }else if(params.dataType=="edge"){ //当鼠标停留在连线上时，暂不处理
            return "";
        }
    }
    
    function openOrFold(params) {  //该事件会提示节点间关系
        var str = appendPath(params);
        document.getElementById("chart-lesMiserables").innerHTML = str;
        return str;
    }
    myChart.on('mouseover', openOrFold);

点击事件

动态添加子节点

myChart.on('click', function (params){
        if (params.dataType == 'node') {
        	var option = myChart.getOption();
            var series = option.series[params.seriesIndex]; //获取图表
            var links= series.links;//获取所有连线
            for(var i = 0 ; i < links.length; i++){
                if (links[i].source == params.data.id) {
                	return;
                }
            }
            var nodesOption = series.data;//获取所有数据
        	$.ajaxSettings.async = false;
			$.ajax({
				url : "",
				type : "get",
				async : false,
				data : {
					"id" : params.data.id
				},
				dataType : "json",
				success : function(data) {
					//将其过滤,去掉和父节点重复的
					for (var i = 0; i < data.length; i++) {
						if (data[i].id == params.data.id) {
							continue;
						}
						option.series[params.seriesIndex].data.push({id: data[i].id, name: data[i].name ,symbol: "circle", category: categories.length-1 ,label:{position: "inside",show: true}})
					    option.series[params.seriesIndex].links.push({source: params.data.id, target: data[i].id})
					}
					if (data.length > 0) {
						myChart.setOption(option);
					}
				}
			});
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

保存为图片

var downloadfun = function() { //下载
	    var canvas = $('#chart-container canvas')[0];
	    //canvas画图片
		var a = document.createElement("a");
		var fileName = yxhhqymc.replace(new RegExp( '"' , "g" ), "");
		fileName = fileName.replace(new RegExp( '\'' , 'g' ), '');
		fileName = fileName.replace(new RegExp( '/' , 'g' ), '');
		fileName = fileName.replace(/\\/g, '');
		fileName = fileName.replace(/\?/g, '');
		fileName = fileName.replace(/\*/g, '');
		fileName = fileName.replace(new RegExp( ':' , 'g' ), '');
		fileName = fileName.replace(new RegExp( '<' , 'g' ), '');
		fileName = fileName.replace(new RegExp( '>' , 'g' ), '');
		fileName = fileName.replace(new RegExp( '|' , 'g' ), '');
		fileName = fileName.replace(/[|]/g,'');
		fileName = fileName.replace(new RegExp( ';' , 'g' ), '');
		fileName = fileName.replace(new RegExp( ',' , 'g' ), '');
		fileName = fileName.replace(/\+/g, '');
		fileName = fileName.replace(new RegExp( '=' , 'g' ), '');
		a.download = fileName;
		a.href= canvas.toDataURL("image/png");
		a.click();
	}

Echarts3 关系图相关地址

官方地址：https://echarts.apache.org/examples/zh/editor.html?c=graph

官方API：https://echarts.apache.org/zh/option.html#title

节点可拖拽，添加节点和边的点击事件：https://blog.csdn.net/Mu_Yue_Yue/article/details/90375758

力导向布局图：https://www.cnblogs.com/koala2016/p/6123003.html