码迷,mamicode.com
首页 > Web开发 > 详细

Echart-无需json文件的树状图(源码)超级简单,小白的福音

时间:2019-11-14 17:53:33      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:==   nal   spl   leaves   com   cli   树状   utf-8   height   

源码:

技术图片
  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文件的树状图(源码)超级简单,小白的福音

标签:==   nal   spl   leaves   com   cli   树状   utf-8   height   

原文地址:https://www.cnblogs.com/smartisn/p/11858671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!