echars力引导关系图

效果图

力引导关系图

  力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭
  代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的
  能量最小化。力引导布局的结果有良好的对称性和局部聚合性。

数据

chartData:{
          data:[
            {
              name: 'node1',
              symbolSize: 50,
              itemStyle:{
                color: '#fac858'
              }
            },
            {
              name: 'node2',
              symbolSize: 30,
              itemStyle:{
                color: '#91cc75'
              }
            },
            {
              name: 'node3',
              symbolSize: 30,
              itemStyle:{
                color: '#91cc75'
              }
            },
            {
              name: 'node4',
              symbolSize: 30,
              itemStyle:{
                color: '#91cc75'
              }
            },
            {
              name: 'node5',
              symbolSize: 30,
              itemStyle:{
                color: '#91cc75'
              }
            },
            {
              name: 'node6',
              symbolSize: 20
            },
            {
              name: 'node7',
              symbolSize: 20
            },
            {
              name: 'node8',
              symbolSize: 20
            },
            {
              name: 'node9',
              symbolSize: 20
            },
            {
              name: 'node10',
              symbolSize: 20
            },
            {
              name: 'node11',
              symbolSize: 20
            },
            {
              name: 'node12',
              symbolSize: 20
            },
          ],
          links:[
            {
              source: 'node1',
              target: 'node2'
            },
            {
              source: 'node1',
              target: 'node3'
            },
            {
              source: 'node1',
              target: 'node4'
            },
            {
              source: 'node1',
              target: 'node5'
            },
            {
              source: 'node2',
              target: 'node6'
            },
            {
              source: 'node2',
              target: 'node7'
            },
            {
              source: 'node3',
              target: 'node8'
            },
            {
              source: 'node4',
              target: 'node9'
            },
            {
              source: 'node5',
              target: 'node10'
            },
            {
              source: 'node4',
              target: 'node11'
            },
            {
              source: 'node3',
              target: 'node12'
            },
          ]
        }

Dom

<div id="tupuDom" style="height: 400px;margin-top: 20px;"></div>

函数

initChart(){
      let option = {};
      echarts.dispose(document.getElementById("tupuDom"))
      let charts = echarts.init(document.getElementById("tupuDom"));
        option = {
          tooltip: {
            trigger: 'item',             
          },
          series: [
            {
                name: 'Les Miserables',
                type: 'graph',
                // 采用力引导布局
                layout: 'force',
                force:{
                    // 节点之间的斥力因子
                    repulsion: 150,
                    // 显示布局的迭代动画,数据节点较多时建议开启
                    layoutAnimation: true,
                    // 边的两个节点之间的距离
                    edgeLength: 50
                },
                data: this.chartData.data,
                links: this.chartData.links,
                // 开启鼠标缩放和平移漫游
                roam: true,
                label: {
                    show: 'true',
                    position: 'inside',
                    // 'truncate': 截断，并在末尾显示ellipsis配置的文本，默认为…; ‘break’: 换行
                    overflow: 'truncate',
                    ellipsis: '...',
                    // 标签宽度
                    width: 50
                },
                lineStyle: {
                    // 连线的颜色
                    color: 'source',
                    // 边的曲度,从 0 到 1 的值，值越大曲度越大。
                    curveness: 0.3
                },
                emphasis: {
                    // 在高亮图形时,聚焦关系图中的邻接点和边的图形。
                    focus: 'adjacency',
                    // 高亮时线的宽度
                    lineStyle: {
                        width: 10
                    }
                },
                // 提示框信息
                tooltip: {
                    formatter: (item)=>{
                        if(item.data.name){
                            // 鼠标移入节点提示框信息
                            return item.name
                        }else{
                            // 鼠标移入线的提示框信息
                  	return item.data.source + '-'+item.data.target
                        }
                    }
                }
            }
        ]
      };
      charts.setOption(option);
    }

调用

this.initChart()