<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
         <link rel="stylesheet" href="../script/lib/miniui/themes/default/miniui.css">
<link rel="stylesheet" href="../script/lib/layui/css/layui.css" />
<link rel="stylesheet" href="../script/lib/cashier/common.css">
<link rel="stylesheet" href="../script/lib/layui/admin/modules/plugin/formselects/formselects.css" media="all" />
<script src="../script/lib/jquery/jquery.min.js"></script>
<script src="../script/lib/miniui/miniui.js"></script>
<script src="../script/lib/layui/layui.js"></script>
<script><{Dever::script()}></script>
<script src="../script/dever/core.js"></script>
    </head>
    <!-- style="background-color: #009688;color:#FFFFFF;" style="color:#FFFFFF;" -->
    <body style="height: 100%; margin: 0">
    	 <a class="mini-button"  onclick="location.href='<{$link}>'" style="margin: 10px;position: absolute;z-index: 99999;">返回上一页</a>
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
        -->
        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

var ROOT_PATH = config.host;

var searchURL = window.location.search;
	searchURL = searchURL.substring(1, searchURL.length);
	var id = searchURL.split("?")[0].split("=")[1];
	
myChart.showLoading();
$.getJSON(ROOT_PATH + 'l=children.home?json=1&mid='+'<{$mid}>',function (data) {
	
  myChart.hideLoading();
  if (data.status != 1) {
    alert(data.msg);
    return;
  }
  
  data.data.children.forEach(function (datum, index) {
    // index % 2 === 0 && (datum.collapsed = true);
  });
  myChart.setOption(
    (option = {
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        textStyle:{
          color:'blue',
        },
        formatter: function (data) {
          return data.value;
        },
      },   

      series: [
        {
          type: 'tree',
          data: [data.data],
          top: '1%',
          left: '12%',
          bottom: '1%',
          right: '20%',
          symbolSize: 7,
          initialTreeDepth: 10,
          // color: '#FF7853',
          itemStyle: {
            color: '#FF7853'
          },
          
          
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9,
            fontColor:'#FF7853',
            show: true
          },
           label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9,
            color:'#000000'
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left',
              color: '#000000'

            }
          },

          emphasis: {
            focus: 'descendant',

          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
    })
  );
});

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>