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 @   博二爷  阅读(3498)  评论(2编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示