花瓜shmily 2021-11-21 14:12 采纳率: 0%
浏览 47

用echarts的树形图(tree)描述学校、二级学院、专业的关系,

错在哪?看不懂

img


#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>
  • 写回答

2条回答 默认 最新

  • ZionHH 2021-11-21 14:59
    关注

    img


    用的你的数据,看看你控制台报什么错吧

    评论

报告相同问题?

问题事件

  • 创建了问题 11月21日

悬赏问题

  • ¥20 c语言写的8051单片机存储器mt29的模块程序
  • ¥60 求直线方程 使平面上n个点在直线同侧并且距离总和最小
  • ¥50 java算法,给定试题的难度数量(简单,普通,困难),和试题类型数量(单选,多选,判断),以及题库中各种类型的题有多少道,求能否随机抽题。
  • ¥50 rk3588板端推理
  • ¥250 opencv怎么去掉 数字0中间的斜杠。
  • ¥15 这种情况的伯德图和奈奎斯特曲线怎么分析?
  • ¥250 paddleocr带斜线的0很容易识别成9
  • ¥15 电子档案元素采集(tiff及PDF扫描图片)
  • ¥15 flink-sql-connector-rabbitmq使用
  • ¥15 zynq7015,PCIE读写延时偏大