#求助啊！！！！！！Echarts画不出来关系图，不知道哪里出了问题！
#HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<script src="dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
var graph = $.getJSON('/dist/teacherData.json')
// 基于准备好的dom，初始化echarts实例
// 指定图表的配置项和数据
option = {
title:
{
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
#Json数据文件
{ "categories":[
{
"name": "类目0"
},
{
"name": "类目1"
},
{
"name": "类目2"
}
],
"nodes":[
{
"id":"0",
"name":"ZZ",
"symbolSize": 19.12381,
"x": -266.82776,
"y": 299.6904,
"category": 0
},
{
"id": "1",
"name": "JLM",
"symbolSize": 2.6666666666666665,
"x": -418.08344,
"y": 446.8853,
"category":1
},
{
"id": "2",
"name": "TR",
"symbolSize": 6.323809333333333,
"x": -212.76357,
"y": 245.29176,
"category":1
},
{
"id": "3",
"name": "AY",
"symbolSize": 6.323809333333333,
"x": -242.82404,
"y": 235.26283,
"category":1
},
{
"id": "4",
"name": "XQ",
"symbolSize": 2.6666666666666665,
"x": -379.30386,
"y": 429.06424,
"category":1
},
{
"id": "5",
"name": "ZXD",
"symbolSize": 2.6666666666666665,
"x": -417.26337,
"y": 406.03506,
"category":1
},
{
"id": "6",
"name": "HCY",
"symbolSize": 2.6666666666666665,
"x": -332.6012,
"y": 485.16974,
"category":1
},
{
"id": "7",
"name": "杨帆计划",
"symbolSize": 2.6666666666666665,
"x": -382.69568,
"y": 475.09113,
"category":2
},
{
"id": "8",
"name": "上海市二等奖",
"symbolSize": 2.6666666666666665,
"x": -320.384,
"y": 387.17325,
"category":2
},
{
"id": "9",
"name": "山东省二等奖",
"symbolSize": 2.6666666666666665,
"x": -344.39832,
"y": 451.16772,
"category":2
},
{
"id": "10",
"name": "数学模型",
"symbolSize": 2.6666666666666665,
"x": -89.34107,
"y": 234.56128,
"category":2
},
{
"id": "11",
"name": "脱氮机理",
"symbolSize": 66.66666666666667,
"x": -87.93029,
"y": -6.8120565,
"category":2
},
{
"id": "12",
"name": "带教老师",
"symbolSize": 4.495239333333333,
"x": -339.77908,
"y": -184.69139,
"category":2
},
{
"id": "13",
"name": "2022新晋教师",
"symbolSize": 2.6666666666666665,
"x": -194.31313,
"y": 178.55301,
"category":2
},
{
"id": "14",
"name": "微生物调控",
"symbolSize": 2.6666666666666665,
"x": -158.05168,
"y": 201.99768,
"category":2
},
{
"id": "15",
"name": "带教老师",
"symbolSize": 2.6666666666666665,
"x": -127.701546,
"y": 242.55057,
"category":2
},
{
"id": "16",
"name": "膜分离",
"symbolSize": 17.295237333333333,
"x": -385.2226,
"y": -393.5572,
"category":2
},
{
"id": "17",
"name": "2020新晋教师",
"symbolSize": 13.638097333333334,
"x": -516.55884,
"y": -393.98975,
"category":2
},
{
"id": "18",
"name": "电厂水处理",
"symbolSize": 13.638097333333334,
"x": -464.79382,
"y": -493.57944,
"category":2
},
{
"id": "19",
"name": "离子交换",
"symbolSize": 13.638097333333334,
"x": -515.1624,
"y": -456.9891,
"category":2
},
{
"id": "20",
"name": "消毒技术",
"symbolSize": 13.638097333333334,
"x": -408.12122,
"y": -464.5048,
"category":2
}
],
"links":[
{
"id": "0",
"source": "0",
"target": "1"
},
{
"id": "1",
"source": "0",
"target": "1"
},
{
"id": "2",
"source": "0",
"target": "2"
},
{
"id": "3",
"source": "0",
"target": "3"
},
{
"id": "4",
"source": "0",
"target": "4"
},
{
"id": "5",
"source": "0",
"target": "5"
},
{
"id": "6",
"source": "0",
"target": "6"
},
{
"id": "7",
"source": "0",
"target": "7"
},
{
"id": "8",
"source": "0",
"target": "8"
},
{
"id": "9",
"source": "0",
"target": "9"
},
{
"id": "10",
"source": "1",
"target": "10"
},
{
"id": "11",
"source": "2",
"target": "11"
},
{
"id": "12",
"source": "2",
"target": "12"
},
{
"id": "13",
"source": "2",
"target": "13"
},
{
"id": "14",
"source": "3",
"target": "14"
},
{
"id": "15",
"source": "4",
"target": "15"
},
{
"id": "16",
"source": "4",
"target": "16"
},
{
"id": "17",
"source": "4",
"target": "17"
},
{
"id": "18",
"source": "5",
"target": "18"
},
{
"id": "19",
"source": "5",
"target": "19"
},
{
"id": "20",
"source": "6",
"target": "20"
}
]
}
