<!--

Echart 2.2.7

http://echarts.baidu.com/echarts2/doc/example/force1.html#macarons

https://github.com/apache/incubator-echarts

https://github.com/apache/incubator-echarts/releases?after=2.2.7

Force力导向图实现节点可折叠

 -->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="ECharts">

<meta name="author" content="geovindu@gmail.com">

<title>Force力导向图实现节点可折叠 ECharts · Example</title>

</head>

<body>

    <div id="main" style="width: 850px; height: 500px"></div>

    <div id="ss" ></div>

    <script src="build/dist/echarts.js"></script>

    <script type="text/javascript">

        require.config({

            paths : {

                echarts : 'build/dist', //echarts文件路径

                theme: 'theme/',

				theme2: 'theme/'

            }

        });

        require([ "echarts",  //和实际文件径无关，只是一个对象

               'theme/blue',  //样式

               "echarts/chart/force"

        ], 

        function(ec,theme) {

            var myChart = ec.init(document.getElementById('main'), 'macarons',theme);

            var option = {

                title: {

					text: '大学概况',//主标题

					subtext: '组成部分',//副标题

					top: 'top',//相对在y轴上的位置

       			 	left: 'center'//相对在x轴上的位置

					},

                tooltip : {

                    show : false

                },

                toolbox: {  //显示工具条

					show: true,

					feature : {

            			restore : {show: true},

           				 magicType: {show: true, type: ['force', 'chord']},

            				saveAsImage : {show: true}

       						 }

						},

                series : [ {

                    type : 'force',

                    name : "Force tree",

                    itemStyle : {

                        normal : {

                            label : {show : true},

                            nodeStyle : {

                                brushType : 'both',

                                borderColor : 'rgba(255,215,0,0.4)',

                                borderWidth : 1

                            }

                        }

                    },

                    categories : [ {name : '学校'}, {name : '校区'}, {name : '学院'}, {name : '班级'} ],

                     nodes :

                     [{id:0,category:0,name:'0',label:'北京理工大学',symbolSize:40,ignore:false,flag:true},

                     {id:1,category:1,name:'1',label:'海淀校区',symbolSize:30,ignore:true,flag:true},

                     {id:2,category:2,name:'2',label:'理工学院',symbolSize:20,ignore:true,flag:true},

                     {id:3,category:2,name:'3',label:'经管学院',symbolSize:20,ignore:true,flag:true},

                     {id:4,category:1,name:'4',label:'珠海校区',symbolSize:30,ignore:true,flag:true},

                     {id:5,category:2,name:'5',label:'法学院',symbolSize:20,ignore:true,flag:true},

                     {id:6,category:2,name:'6',label:'文学院',symbolSize:20,ignore:true,flag:true},

                     {id:7,category:2,name:'7',label:'理学院',symbolSize:20,ignore:true,flag:true},

                     {id:8,category:1,name:'8',label:'朝阳校区',symbolSize:30,ignore:true,flag:true},

                     {id:9,category:2,name:'9',label:'计算机科学学院',symbolSize:20,ignore:true,flag:true},

                     {id:10,category:2,name:'10',label:'工学院',symbolSize:20,ignore:true,flag:true},

                     {id:11,category:2,name:'11',label:'艺术学院',symbolSize:20,ignore:true,flag:true},

                     {id:12,category:2,name:'12',label:'医学院',symbolSize:20,ignore:true,flag:true},

                     {id:13,category:3,name:'13',label:'一班',number:45,techear:'张三',symbolSize:10,ignore:true,flag:true},

                     {id:14,category:3,name:'14',label:'二班',number:52,techear:'李四',symbolSize:10,ignore:true,flag:true}

                     ],

                    links : [ {source : 1,target : 0}, {source : 4,target : 0}, {source : 8,target : 0},

                              {source : 2,target : 1}, {source : 3,target : 1}, {source : 5,target : 4},

                              {source : 6,target : 4}, {source : 7,target : 4}, {source : 9,target : 8},

                              {source : 10,target : 8}, {source : 11,target : 8}, {source : 12,target : 8},

                              {source : 13,target : 6}, {source : 14,target : 6} ]

                } ]

            };

            myChart.setOption(option);

            var ecConfig = require('echarts/config'); //和实际文件径无关，只是一个对象

            function openOrFold(param) {

                var option = myChart.getOption();

                var nodesOption = option.series[0].nodes;

                var linksOption = option.series[0].links;

                var data = param.data;

                var linksNodes = [];

                var categoryLength = option.series[0].categories.length;

                if (data.category == (categoryLength - 1)) {

                    alert(data.label);

                }

                if (data != null && data != undefined) {

                    if (data.flag) {

                        for ( var m in linksOption) {

                            if (linksOption[m].target == data.id) {

                                linksNodes.push(linksOption[m].source);

                            }

                        }

                        if (linksNodes != null && linksNodes != undefined) {

                            for ( var p in linksNodes) {

                                nodesOption[linksNodes[p]].ignore = false;

                                nodesOption[linksNodes[p]].flag = true;

                            }

                        }

                        nodesOption[data.id].flag = false;

                        myChart.setOption(option);

                    } else {

                        for ( var m in linksOption) {

                            if (linksOption[m].target == data.id) {

                                linksNodes.push(linksOption[m].source);

                            }

                            if (linksNodes != null && linksNodes != undefined) {

                                for ( var n in linksNodes) {

                                    if (linksOption[m].target == linksNodes[n]) {

                                        linksNodes.push(linksOption[m].source);

                                    }

                                }

                            }

                        }

                        if (linksNodes != null && linksNodes != undefined) {

                            for ( var p in linksNodes) {

                                nodesOption[linksNodes[p]].ignore = true;

                                nodesOption[linksNodes[p]].flag = true;

                            }

                        }

                        nodesOption[data.id].flag = true;

                        myChart.setOption(option);

                    }

                }

            }

            myChart.on(ecConfig.EVENT.CLICK, openOrFold);

        });

    </script>

</body>

</html>

　　

學習Echart 2.2.7的更多相关文章

  1. 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（3）

    作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...

  2. 開博客了， 因為搞Delphi 開發的關於Delphi學習

    開博客了, 因為搞Delphi 開發的關於Delphi學習,之前都是用本地TXT文件保存,發現在本地電腦保存非常不方面,而且只能在一台電腦上保存,不容易查看和修改內容.便於以後的記錄只用,以及經驗交流 ...

  3. Markdown 學習

    Markdown 格式由John Gruber 創建,是一種便於閱讀,非常簡潔直觀的純文本文件格式,可以方便地轉為html等其他格式,很適合與寫作,不需要關注排版問題 常用學習資源有: ###標題用 ...

  4. 無心插柳的Linux學習者代言人——蔡德明

    誰是「蔡德明」恐怕沒有多少人知道,不過提到「鳥哥」這個稱號,在臺灣的Linux社群幾乎是無人不知無人不曉,蔡德明正是鳥哥的本名.鳥哥究竟多有名? 如果你是有意學習Linux的初學者,卻不知如何下手,1 ...

  5. Linux网络设备驱动架構學習（三）

    Linux网络设备驱动架構學習(三) 接下來會從以下幾個方面介紹網絡設備驅動的編寫流程: 1.網絡設備的註冊與註銷 2.網絡設備的初始化 3.網絡設備的打開與釋放 4.網絡數據發送流程 5.網絡數據接 ...

  6. 學習 DT device tree 以 ST 的開發板 STM32F429i-disc1 為例

    目標 因為對 device tree 不是很熟悉, 所以就將 device tree, 設為學習目標. 啟動 注意, 這篇隨筆的解說都放在最下面,會標 Explanation_XX,只要搜尋 Expl ...

  7. 機器學習基石(Machine Learning Foundations) 机器学习基石 课后习题链接汇总

    大家好,我是Mac Jiang,非常高兴您能在百忙之中阅读我的博客!这个专题我主要讲的是Coursera-台湾大学-機器學習基石(Machine Learning Foundations)的课后习题解 ...

  8. 機器學習基石 (Machine Learning Foundations) 作业1 Q15-17的C++实现

    大家好,我是Mac Jiang.今天和大家分享Coursera-台湾大学-機器學習基石 (Machine Learning Foundations) -作业1的Q15-17题的C++实现. 这部分作业 ...

  9. Gazebo機器人仿真學習探索筆記（二）基本使用說明

    在完成Gazebo7安裝後,需要熟悉Gazebo,方便之後使用. 部分源代碼可以參考:https://bitbucket.org/osrf/gazebo/src/ 如果還沒有安裝請參考之前內容完成安裝 ...

随机推荐

  1. 我知道的nginx配置

    1.nginx配置文件 2.配置访问域名 #京淘商品管理系统 server { listen 80; server_name manage.jt.com; location / { proxy_pas ...

  2. Java字符串池（String Pool）深度解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 在工作中,String类是我们使用频率非常高的一种对象类型.JVM为了提升性能和减少内存开销,避免字符串的重复创建,其维护了一块特殊的内存 ...

  3. dtb和dtc文件浅析

    目录 dtb和dtc文件浅析 工具集 dts格式 dtb头部结构 dtb标识符 分析具体的文件 title: dtb和dtc文件浅析 date: 2019/4/25 20:09:38 toc: tru ...

  4. C语言小程序——推箱子（窄字符和宽字符）

    C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...

  5. 开源播放器 ijkplayer (二) ：ijkplayer倍速变调问题解决方案

    转载注明出处:http://www.cnblogs.com/renhui/p/6510872.html 之前使用IjkPlayer做播放器的使用的时候,在做倍速播放的时候,发现播放的声音音调明显变高了 ...

  6. 使用 PLSQL 提示动态执行表不可访问，本会话的自动统计被禁止

    使用PLSQL,第一次执行表的select操作的时候,提示"动态执行表不可访问,本会话的自动统计被禁止",如上图: 这种问题,一看就是当前连接用户没有对sys用户下的表v$sess ...

  7. apache环境之困扰，Rewrite导致无法加载多个不同的.html文件

    又是一个项目,为访问多个纯静态html页面h5游戏页,能够做一些简单分享和跳转即可.原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoo ...

  8. 【书籍推荐】java初级到中级书籍推荐

    <编码>--必读 <程序是怎么跑起来的> --必读 <计算机系统概论> <深入理解计算机>--部分章节必读 <操作系统概论> <计算机 ...

  9. Android分享内容和接收分享内容小小实现

    先来说说分享,毕竟没有分享何来接收分享可谈? 分享目前已实现的有两种方式:后台代码实现.ShareActionProvider实现,接着先说通过代码实现 Intent intent=new Inten ...

  10. Liferay7 BPM门户开发之11: Activiti工作流程开发的一些统一规则和实现原理（完整版）

    注意:以下规则是我为了规范流程的处理过程,不是Activiti公司的官方规定. 1.流程启动需要设置启动者,在Demo程序中,“启动者变量”名统一设置为initUserId 启动时要做的: ident ...