echarts制作关系图谱

椒盐大肥猫2023-09-20 20:21
html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 100%;height:100vh;"></div>
<script type="text/javascript">

  const data = {
    'nodes': [
      { id: '0', name: 'Myriel', category: 0 },
      { id: '1', name: 'Napoleon', category: 0 },
      { id: '2', name: 'MlleBaptistine', category: 1 },
      { id: '3', name: 'MmeMagloire', category: 1 },
      { id: '4', name: 'CountessDeLo', category: 0 },
      { id: '5', name: 'Geborand', category: 0 },
      { id: '6', name: 'Champtercier', category: 0 },
      { id: '7', name: 'Cravatte', category: 0 },
      { id: '8', name: 'Count', category: 0 },
      { id: '9', name: 'OldMan', category: 0 },
      { id: '10', name: 'Labarre', category: 1 },
      { id: '11', name: 'Valjean', category: 1 },
      { id: '12', name: 'Marguerite', category: 1 },
      { id: '13', name: 'MmeDeR', category: 1 },
      { id: '14', name: 'Isabeau', category: 1 },
      { id: '15', name: 'Gervais', category: 1 },
      { id: '16', name: 'Tholomyes', category: 2 },
      { id: '17', name: 'Listolier', category: 2 },
      { id: '18', name: 'Fameuil', category: 2 },
      { id: '19', name: 'Blacheville', category: 2 },
      { id: '20', name: 'Favourite', category: 2 },
      { id: '21', name: 'Dahlia', category: 2 },
      { id: '22', name: 'Zephine', category: 2 },
      { id: '23', name: 'Fantine', category: 2 },
      { id: '24', name: 'MmeThenardier', category: 7 },
      { id: '25', name: 'Thenardier', category: 7 },
      { id: '26', name: 'Cosette', category: 6 },
      { id: '27', name: 'Javert', category: 7 },
      { id: '28', name: 'Fauchelevent', category: 4 },
      { id: '29', name: 'Bamatabois', category: 3 },
      { id: '30', name: 'Perpetue', category: 2 },
      { id: '31', name: 'Simplice', category: 2 },
      { id: '32', name: 'Scaufflaire', category: 1 },
      { id: '33', name: 'Woman1', category: 1 },
      { id: '34', name: 'Judge', category: 3 },
      { id: '35', name: 'Champmathieu', category: 3 },
      { id: '36', name: 'Brevet', category: 3 },
      { id: '37', name: 'Chenildieu', category: 3 },
      { id: '38', name: 'Cochepaille', category: 3 },
      { id: '39', name: 'Pontmercy', category: 6 },
      { id: '40', name: 'Boulatruelle', category: 7 },
      { id: '41', name: 'Eponine', category: 7 },
      { id: '42', name: 'Anzelma', category: 7 },
      { id: '43', name: 'Woman2', category: 6 },
      { id: '44', name: 'MotherInnocent', category: 4 },
      { id: '45', name: 'Gribier', category: 4 },
      { id: '46', name: 'Jondrette', category: 5 },
      { id: '47', name: 'MmeBurgon', category: 5 },
      { id: '48', name: 'Gavroche', category: 8 },
      { id: '49', name: 'Gillenormand', category: 6 },
      { id: '50', name: 'Magnon', category: 6 },
      { id: '51', name: 'MlleGillenormand', category: 6 },
      { id: '52', name: 'MmePontmercy', category: 6 },
      { id: '53', name: 'MlleVaubois', category: 6 },
      { id: '54', name: 'LtGillenormand', category: 6 },
      { id: '55', name: 'Marius', category: 6 },
      { id: '56', name: 'BaronessT', category: 6 },
      { id: '57', name: 'Mabeuf', category: 8 },
      { id: '58', name: 'Enjolras', category: 8 },
      { id: '59', name: 'Combeferre', category: 8 },
      { id: '60', name: 'Prouvaire', category: 8 },
      { id: '61', name: 'Feuilly', category: 8 },
      { id: '62', name: 'Courfeyrac', category: 8 },
      { id: '63', name: 'Bahorel', category: 8 },
      { id: '64', name: 'Bossuet', category: 8 },
      { id: '65', name: 'Joly', category: 8 },
      { id: '66', name: 'Grantaire', category: 8 },
      { id: '67', name: 'MotherPlutarch', category: 8 },
      { id: '68', name: 'Gueulemer', category: 7 },
      { id: '69', name: 'Babet', category: 7 },
      { id: '70', name: 'Claquesous', category: 7 },
      { id: '71', name: 'Montparnasse', category: 7 },
      { id: '72', name: 'Toussaint', category: 1 },
      { id: '73', name: 'Child1', category: 8 },
      { id: '74', name: 'Child2', category: 8 },
      { id: '75', name: 'Brujon', category: 7 },
      { id: '76', name: 'MmeHucheloup', category: 8 }
    ],
    'links': [
      {
        "name": "连线名称",
        "source": "1",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "2",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "3",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "3",
        "target": "2"
      },
      {
        "name": "连线名称",
        "source": "4",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "5",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "6",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "7",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "8",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "9",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "11",
        "target": "0"
      },
      {
        "name": "连线名称",
        "source": "11",
        "target": "2"
      },
      {
        "name": "连线名称",
        "source": "11",
        "target": "3"
      },
      {
        "name": "连线名称",
        "source": "11",
        "target": "10"
      },
      {
        "name": "连线名称",
        "source": "12",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "13",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "14",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "15",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "17",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "18",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "18",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "19",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "19",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "19",
        "target": "18"
      },
      {
        "name": "连线名称",
        "source": "20",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "20",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "20",
        "target": "18"
      },
      {
        "name": "连线名称",
        "source": "20",
        "target": "19"
      },
      {
        "name": "连线名称",
        "source": "21",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "21",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "21",
        "target": "18"
      },
      {
        "name": "连线名称",
        "source": "21",
        "target": "19"
      },
      {
        "name": "连线名称",
        "source": "21",
        "target": "20"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "18"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "19"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "20"
      },
      {
        "name": "连线名称",
        "source": "22",
        "target": "21"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "12"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "17"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "18"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "19"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "20"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "21"
      },
      {
        "name": "连线名称",
        "source": "23",
        "target": "22"
      },
      {
        "name": "连线名称",
        "source": "24",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "24",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "25",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "25",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "25",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "26",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "26",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "26",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "26",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "27",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "27",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "27",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "27",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "27",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "28",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "28",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "29",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "29",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "29",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "30",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "31",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "31",
        "target": "23"
      },
      {
        "name": "连线名称",
        "source": "31",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "31",
        "target": "30"
      },
      {
        "name": "连线名称",
        "source": "32",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "33",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "33",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "34",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "34",
        "target": "29"
      },
      {
        "name": "连线名称",
        "source": "35",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "35",
        "target": "29"
      },
      {
        "name": "连线名称",
        "source": "35",
        "target": "34"
      },
      {
        "name": "连线名称",
        "source": "36",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "36",
        "target": "29"
      },
      {
        "name": "连线名称",
        "source": "36",
        "target": "34"
      },
      {
        "name": "连线名称",
        "source": "36",
        "target": "35"
      },
      {
        "name": "连线名称",
        "source": "37",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "37",
        "target": "29"
      },
      {
        "name": "连线名称",
        "source": "37",
        "target": "34"
      },
      {
        "name": "连线名称",
        "source": "37",
        "target": "35"
      },
      {
        "name": "连线名称",
        "source": "37",
        "target": "36"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "29"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "34"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "35"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "36"
      },
      {
        "name": "连线名称",
        "source": "38",
        "target": "37"
      },
      {
        "name": "连线名称",
        "source": "39",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "40",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "41",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "41",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "42",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "42",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "42",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "43",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "43",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "43",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "44",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "44",
        "target": "28"
      },
      {
        "name": "连线名称",
        "source": "45",
        "target": "28"
      },
      {
        "name": "连线名称",
        "source": "47",
        "target": "46"
      },
      {
        "name": "连线名称",
        "source": "48",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "48",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "48",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "48",
        "target": "47"
      },
      {
        "name": "连线名称",
        "source": "49",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "49",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "50",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "50",
        "target": "49"
      },
      {
        "name": "连线名称",
        "source": "51",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "51",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "51",
        "target": "49"
      },
      {
        "name": "连线名称",
        "source": "52",
        "target": "39"
      },
      {
        "name": "连线名称",
        "source": "52",
        "target": "51"
      },
      {
        "name": "连线名称",
        "source": "53",
        "target": "51"
      },
      {
        "name": "连线名称",
        "source": "54",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "54",
        "target": "49"
      },
      {
        "name": "连线名称",
        "source": "54",
        "target": "51"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "16"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "39"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "49"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "51"
      },
      {
        "name": "连线名称",
        "source": "55",
        "target": "54"
      },
      {
        "name": "连线名称",
        "source": "56",
        "target": "49"
      },
      {
        "name": "连线名称",
        "source": "56",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "57",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "57",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "57",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "58",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "58",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "58",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "58",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "58",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "59",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "59",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "59",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "59",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "60",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "60",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "60",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "61",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "62",
        "target": "61"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "61"
      },
      {
        "name": "连线名称",
        "source": "63",
        "target": "62"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "61"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "62"
      },
      {
        "name": "连线名称",
        "source": "64",
        "target": "63"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "55"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "61"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "62"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "63"
      },
      {
        "name": "连线名称",
        "source": "65",
        "target": "64"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "59"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "60"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "61"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "62"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "63"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "64"
      },
      {
        "name": "连线名称",
        "source": "66",
        "target": "65"
      },
      {
        "name": "连线名称",
        "source": "67",
        "target": "57"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "68",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "69",
        "target": "68"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "24"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "68"
      },
      {
        "name": "连线名称",
        "source": "70",
        "target": "69"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "68"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "69"
      },
      {
        "name": "连线名称",
        "source": "71",
        "target": "70"
      },
      {
        "name": "连线名称",
        "source": "72",
        "target": "11"
      },
      {
        "name": "连线名称",
        "source": "72",
        "target": "26"
      },
      {
        "name": "连线名称",
        "source": "72",
        "target": "27"
      },
      {
        "name": "连线名称",
        "source": "73",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "74",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "74",
        "target": "73"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "25"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "41"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "68"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "69"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "70"
      },
      {
        "name": "连线名称",
        "source": "75",
        "target": "71"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "48"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "58"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "62"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "63"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "64"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "65"
      },
      {
        "name": "连线名称",
        "source": "76",
        "target": "66"
      }
    ]
  }
  // data.nodes.forEach(node => {
  //   if (node.category === 0) {
  //     node.symbolSize = 100
  //   } else if (node.category === 1) {
  //   }
  // })

  data.links.forEach(link => {
    link.label = {
      align: 'center',
      fontSize: 12
    }
  })

  const categories = data.nodes.map(item => {
    return {
      name: item.name
    }
  })
  console.log('categories', categories)

  const option = {
    title: {
      text: '知识图谱'
    },
    // legend: [{
    //   // selectedMode: 'single',
    //   data: categories.map(x => x.name)
    //   // icon: 'circle'
    // }],
    series: [{
      type: 'graph',
      layout: 'force',
      symbolSize: 58,
      // draggable: true,
      roam: true,
      focusNodeAdjacency: true,
      categories: categories,
      edgeSymbol: ['', 'arrow'],
      edgeSymbolSize: [80, 10],
      edgeLabel: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 20
          },
          formatter(x) {
            console.log(111, x);
            return x.data.name
          }
        }
      },
      emphasis: { // 设置 hover 时的状态
        scale: 2.5, // 悬浮节点时，该节点放大的倍数
        focus: 'adjacency', // 悬浮节点时，展示想关联的节点
        blurScope: 'global',
        label: {
          show: true // 是否显示标签
        }
      },
      label: {
        show: true,
        normal: {
          show : true,//显示
          // position: 'middle',//相对于节点标签的位置，默认在节点中间
          //回调函数，你期望节点标签上显示什么
          formatter: function(params){
            return params.data.name;
          },
        }
      },
      force: {
        repulsion: 2000,
        edgeLength: 120
      },
      data: data.nodes,
      links: data.links
    }]
  }

  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main'));
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>
</body>
</html>
相关推荐
别拿曾经看以后~41 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死44 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南：打造个性化的应用体验
android·javascript·flutter
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play