vue-cli项目中利用Echarts实现关系图

这个实现在echarts3.0官网找了好久的力引导布局图，最后也没法整合到自己项目中，踩坑很久偶然发现了一个链接。
https://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb
下面是后端拿到数据的，假数据的话用官网的就行：
首先在main.js中导入echarts：

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

在需要渲染的页面里面定义一个渲染的方法：

drawChart(data,link){
// 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("k"));
// 指定图表的配置项和数据
        let option = {
          title: {
            text: ''
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          label: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 12
              },
            }
          },
          legend: {
            x: "center",
            show: false,
            data: ["包含", "包含", '包含']
          },
          series: [
            {
              type: 'graph',
              layout: 'force',
              symbolSize: 45,
              focusNodeAdjacency: true,
              roam: true,
              categories: [{
                name: 'per',
                itemStyle: {
                  normal: {
                    color: "#009800",
                  }
                }
              }, {
                name: 'loc',
                itemStyle: {
                  normal: {
                    color: "#4592FF",
                  }
                }
              }, {
                name: 'org',
                itemStyle: {
                  normal: {
                    color: "#ff232b",
                  }
                }
              }, {
                name: 'time',
                itemStyle: {
                  normal: {
                    color: "#e6dd1c",
                  }
                }
              }, {
                name: 'body',
                itemStyle: {
                  normal: {
                    color: "#c489e6",
                  }
                }
              }, {
                name: 'sigos',
                itemStyle: {
                  normal: {
                    color: "#a0e6a5",
                  }
                }
              }, {
                name: 'check',
                itemStyle: {
                  normal: {
                    color: "#e6bfac",
                  }
                }
              }, {
                name: 'disease',
                itemStyle: {
                  normal: {
                    color: "#859f89",
                  }
                }
              }, {
                name: 'treatmeot',
                itemStyle: {
                  normal: {
                    color: "#686767",
                  }
                }
              }],
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 12
                  },
                }
              },
              force: {
                repulsion: 1000
              },
              edgeSymbolSize: [4, 50],
              edgeLabel: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 10
                  },
                  formatter: "{c}"
                }
              },
              data:data,
              links:link,
              // links: [{
              //   source: 0,
              //   target: 1,
              //   category: 0,
              //   value: '包含'
              //  },
              // ],
              lineStyle: {
                normal: {
                  opacity: 0.9,
                  width: 1,
                  curveness: 0,
                  color: "#504a48"
                }
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

一个方法接收nodes和link,因为从后端拿数据，所以不管后端数据如何，只要把数据格式修改成官网中假数据的格式就能用了。
官网的nodes属性:data: [{ name: '徐贱云', draggable: true, }, { name: '冯可梁', category: 1, draggable: true, }]
官网的link属性：links: [{ source: 0, target: 1, category: 0, value: '夫妻' }, { source: 0, target: 2, value: '子女' }]
也就是三个属性，在这里我的转换是：

 var en={
          'name' : '',
          'category' :0 ,
          'draggable' : false
        };
        var li={
            source: 0, //线的头
            target: 0,//线的尾
            category: 0,
            value: '包含'
        };

然后再
var Entities = new Array(); var link=new Array();
最后给自己的en、li初始化完加入进去

  Entities.push(Object.assign({},en));

 link.push(Object.assign({},li));

初始化完Entities和link以后调用

 this.drawChart(Entities,link)

就成功了。
categories：名字上看就是一个category数组，对应的是在node里面category属性，category的值就是对应了数组内部的下标，即可以定义小球的颜色等。

（前端小白：欢迎大家批评指正~~）