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>