#求助啊！！！！！！Echarts画不出来关系图，不知道哪里出了问题！
#HTML文件
html>
<html>
<head>
<meta charset="utf-8" />
<title>EChartstitle>
<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"
}
]
}
参考GPT和自己的思路：
从您提供的代码和数据来看，问题可能出在如下几个地方：
import * as echarts from 'echarts' 导入 Echarts 库，但是没有使用任何工具（如 webpack）来打包和处理这个文件，这会导致浏览器无法正确解析该代码。建议使用 <script> 标签来引入 Echarts 库，如下所示：<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
$.getJSON 方法获取数据的方式不正确。您使用了 $getJSON 方法从 teacherData.json 文件中获取数据，但是在代码中没有引入 jQuery 库，因此该方法无法使用。建议使用 fetch 或 XMLHttpRequest 等方式来获取数据。
JSON 数据格式不正确。您提供的 JSON 数据中，categories 数组没有被使用，links 中的 id 和 source 字段出现了重复值，应该保证每个 id 和 source 字段的值唯一。建议使用 Echarts 官方示例中的数据格式，或参考下面的格式修改：
{
nodes: [
{id: "0", name: "Node 0", category: 0},
{id: "1", name: "Node 1", category: 1},
...
],
links: [
{source: "0", target: "1"},
{source: "0", target: "2"},
...
]
}
注意：以上只是可能导致问题的几个地方，具体原因需要您进一步排查和调试。建议使用浏览器开发工具（如 Chrome 开发者工具）来查看控制台错误信息，以便更快地找到问题所在。
参考GPT和自己的思路：
根据代码和数据文件，可能存在以下几个问题：
import * as echarts from 'echarts'; 语句应该在外部引入 echarts.min.js 后执行。因为这个语句需要使用已经加载的 echarts.min.js，并且浏览器可能会因为这条语句而报错。可以将第 7 行 <script> 标签与第 13 行合并，只保留一个。<!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">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.showLoading();
var graph = $.getJSON('/dist/teacherData.json')
var option;
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>
{
"categories":[
{
"name": "类目0"
},
{
"name": "类目1"
},
{
"name": "类目2"
}
],
"nodes":[
{
"id":"0",
"name":"ZZ",
"symbolSize": 19.12381,
"x": -266.82776,
"y": 299.6904,
"category": 0
},
...
{
"id": "18",
"name": "电厂水处理",
"symbolSize": 13.638097333333334,
"x": -464.79382,
"y": -493.57944,
"category":2
},
***,
{
"id": "20",
"name": "消毒技术",
"symbolSize": 13.638097333333334,
"x": -408.12122,
"y": -464.5048,
"category":2
}
],
"links":[
{
"id": "0",
"source": "0",
"target": "1"
},
...
{
"id": "18",
"source": "5",
"target": "19"
},
{
"id": "19",
"source": "6",
"target": "20"
}]
}
注意：在使用 JSON 数据的时候，也需要保持数据格式的正确性，否则会影响程序的执行。