(ソースflare.json含む)Echarts-ツリー

:データの公式のインスタンスは実際にあるの内側だけが見つかりました。https://www.echartsjs.com/data/asset/data/flare.json

出典:

HTML:

1  <!DOCTYPE HTML > 
2  < ヘッド> 
3      < メタのcharset = "UTF-8" > 
4      < スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / echarts.js" > </ スクリプト> 
5      < スクリプトタイプ= "テキスト/ javascriptの」SRC = "JS / jqueryの- 3.3.1.js" > </ スクリプト> 
6      < スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / jsonTool.js" > <
 > 
8  < ボディスタイル= "高さ:600PX;マージン:0" > 
9  < DIV ID = "コンテナ" スタイル= "高さ:100%" > </ DIV > 
10  < スクリプトタイプ= "テキスト/ javascriptの" > 
11      VAR DOM = のdocument.getElementById(" コンテナ" )。
12      VAR myChart = echarts.init(DOM)。
13      VaRのアプリ= {};
  15      myChart.showLoading()。
16      $に.get(' データ/ flare.json ' 関数(データ){
 17          myChart.hideLoading();
 18  
19          myChart.setOption(オプション= {
 20              ツールチップ:{
 21                  トリガー:' アイテム' 22                  triggerOn:' のMouseMove ' 
23              }、
 24              シリーズ:[
 25                  {
 26                      タイプ:'ツリー' 27の28                     データ:[データ]、
 29 30                     トップ:' 18%' 31                     底:' 14%' 32 33                     レイアウト:' 半径' 34 35                     シンボル:' emptyCircle ' 36 37                     symbolSize:7 38 39                     initialTreeDepth:3  
  
   
  
  
  
 40  
41                      animationDurationUpdate:750 
42  
43                  }
 44              ]
 45          });
46      });
47      であれば(オプション&&  typeof演算オプション===  " オブジェクト" ){
 48          VAR のstartTime =  + 新しい日付();
49          myChart.setOption(オプション、真の);
50          VAR たendTime =  + 新しい日付();
51          VARupdateTime = endTimeは- startTimeの。
52          はconsole.log(" 時間は使用する:" 、updateTime)。
53      }
 54  </ スクリプト> 
55  </ ボディ> 
56  </ HTML >
コードの表示

レンダリング

 

 

おすすめ

転載: www.cnblogs.com/smartisn/p/11858441.html