<!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>