Echart-无需json文件的树状图（源码）超级简单，小白的福音

Posted 2020-11-23 Smartisan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echart-无需json文件的树状图（源码）超级简单，小白的福音相关的知识，希望对你有一定的参考价值。

源码：

  1 <!DOCTYPE html>
  2 <head>
  3     <meta charset="utf-8">
  4     <script type="text/javascript" src="js/echarts.js"></script>
  5     <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  6     <script type="text/javascript" src="js/jsonTool.js"></script>
  7 </head>
  8 <body style="height: 600px; margin: 0">
  9 <div id="container" style="height: 100%"></div>
 10 <script type="text/javascript">
 11     var dom = document.getElementById("container");
 12     var myChart = echarts.init(dom);
 13     var app = {};
 14     option = null;
 15     myChart.showLoading();
 16     var data=
 17         {
 18              "name": "flare",
 19              "children": [
 20               {
 21                "name": "analytics",
 22                "children": [
 23                 {
 24                  "name": "cluster",
 25                  "children": [
 26                   {"name": "AgglomerativeCluster", "value": 3938},
 27                   {"name": "CommunityStructure", "value": 3812},
 28                   {"name": "HierarchicalCluster", "value": 6714},
 29                   {"name": "MergeEdge", "value": 743}
 30                  ]
 31                 },
 32                 {
 33                  "name": "graph",
 34                  "children": [
 35                   {"name": "BetweennessCentrality", "value": 3534},
 36                   {"name": "LinkDistance", "value": 5731},
 37                   {"name": "MaxFlowMinCut", "value": 7840},
 38                   {"name": "ShortestPaths", "value": 5914},
 39                   {"name": "SpanningTree", "value": 3416}
 40                  ]
 41                 },
 42                 {
 43                  "name": "optimization",
 44                  "children": [
 45                   {"name": "AspectRatioBanker", "value": 7074}
 46                  ]
 47                 }
 48                ]
 49               }
 50               ]
 51         };
 52 
 53         myChart.hideLoading();
 54 
 55         myChart.setOption(option = {
 56                 tooltip: {
 57                     trigger: ‘item‘,
 58                     triggerOn: ‘mousemove‘
 59                 },
 60                 series: [
 61                     {
 62                         type: ‘tree‘,
 63 
 64                         data: [data],
 65 
 66                         top: ‘1%‘,
 67                         left: ‘7%‘,
 68                         bottom: ‘1%‘,
 69                         right: ‘20%‘,
 70 
 71                         symbolSize: 7,
 72 
 73                         label: {
 74                             normal: {
 75                                 position: ‘left‘,
 76                                 verticalAlign: ‘middle‘,
 77                                 align: ‘right‘,
 78                                 fontSize: 9
 79                             }
 80                         },
 81 
 82                         leaves: {
 83                             label: {
 84                                 normal: {
 85                                     position: ‘right‘,
 86                                     verticalAlign: ‘middle‘,
 87                                     align: ‘left‘
 88                                 }
 89                             }
 90                         },
 91 
 92                         expandAndCollapse: true,
 93                         animationDuration: 550,
 94                         animationDurationUpdate: 750
 95                     }
 96                 ]
 97             });
 98  
 99     if (option && typeof option === "object") {
100         var startTime = +new Date();
101         myChart.setOption(option, true);
102         var endTime = +new Date();
103         var updateTime = endTime - startTime;
104         console.log("Time used:", updateTime);
105     }
106 </script>
107 </body>
108 </html>

View Code

以上是关于Echart-无需json文件的树状图（源码）超级简单，小白的福音的主要内容，如果未能解决你的问题，请参考以下文章

将现有的 defaultdict 输出为适合耀斑树状图的 JSON 格式？

C＃中如何取得像资源管理器的树状列表？要有图标的。

java+json+javascript生成树状图实例

JavaScript：基于任意JSON动态生成树状图（动态生成vue-giant-tree所需idpid）