zoukankan      html  css  js  c++  java
  • 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

    效果图

  • 相关阅读:
    唯一索引 && 主键索引
    部分函数依赖 && 完全函数依赖
    范式
    BST树、B树、B+树、B*树
    哈希表
    Bzoj4569: [Scoi2016]萌萌哒
    Bzoj 4551: [Tjoi2016&Heoi2016]树
    Bzoj3631: [JLOI2014]松鼠的新家
    HDU4746: Mophues
    BZOJ2820:YY的GCD
  • 原文地址:https://www.cnblogs.com/smartisn/p/11858441.html
Copyright © 2011-2022 走看看