index.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <!DOCTYPE html>
  2. <html style="height: 100%">
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="../script/lib/miniui/themes/default/miniui.css">
  6. <link rel="stylesheet" href="../script/lib/layui/css/layui.css" />
  7. <link rel="stylesheet" href="../script/lib/cashier/common.css">
  8. <link rel="stylesheet" href="../script/lib/layui/admin/modules/plugin/formselects/formselects.css" media="all" />
  9. <script src="../script/lib/jquery/jquery.min.js"></script>
  10. <script src="../script/lib/miniui/miniui.js"></script>
  11. <script src="../script/lib/layui/layui.js"></script>
  12. <script><{Dever::script()}></script>
  13. <script src="../script/dever/core.js"></script>
  14. </head>
  15. <!-- style="background-color: #009688;color:#FFFFFF;" style="color:#FFFFFF;" -->
  16. <body style="height: 100%; margin: 0">
  17. <a class="mini-button" onclick="location.href='<{$link}>'" style="margin: 10px;position: absolute;z-index: 99999;">返回上一页</a>
  18. <div id="container" style="height: 100%"></div>
  19. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  20. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  21. <!-- Uncomment this line if you want to dataTool extension
  22. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"></script>
  23. -->
  24. <!-- Uncomment this line if you want to use gl extension
  25. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  26. -->
  27. <!-- Uncomment this line if you want to echarts-stat extension
  28. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  29. -->
  30. <!-- Uncomment this line if you want to use map
  31. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/map/js/china.js"></script>
  32. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/map/js/world.js"></script>
  33. -->
  34. <!-- Uncomment these two lines if you want to use bmap extension
  35. <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
  36. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
  37. -->
  38. <script type="text/javascript">
  39. var dom = document.getElementById("container");
  40. var myChart = echarts.init(dom);
  41. var app = {};
  42. var option;
  43. var ROOT_PATH = config.host;
  44. var searchURL = window.location.search;
  45. searchURL = searchURL.substring(1, searchURL.length);
  46. var id = searchURL.split("?")[0].split("=")[1];
  47. myChart.showLoading();
  48. $.getJSON(ROOT_PATH + 'l=children.home?json=1&mid='+'<{$mid}>',function (data) {
  49. myChart.hideLoading();
  50. if (data.status != 1) {
  51. alert(data.msg);
  52. return;
  53. }
  54. data.data.children.forEach(function (datum, index) {
  55. // index % 2 === 0 && (datum.collapsed = true);
  56. });
  57. myChart.setOption(
  58. (option = {
  59. tooltip: {
  60. trigger: 'item',
  61. triggerOn: 'mousemove',
  62. textStyle:{
  63. color:'blue',
  64. },
  65. formatter: function (data) {
  66. return data.value;
  67. },
  68. },
  69. series: [
  70. {
  71. type: 'tree',
  72. data: [data.data],
  73. top: '1%',
  74. left: '12%',
  75. bottom: '1%',
  76. right: '20%',
  77. symbolSize: 7,
  78. initialTreeDepth: 10,
  79. // color: '#FF7853',
  80. itemStyle: {
  81. color: '#FF7853'
  82. },
  83. label: {
  84. position: 'left',
  85. verticalAlign: 'middle',
  86. align: 'right',
  87. fontSize: 9,
  88. fontColor:'#FF7853',
  89. show: true
  90. },
  91. label: {
  92. position: 'left',
  93. verticalAlign: 'middle',
  94. align: 'right',
  95. fontSize: 9,
  96. color:'#000000'
  97. },
  98. leaves: {
  99. label: {
  100. position: 'right',
  101. verticalAlign: 'middle',
  102. align: 'left',
  103. color: '#000000'
  104. }
  105. },
  106. emphasis: {
  107. focus: 'descendant',
  108. },
  109. expandAndCollapse: true,
  110. animationDuration: 550,
  111. animationDurationUpdate: 750
  112. }
  113. ]
  114. })
  115. );
  116. });
  117. if (option && typeof option === 'object') {
  118. myChart.setOption(option);
  119. }
  120. </script>
  121. </body>
  122. </html>