错在哪?看不懂
#json文件
{
"children": [
{
"children": [
{
"children": [],
"name": "机电一体化技术"
},
{
"children": [],
"name": "工业机器人技术"
},
{
"children": [],
"name": "机械设计与制造"
},
{
"children": [],
"name": "数控技术"
},
{
"children": [],
"name": "模具设计与制造"
},
{
"children": [],
"name": "汽车制造与试验技术"
},
{
"children": [],
"name": "智能产品开发与应用"
},
{
"children": [],
"name": "新能源汽车技术"
}
],
"name": "智能制造学院"
},
{
"children": [
{
"children": [],
"name": "港口与航运管理"
},
{
"children": [],
"name": "学前教育"
},
{
"children": [],
"name": "应用泰语"
},
{
"children": [],
"name": "商务英语"
},
{
"children": [],
"name": "应用越南语"
}
],
"name": "国际学院"
},
{
"children":[
{
"children":[],
"name":"动漫制作技术"
},
{
"children":[],
"name":"传播与策划"
},
{
"children":[],
"name":"现代文秘"
},
{
"children":[],
"name":"新闻采编与制作"
},
{
"children":[],
"name":"网络新闻与传播"
}
],
"name":"传媒学院"
}
],
"name": "南宁职业技术学院"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/echarts.min.js"></script>
<script src="/jquery.js"></script>
<title>Document</title>
<style>
#main{
height: 1080px;
width: 1500px;
border:5px solid blue;
}
</style>
</head>
<body>
<div id="main">6666666666666666</div>
<script>
var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
$.get(ROOT_PATH + 'ncvt.json', function (data) {
myChart.hideLoading();
data.children.forEach(function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
// show:'true',//默认:true;是否显示提示框组件,包括提示框浮层和 axisPointer。
trigger: 'item',//默认:item;触发类型。item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'none':什么都不触发。
triggerOn: 'mousemove'
},
series:[
{
type: 'tree',
data: [data],
left: '2%',
right: '2%',
top: '15%',
bottom: '10%',
symbol: 'emptyCircle',
orient: 'vertical',
expandAndCollapse: true,//默认:true;子树折叠和展开的交互,默认打开 。
initialTreeDepth:2,//默认:2,树图初始展开的层级(深度)。根节点是第 0 层,然后是第 1 层、第 2 层,... ,直到叶子节点
label: {
normal: {
position: 'top',//标签的位置。
rotate: -90,//标签旋转。从 -90 度到 90 度。正值是逆时针。
verticalAlign: 'middle',//文字垂直对齐方式,默认自动。
align: 'right',//文字水平对齐方式,默认自动。
fontSize: 12,//文字的字体大小
}
},
leaves: {
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left',
fontSize: 8,//文字的字体大小
}
}
},
animationDurationUpdate: 750
}
]
});
</script>
</body>
</html>