Echarts-树状图(源码 含flare.json)

刚刚发现官网实例里边的数据其实在：https://www.echartsjs.com/data/asset/data/flare.json

源码：

html:

 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     $.get('data/flare.json', function (data) {
17         myChart.hideLoading();
18 
19         myChart.setOption(option = {
20             tooltip: {
21                 trigger: 'item',
22                 triggerOn: 'mousemove'
23             },
24             series: [
25                 {
26                     type: 'tree',
27 
28                     data: [data],
29 
30                     top: '18%',
31                     bottom: '14%',
32 
33                     layout: 'radial',
34 
35                     symbol: 'emptyCircle',
36 
37                     symbolSize: 7,
38 
39                     initialTreeDepth: 3,
40 
41                     animationDurationUpdate: 750
42 
43                 }
44             ]
45         });
46     });
47     if (option && typeof option === "object") {
48         var startTime = +new Date();
49         myChart.setOption(option, true);
50         var endTime = +new Date();
51         var updateTime = endTime - startTime;
52         console.log("Time used:", updateTime);
53     }
54 </script>
55 </body>
56 </html>
View Code

效果图

 

 

posted @ 2019-11-14 16:47  博二爷  阅读(3456)  评论(2)  编辑  收藏  举报