源码：
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>