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
效果图
标签：option,flare,myChart,json,源码,var,data 来源： https://www.cnblogs.com/smartisn/p/11858441.html