Echarts关系图实现：表关系的图(富文本标签实现)

option = {
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  series: [
    {
      type: 'graph',//关系图
      symbolSize: 1,
      roam: true,
      draggable: true, //单节点可以托运
      label: {
        show: true,
        backgroundColor: '#eee',
        //以下是设置富文本标签的样式
        borderColor: '#777',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          title: {
            color: '#eee',
            align: 'center'
          },
          abg: {
            backgroundColor: '#333',
            width: '100%',
            align: 'right',
            height: 25,
            borderRadius: [4, 4, 0, 0]
          },
          name: {
            height: 15,
            align: 'center',
            color: '#777'
          },
          columns: {
            height: 15,
            align: 'center',
            color: '#777'
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          value: {
            align: 'center',
            color: '#777'
          }
        }
      },
      //以上是设置富文本标签的样式
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 20
      },
      data: [//数据
        {
          name: '表1',
          x: 300,
          y: 300,
          label: {//富文件标签的关键 name和value要对应样式中的名字才会有样式
          //可以增加多列内容 加新的列就可以，记得增加对应的样式。
            formatter: [
              '{title|{b}}{abg|}',
              '{hr|}',
              ' {name|202}{value|55.3%}',
              ' {name|142}{value|38.9%}',
              ' {name|21}{value|5.8%}'
            ].join('\n')
          }
        },
        {
          name: '表2',
          label: {
            formatter: [
              '{title|{b}}{abg|}',
              '{hr|}',
              ' {name|202}{value|55.3%}',
              ' {name|142}{value|38.9%}',
              ' {name|21}{value|5.8%}'
            ].join('\n')
          },
          x: 800,
          y: 300
        },
        {
          name: '表3',
          label: {
            formatter: [
              '{title|{b}}{abg|}',
              '{hr|}',
              '<a> {name|202}{value|55.3%}</a>',
              ' {name|142}{value|38.9%}',
              ' {name|21}{value|5.8%}'
            ].join('\n')
          },
          x: 900,
          y: 400
        }
      ],
      links: [//关联关系
        {
          source: '表1',
          target: '表2',
          label: {
            normal: {
              show: true,
              formatter: '关联字段'
            }
          }
        },
        {
          source: '表1',
          target: '表3',
          label: {
            normal: {
              show: true,
              formatter: '外键关系'
            }
          }
        }
      ],
      lineStyle: {
        opacity: 0.9,
        width: 1,
        curveness: 0//线是否弯曲
      }
    }
  ]
};

若要从后端接数据，则需要认真拼接数据

只需要关注以下代码的拼接方式。（仅有label标签的代码）

StringBuffer formatter = new StringBuffer();
		formatter.append(" {title|"+dto.getTitle()+"("+dto.getBid()+")"+"}{abg|}\n{hr|}\n");
		for (DataSubjectModelDefDto defDto: listModel){
			formatter.append("{name|"+defDto.getTitle()+"|}{columns|"+defDto.getFieldType()+"|}{value|"+defDto.getBid()+"}\n");
		}
		map.put("name",dto.getTitle()+"("+dto.getBid()+")");
		formatterMap.put("formatter",formatter);
		map.put("label",formatterMap);