#Echarts画不出来
没有报错，但是不出图
"utf-8" />
<title>EChartstitle>
"main" style="width: 800px;height:600px;">
#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"
}
]
}
```
参考GPT和自己的思路：
根据您提供的代码和数据，可能是因为在渲染Echarts之前没有等待json文件加载完成。一种解决方法是在获取json文件后使用回调函数来渲染图表。您可以按照以下方式更改您的代码：
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
$.getJSON('/dist/teacherData.json', function(graph) {
myChart.hideLoading();
console.log(graph);
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);
});
在这个例子中，我们使用了jQuery的$.getJSON()函数来获取json文件，然后在回调函数中渲染图表，确保json数据已经加载完成。
参考GPT和自己的思路：
根据您提供的代码和数据，可能是因为以下几个原因导致 ECharts 关系图没有显示出来：
数据加载问题：您的代码中通过 $.getJSON 异步加载了 JSON 数据，但是您的代码并没有在成功加载数据后将数据传给 ECharts 进行渲染。您可以将渲染图表的代码放在 $.getJSON 的回调函数中，确保数据加载完成后再进行渲染。
配置项问题：您的代码中的 ECharts 配置项可能存在问题，例如没有设置选项 toolbox: { show: true } 来显示工具栏，可能会影响图表的显示。您可以去 ECharts 官网查看文档，确保您的配置项是正确的。
容器尺寸问题：根据您提供的代码，您的 ECharts 容器的尺寸为 800px*600px，这可能会导致当数据量过多时，部分节点和关系无法显示在容器内。您可以尝试调整容器的大小或者通过 ECharts 提供的 zoom 和 roam 功能进行缩放和拖拽，以便查看完整的关系图。
希望以上建议能够帮助您解决问题。