源码：

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <script type="text/javascript" src="js/echarts.js"></script>

     <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

     <script type="text/javascript" src="js/jsonTool.js"></script>

 </head>

 <body style="height: 600px; margin: 0">

 <div id="container" style="height: 100%"></div>

 <script type="text/javascript">

     var dom = document.getElementById("container");

     var myChart = echarts.init(dom);

     var app = {};

     option = null;

     myChart.showLoading();

     var data=

         {

              "name": "flare",

              "children": [

               {

                "name": "analytics",

                "children": [

                 {

                  "name": "cluster",

                  "children": [

                   {"name": "AgglomerativeCluster", "value": 3938},

                   {"name": "CommunityStructure", "value": 3812},

                   {"name": "HierarchicalCluster", "value": 6714},

                   {"name": "MergeEdge", "value": 743}

                  ]

                 },

                 {

                  "name": "graph",

                  "children": [

                   {"name": "BetweennessCentrality", "value": 3534},

                   {"name": "LinkDistance", "value": 5731},

                   {"name": "MaxFlowMinCut", "value": 7840},

                   {"name": "ShortestPaths", "value": 5914},

                   {"name": "SpanningTree", "value": 3416}

                  ]

                 },

                 {

                  "name": "optimization",

                  "children": [

                   {"name": "AspectRatioBanker", "value": 7074}

                  ]

                 }

                ]

               }

               ]

         };

         myChart.hideLoading();

         myChart.setOption(option = {

                 tooltip: {

                     trigger: 'item',

                     triggerOn: 'mousemove'

                 },

                 series: [

                     {

                         type: 'tree',

                         data: [data],

                         top: '1%',

                         left: '7%',

                         bottom: '1%',

                         right: '20%',

                         symbolSize: 7,

                         label: {

                             normal: {

                                 position: 'left',

                                 verticalAlign: 'middle',

                                 align: 'right',

                                 fontSize: 9

                             }

                         },

                         leaves: {

                             label: {

                                 normal: {

                                     position: 'right',

                                     verticalAlign: 'middle',

                                     align: 'left'

                                 }

                             }

                         },

                         expandAndCollapse: true,

                         animationDuration: 550,

                         animationDurationUpdate: 750

                     }

                 ]

             });

     if (option && typeof option === "object") {

         var startTime = +new Date();

         myChart.setOption(option, true);

         var endTime = +new Date();

         var updateTime = endTime - startTime;

         console.log("Time used:", updateTime);

     }

 </script>

 </body>

 </html>

Echart-无需json文件的树状图（源码）超级简单，小白的福音的更多相关文章

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

    刚刚发现官网实例里边的数据其实在:https://www.echartsjs.com/data/asset/data/flare.json 源码: html: <!DOCTYPE html> ...

  2. ztree 文件夹类型的 树状图

    未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...

  3. D3.js系列——布局：弦图和集群图/树状图

    一.弦图 1.弦图是什么 弦图(Chord),主要用于表示两个节点之间的联系的图表.两点之间的连线,表示谁和谁具有联系. 2.数据 初始数据为: var city_name = [ "北京& ...

  4. 用D3.js画树状图

    做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...

  5. 使用ECharts绘制网址径向树状图

    an.rustfisher.com有很多内容,很多页面.如果用一个树状图把所有页面展示出来会是什么效果? 第一时间想到了ECharts. 最后效果: https://an.rustfisher.com ...

  6. D3树状图给指定特性的边特别显示颜色

    D3作为前端图形显示的利器,功能之强,对底层技术细节要求相对比较多. 有一点,就是要理解其基本的数据和节点的匹配规则架构,即enter,update和exit原理,我前面的D3基础篇中有介绍过,不明白 ...

  7. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  8. ArcGIS教程：树状图

    摘要 构造可显示特征文件里连续合并类之间的属性距离的树示意图(树状图). 使用方法 · 输入特征文件必须採用预定的特征文件格式. 特征文件可使用 Iso 聚类或创建特征工具来创建.该文件必须至少包括两 ...

  9. bzoj 4871: [Shoi2017]摧毁“树状图”

    4871: [Shoi2017]摧毁“树状图” Time Limit: 25 Sec  Memory Limit: 512 MBSubmit: 53  Solved: 9[Submit][Status ...

随机推荐

  1. POJ1573(Robot Motion)--简单模拟+简单dfs

    题目在这里 题意 : 问你按照图中所给的提示走,多少步能走出来??? 其实只要根据这个提示走下去就行了.模拟每一步就OK,因为下一步的操作和上一步一样,所以简单dfs.如果出现loop状态,只要记忆每 ...

  2. VBA事件（十七）

    在VBA中,要手动更改单元格或单元格值范围时,可以触发事件驱动的编程. 更改事件可能会使事情变得更容易,但您可以非常快速地结束一个完整的格式化页面.VBA中有两种事件 - 工作表事件 工作簿事件 工作 ...

  3. TortoiseSVN-1.7.12.24070-x64-svn-1.7.9安装包和汉化包

    链接:https://pan.baidu.com/s/1NbrQW44N_kTh7VN0Fz0zVA 提取码:nhd9 先安装TortoiseSVN-1.7.12.24070-x64-svn-1.7. ...

  4. 十年感悟之 python之路

    本文由 简悦 SimpRead 转码, 原文地址 https://laisky.com/p/python-road/ Changelog: updated at 2019/9/6 一.概述 本文起源于 ...

  5. VUE 元素拖拽、移动

    元素拖拽 作者:一粒尘土 时间:2019-10-30 使用范围:两个元素位置交换,移动元素到指定位置 涉及函数 属性 解释 draggable 是否允许元素进行拖拽 dragstart 拖拽开始触发的 ...

  6. 如何让类数组也使用数组的方法比如：forEach()

    思路: 让类数组绑定数组的方法<div>1</div><div>2</div>方法一: let div = document.getElementsBy ...

  7. 由于找不到MSVCP140.dll，无法继续执行代码。重新安装程序可能会解决此问题。

    msvcp140.dll文件下载,解决找不到msvcp140.dll的问题: 如果您的系统是64位的请将32位的dll文件复制到C:\Windows\System32目录 如果您的系统是64位的请将3 ...

  8. ES Client

    关于 ElasticSearch的学习参见:ELK | wjcx_sqh 本文分别学习 .Net | Java 下操作 ES: .Net 目前主流的 .Net 客户端有 2 种: PlainElast ...

  9. python之第一对象，函数名的应用，闭包

    一.第一对象 在 Python 中万物皆为对象,函数也不例外,函数作为对象可以赋值给一个变量.可以作为元素添加到集合对象中.可作为参数值传递给其它函数, 还可以当做函数的返回值,这些特性就是第一类对象 ...

  10. 记录java+testng运行selenium（四）--- 运行代码

    涉及的文件有: .\medical\BusinessFile.java :实例化excel及xml文件操作对象以及将list变成Map .\medical\manual\business\LoginB ...