#Echarts画不出来
没有报错，但是不出图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;">
<script type=
"text/javascript">
var chartDom = document.getElementById(
'main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
var graph = $.getJSON(
'/dist/teacherData.json',function(graph) {
myChart.hideLoading();
console.
log(graph)
});
// 基于准备好的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,
categories:graph.categories,
roam:
true,
lineStyle: {
color:
'source',
curveness:
0.3
},
emphasis: {
focus:
'adjacency',
lineStyle: {
width:
10
}
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
#Json文件
```javascript
{
"categories":[
{
"name":
"类目0"
},
{
"name":
"类目1"
},
{
"name":
"类目2"
}
],
"nodes":[
{
"id":
"0",
"name":
"ZZ",
"symbolSize":
19.12381,
"x": -
266.82776,
"y":
299.6904,
"value":
20.457146,
"category":
0
},
{
"id":
"1",
"name":
"JLM",
"symbolSize":
2.6666666666666665,
"x": -
418.08344,
"y":
446.8853,
"value":
4,
"category":
1
},
{
"id":
"2",
"name":
"TR",
"symbolSize":
6.323809333333333,
"x": -
212.76357,
"y":
245.29176,
"value":
4,
"category":
1
},
{
"id":
"3",
"name":
"AY",
"symbolSize":
6.323809333333333,
"x": -
242.82404,
"y":
235.26283,
"value":
4,
"category":
1
},
{
"id":
"4",
"name":
"XQ",
"symbolSize":
2.6666666666666665,
"x": -
379.30386,
"y":
429.06424,
"value":
4,
"category":
1
},
{
"id":
"5",
"name":
"ZXD",
"symbolSize":
2.6666666666666665,
"x": -
417.26337,
"y":
406.03506,
"value":
4,
"category":
1
},
{
"id":
"6",
"name":
"HCY",
"symbolSize":
2.6666666666666665,
"x": -
332.6012,
"y":
485.16974,
"value":
4,
"category":
1
},
{
"id":
"7",
"name":
"杨帆计划",
"symbolSize":
2.6666666666666665,
"x": -
382.69568,
"y":
475.09113,
"value":
4,
"category":
2
},
{
"id":
"8",
"name":
"上海市二等奖",
"symbolSize":
2.6666666666666665,
"x": -
320.384,
"y":
387.17325,
"value":
4,
"category":
2
},
{
"id":
"9",
"name":
"山东省二等奖",
"symbolSize":
2.6666666666666665,
"x": -
344.39832,
"y":
451.16772,
"value":
4,
"category":
2
},
{
"id":
"10",
"name":
"数学模型",
"symbolSize":
2.6666666666666665,
"x": -
89.34107,
"y":
234.56128,
"value":
4,
"category":
2
},
{
"id":
"11",
"name":
"脱氮机理",
"symbolSize":
66.66666666666667,
"x": -
87.93029,
"y": -
6.8120565,
"value":
4,
"category":
2
},
{
"id":
"12",
"name":
"带教老师",
"symbolSize":
4.495239333333333,
"x": -
339.77908,
"y": -
184.69139,
"value":
4,
"category":
2
},
{
"id":
"13",
"name":
"2022新晋教师",
"symbolSize":
2.6666666666666665,
"x": -
194.31313,
"y":
178.55301,
"value":
4,
"category":
2
},
{
"id":
"14",
"name":
"微生物调控",
"symbolSize":
2.6666666666666665,
"x": -
158.05168,
"y":
201.99768,
"value":
4,
"category":
2
},
{
"id":
"15",
"name":
"带教老师",
"symbolSize":
2.6666666666666665,
"x": -
127.701546,
"y":
242.55057,
"value":
4,
"category":
2
},
{
"id":
"16",
"name":
"膜分离",
"symbolSize":
17.295237333333333,
"x": -
385.2226,
"y": -
393.5572,
"value":
4,
"category":
2
},
{
"id":
"17",
"name":
"2020新晋教师",
"symbolSize":
13.638097333333334,
"x": -
516.55884,
"y": -
393.98975,
"value":
4,
"category":
2
},
{
"id":
"18",
"name":
"电厂水处理",
"symbolSize":
13.638097333333334,
"x": -
464.79382,
"y": -
493.57944,
"value":
4,
"category":
2
},
{
"id":
"19",
"name":
"离子交换",
"symbolSize":
13.638097333333334,
"x": -
515.1624,
"y": -
456.9891,
"value":
4,
"category":
2
},
{
"id":
"20",
"name":
"消毒技术",
"symbolSize":
13.638097333333334,
"x": -
408.12122,
"y": -
464.5048,
"value":
4,
"category":
2
}
],
"links":[
{
"source":
"0",
"target":
"1"
},
{
"source":
"0",
"target":
"1"
},
{
"source":
"0",
"target":
"2"
},
{
"source":
"0",
"target":
"3"
},
{
"source":
"0",
"target":
"4"
},
{
"source":
"0",
"target":
"5"
},
{
"source":
"0",
"target":
"6"
},
{
"source":
"0",
"target":
"7"
},
{
"source":
"0",
"target":
"8"
},
{
"source":
"0",
"target":
"9"
},
{
"source":
"1",
"target":
"10"
},
{
"source":
"2",
"target":
"11"
},
{
"source":
"2",
"target":
"12"
},
{
"source":
"2",
"target":
"13"
},
{
"source":
"3",
"target":
"14"
},
{
"source":
"4",
"target":
"15"
},
{
"source":
"4",
"target":
"16"
},
{
"source":
"4",
"target":
"17"
},
{
"source":
"5",
"target":
"18"
},
{
"source":
"5",
"target":
"19"
},
{
"source":
"6",
"target":
"20"
}
]
}
```
分享
系统已结题
3月25日
已采纳回答
3月17日
