echart 关系图

首先安装echart，打开终端，进入项目目录，输入以下命令进行安装

npm install echarts --save

子组件chart.vue

父组件 index.vue

数据mock.js

const res = {
    "nodes": [
      {
        "id": "0",
        "name": "Myriel",
        "symbolSize": 19.12381,
        "x": -266.82776,
        "y": 299.6904,
        "value": 28.685715,
        "category": 0
      },
      {
        "id": "1",
        "name": "Napoleon",
        "symbolSize": 2.6666666666666665,
        "x": -418.08344,
        "y": 446.8853,
        "value": 4,
        "category": 0
      },
      {
        "id": "2",
        "name": "MlleBaptistine",
        "symbolSize": 6.323809333333333,
        "x": -212.76357,
        "y": 245.29176,
        "value": 9.485714,
        "category": 1
      },
      {
        "id": "3",
        "name": "MmeMagloire",
        "symbolSize": 6.323809333333333,
        "x": -242.82404,
        "y": 235.26283,
        "value": 9.485714,
        "category": 1
      },
      {
        "id": "4",
        "name": "CountessDeLo",
        "symbolSize": 2.6666666666666665,
        "x": -379.30386,
        "y": 429.06424,
        "value": 4,
        "category": 0
      },
      {
        "id": "5",
        "name": "Geborand",
        "symbolSize": 2.6666666666666665,
        "x": -417.26337,
        "y": 406.03506,
        "value": 4,
        "category": 0
      },
      {
        "id": "6",
        "name": "Champtercier",
        "symbolSize": 2.6666666666666665,
        "x": -332.6012,
        "y": 485.16974,
        "value": 4,
        "category": 0
      },
      {
        "id": "7",
        "name": "Cravatte",
        "symbolSize": 2.6666666666666665,
        "x": -382.69568,
        "y": 475.09113,
        "value": 4,
        "category": 0
      },
      {
        "id": "8",
        "name": "Count",
        "symbolSize": 2.6666666666666665,
        "x": -320.384,
        "y": 387.17325,
        "value": 4,
        "category": 0
      }
    ],
    "links": [
      {
        "source": "1",
        "target": "0"
      },
      {
        "source": "2",
        "target": "0"
      },
      {
        "source": "3",
        "target": "0"
      },
      {
        "source": "3",
        "target": "2"
      },
      {
        "source": "4",
        "target": "0"
      },
      {
        "source": "5",
        "target": "0"
      },
      {
        "source": "6",
        "target": "0"
      },
      {
        "source": "7",
        "target": "0"
      },
      {
        "source": "8",
        "target": "0"
      }
    ],
    "categories": [
      {
        "name": "A"
      },
      {
        "name": "B"
      },
      {
        "name": "C"
      },
      {
        "name": "D"
      },
      {
        "name": "E"
      },
      {
        "name": "F"
      },
      {
        "name": "G"
      },
      {
        "name": "H"
      },
      {
        "name": "I"
      }
    ]
  }

  export default res