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>
相关推荐
m0_748255269 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
长风清留扬29 分钟前
小程序毕业设计-音乐播放器+源码（可播放）下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web1478621072343 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478044 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play