學習Echart 2.2.7
<!--
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的更多相关文章
- 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（3）
作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...
- 開博客了， 因為搞Delphi 開發的關於Delphi學習
開博客了, 因為搞Delphi 開發的關於Delphi學習,之前都是用本地TXT文件保存,發現在本地電腦保存非常不方面,而且只能在一台電腦上保存,不容易查看和修改內容.便於以後的記錄只用,以及經驗交流 ...
- Markdown 學習
Markdown 格式由John Gruber 創建,是一種便於閱讀,非常簡潔直觀的純文本文件格式,可以方便地轉為html等其他格式,很適合與寫作,不需要關注排版問題 常用學習資源有: ###標題用 ...
- 無心插柳的Linux學習者代言人——蔡德明
誰是「蔡德明」恐怕沒有多少人知道,不過提到「鳥哥」這個稱號,在臺灣的Linux社群幾乎是無人不知無人不曉,蔡德明正是鳥哥的本名.鳥哥究竟多有名? 如果你是有意學習Linux的初學者,卻不知如何下手,1 ...
- Linux网络设备驱动架構學習（三）
Linux网络设备驱动架構學習(三) 接下來會從以下幾個方面介紹網絡設備驅動的編寫流程: 1.網絡設備的註冊與註銷 2.網絡設備的初始化 3.網絡設備的打開與釋放 4.網絡數據發送流程 5.網絡數據接 ...
- 學習 DT device tree 以 ST 的開發板 STM32F429i-disc1 為例
目標 因為對 device tree 不是很熟悉, 所以就將 device tree, 設為學習目標. 啟動 注意, 這篇隨筆的解說都放在最下面,會標 Explanation_XX,只要搜尋 Expl ...
- 機器學習基石(Machine Learning Foundations) 机器学习基石 课后习题链接汇总
大家好,我是Mac Jiang,非常高兴您能在百忙之中阅读我的博客!这个专题我主要讲的是Coursera-台湾大学-機器學習基石(Machine Learning Foundations)的课后习题解 ...
- 機器學習基石 (Machine Learning Foundations) 作业1 Q15-17的C++实现
大家好,我是Mac Jiang.今天和大家分享Coursera-台湾大学-機器學習基石 (Machine Learning Foundations) -作业1的Q15-17题的C++实现. 这部分作业 ...
- Gazebo機器人仿真學習探索筆記（二）基本使用說明
在完成Gazebo7安裝後,需要熟悉Gazebo,方便之後使用. 部分源代碼可以參考:https://bitbucket.org/osrf/gazebo/src/ 如果還沒有安裝請參考之前內容完成安裝 ...
随机推荐
- Android NDK学习（三）：Hello World
版权声明:转载请说明出处:http://www.cnblogs.com/renhui/p/6925810.html 首先编写Jni接口的c文件,此文件命名有些特殊,具体的命名方式可以参考文档来做. # ...
- sql 语句的limit的用法
SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset mysql> SELECT * FROM table LIMIT ...
- BOM 浏览器对象模型
1.window对象模型:(操作浏览器) 它既是ECMAScript规定的global对象,又是javascript访问浏览器窗口的一个接口 系统对话框:这些对话框有操作系统/浏览器设置决定,css不 ...
- 6月份值得一看的 Java 技术干货！
6月过完了,这一年都 TM 过了一半了,大家都回想下自己这大半年,你都收获了什么??技术有提升吗?对象搞定了吗? 说多了都是泪,唯有 WIFI.空调.西瓜.足球能够解忧.. 话说中国队怎么还不上场?哈 ...
- 【Promise】Promise实现请求超时处理（加强版）
昨天闲来无事,于是把之前写过的promise优化了一下,代码如下: /*写文件.追加写.读文件*/ var fs = require('fs'); function wrapper(fn,contex ...
- an error occurred attempting install_Github_for_windows_无法安装的解决方法_
都在这了,作者原创.我就截图好了.
- 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- SQL 必知必会·笔记<8>分组数据
1. 使用GROUP BY子句创建分组 示例: SELECT vend_id, COUNT(*) AS num_prods FROM Products GROUP BY vend_id; 注意 GRO ...
- mysql遇见contains nonaggregated column 'information_schema.PROFILING.SEQ'异常
报错如下:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggrega ...
- 从前端角度看ajax如何保护接口的安全性
一.前言 在web中,使用Ajax调用API,撇开跨域不讲,怎么做安全验证,防止别的网站调用呢?假设没有做安全保障,任何用户都可以直接访问接口,这回暴露出极大的安全隐患. 二.后端怎么做? 1.一些接 ...