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>
相关推荐
小牛itbull3 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i12 分钟前
html本地离线引入vant和vue2（详细步骤）
开发语言·前端·javascript
533_14 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun20 分钟前
空间数据存储格式GeoJSON
前端
GIS瞧葩菜24 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端：HTML （学习笔记）【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
图表制作解说(目标1000个图表)2 小时前
ECharts柱状图-带圆角的堆积柱状图，附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作