echarts实现树形图绘制

    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/frame/echarts/echarts.min.js"></script>
   <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">

<script>
        $(function () {
            //本周详细信息
            var tree_echarts_id = 'tree_echarts';
            var tree_data = {{tree_data|safe}};
            echarts_tree(tree_echarts_id, tree_data);

        });

        //树形图
        function echarts_tree(id, data) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));

            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                toolbox: {
                    show: true,
                    feature: {
                        saveAsImage: {show: true}

                    }
                },
                series: [
                    {
                        type: 'tree',

                        data: data,

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '50%',

                        symbolSize: 7,

                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 12
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

    </script>

    <div class="layui-col-md12" style="padding-top: 20px ">
        <div class="layui-fluid">
            <div class="layui-col-md12">
                <div class="panel_style">
                    <div class="layui-row layui-col-space18">
                        <div class="card_style layui-col-md12">
                            <div class="card_style">
                                <div class="layui-card">
                                    <!--树形图-->
                                    <div id="tree_echarts" class="layui-card-body" style="width: 100%;height:900%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

image.png

echarts官方实例