echarts 树形图

效果图：

html:（script ：echarts.js 自己去官网下载）

<button id="btn_Grid_treediagram" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">
	树图
</button>
<div class="modal fade" id="treediagram" style="height: 900px;background: #00ceff">
	<div id="container" style="height:600px;"></div>
</div>

js:(我这是点击按钮出现的)

$('#btn_Grid_treediagram').click(function () {
        $('#treediagram').modal();
        setTimeout(function () {
            drawTree(data);  // 将树的数据传入画布函数中
        }, 300)  //  定时 0.3 秒后执行
    });
//1.准备树的数据
var data = [
    {
        name: "广东",
        value: "01",
        sj: "-",
        symbol: 'image://http://10.10.36.109:8000/static/echarts/img/yy.png',
        children: [{
            name: "广州",
            value: "0101",
            sj: "01",
            symbol: 'image://http://10.10.36.109:8000/static/echarts/img/sjk.png',
            children: [{
                name: "萝岗",
                value: "010101",
                sj: "0101",
                symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
            },
                {
                    name: "天河",
                    value: "010102",
                    sj: "0101",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                },
                {
                    name: "黄埔",
                    value: "010103",
                    sj: "0101",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                },
                {
                    name: "白云",
                    value: "010104",
                    sj: "0101",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                },
                {
                    name: "花都",
                    value: "010105",
                    sj: "0101",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                },
                {
                    name: "海珠",
                    value: "010106",
                    sj: "0101",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                }]
        },
            {
                name: "潮州",
                value: "0102",
                sj: "01",
                symbol: 'image://http://10.10.36.109:8000/static/echarts/img/sjk.png',
                children: [{
                    name: "枫溪",
                    value: "010201",
                    sj: "0102",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                },
                    {
                        name: "枫桥",
                        value: "010202",
                        sj: "0102",
                        symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                    }]
            },
            {
                name: "深圳",
                value: "0103",
                sj: "01",
                symbol: 'image://http://10.10.36.109:8000/static/echarts/img/sjk.png',
                children: [{
                    name: "罗湖",
                    value: "010301",
                    sj: "0103",
                    symbol: 'image://http://10.10.36.109:8000/static/echarts/img/fzjh.png'
                }]
            },
            {
                name: "茂名",
                value: "0104",
                sj: "01",
                symbol: 'image://http://10.10.36.109:8000/static/echarts/img/sjk.png',
                children: []
            },
            {
                name: "揭阳",
                value: "0105",
                sj: "01",
                symbol: 'image://http://10.10.36.109:8000/static/echarts/img/sjk.png',
                children: []
            }
        ]
    }
];

function drawTree(treeData) {
    var myChart = echarts.init(document.getElementById("container"), 'macarons');//div元素节点的对象
    myChart.clear();   // 清空画布
    // myChart.restore();   // 还原数据
    myChart.setOption({
        backgroundColor: 'rgba(255,215,0,0.4)',
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        //那个右上角的工具栏
        toolbox: {
            show: false,
        },
        calculable: false,
        series: [{
            type: 'tree',
            name: 'TREE_ECHARTS',
            //排列方式，横向、纵向
            orient: 'vertical',
            //根节点的位置
            rootLocation: {x: 'center', y: '10%'},
            //连接线长度
            layerPadding: 5,
            //结点间距
            nodePadding: 5,
            //图形形状
            symbol: 'circle',
            //尺寸大小
            symbolSize: 40,
            data: treeData,
            top: '10%',
            left: '8%',
            bottom: '22%',
            right: '20%',
            // 设置 链接线是曲线还是折线，分别对应, curve 和 polyline, 我这里用的是折线
            edgeShape: 'polyline',
            // edgeForkPosition: '63%',
            itemStyle: {
                //正常情况显示
                normal: {
                    label: {
                        show: true,
                        position: 'inside',
                        textStyle: {
                            //字体颜色、大小、加粗
                            color: '#000',
                            fontSize: 12,
                            fontWeight: 'bolder'
                        }
                    },
                    color: '#fff',
                    lineStyle: {
                        color: '#000',
                        width: 1,
                        type: 'broken'
                    }
                },
                //鼠标移上去样式
                emphasis: {
                    label: {
                        show: false,
                        textStyle: {
                            align: 'center',
                            verticalAlign: 'middle',
                            color: 'red'
                        }
                    },
                    color: '#fff',
                    borderWidth: 1
                }
            },
            expandAndCollapse: true,
            initialTreeDepth: 2  //展示层级数,默认是2
        }]
    }, true);
    //4.树绑定事件
    myChart.on('click', function (params) {
        var name = params.data.name;//点击的节点的name
        var value = params.data.value;//点击的节点的value
        //调用点击事件
        clickNode(name, value);
    });
}

//节点的点击事件
function clickNode(name, value) {
    // alert(name + '--的值：' + value);
}