echarts网络拓扑图
option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false,
data: ["朋友", "战友", '亲戚']
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
categories: [{
name: '朋友',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: '战友',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}, {
name: '亲戚',
itemStyle: {
normal: {
color: "#3592F",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: [{
name: '徐贱云',
draggable: true,
}, {
name: '冯可梁',
category: 1,
draggable: true,
}, {
name: '邓志荣',
category: 1,
draggable: true,
}, {
name: '李荣庆',
category: 1,
draggable: true,
}, {
name: '郑志勇',
category: 1,
draggable: true,
}, {
name: '赵英杰',
category: 1,
draggable: true,
}, {
name: '王承军',
category: 1,
draggable: true,
}, {
name: '陈卫东',
category: 1,
draggable: true,
}, {
name: '邹劲松',
category: 1,
draggable: true,
}, {
name: '赵成',
category: 1,
draggable: true,
}, {
name: '陈现忠',
category: 1,
draggable: true,
}, {
name: '陶泳',
category: 1,
draggable: true,
}, {
name: '王德福',
category: 1,
draggable: true,
}],
links: [{
source: 0,
target: 1,
category: 0,
value: '朋友'
}, {
source: 0,
target: 2,
value: '战友'
}, {
source: 0,
target: 3,
value: '房东'
}, {
source: 0,
target: 4,
value: '朋友'
}, {
source: 1,
target: 2,
value: '表亲'
}, {
source: 0,
target: 5,
value: '朋友'
}, {
source: 4,
target: 5,
value: '姑姑'
}, {
source: 2,
target: 8,
value: '叔叔'
}, {
source: 0,
target: 12,
value: '朋友'
}, {
source: 6,
target: 11,
value: '爱人'
}, {
source: 6,
target: 3,
value: '朋友'
}, {
source: 7,
target: 5,
value: '朋友'
}, {
source: 9,
target: 10,
value: '朋友'
}, {
source: 3,
target: 10,
value: '朋友'
}, {
source: 2,
target: 11,
value: '同学'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0
}
}
}
]
};
地址:http://gallery.echartsjs.com/editor.html?c=xH1Rkt3hkb
echarts网络拓扑图的更多相关文章
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- HTML5 网络拓扑图性能优化
HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...
- 矢量Chart图表嵌入HTML5网络拓扑图的应用
使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...
- 网络/运维工程师visio2013模具图标 绘制漂亮的网络拓扑图 狮子XL工程师美学思想
visio2013狮子XL自定义运维模具下载: 链接:http://pan.baidu.com/s/1bo779Kz 密码:xh3s 狮子XL 的美学思想: 1,一次痛苦,一生幸福. 之前,在绘制网络 ...
- 快速开发基于 HTML5 网络拓扑图应用1
今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...
- 基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
随机推荐
- Compile groovy mixed with java in Maven
Assuming that groovy codes are in src/main/groovy and java codes are in src/main/java. We can use 2 ...
- 【贪心】经营与开发 @upc_exam_5500
目录 经营与开发 @upc_exam_5500 PROBLEM 题目描述 输入 输出 样例输入 样例输出 提示 SOLUTION CODE 经营与开发 @upc_exam_5500 PROBLEM 题 ...
- poj2229 Sumsets (递推)
http://poj.org/problem?id=2229 看到题目能感觉到多半是动态规划,但是没有清晰的思路. 打表找规律: #include<cstdio> #include< ...
- [原创]移动安全测试框架MobSF介绍
[原创]移动安全测试框架MobSF介绍 1 mobsf简介 Mobile Security Framework (移动安全框架) 是一款智能.集成型.一体化的开源移动应用(Android/iOS)自动 ...
- Column 'u_id' in field list is ambiguous
- RabbitMQ 可靠投递
RabbitMQ 可靠投递 标签: RabbitMQ shovel-plugin ConfirmCallback RabbitMQ消息投递 背景 confirmCallback 确认模式 return ...
- 单片机成长之路(51基础篇) - 013 MCS-51单片机控制详解–T2MOD
T2CON:定时器控制寄存器 寄存器地址0C8H,位寻址0C8H-0CFH. 位地址 CF CE CD CC CB CA C9 C8 位符号 TF2 EXF2 RCLK TCLK EXEN2 TR2 ...
- 分析轮子(二)- << ,>>,>> (左移、右移、无符号右移)
前言:写 分析轮子(一)-ArrayList.java 的时候看到源码中有 int newCapacity = oldCapacity + (oldCapacity >> 1); 这样的代 ...
- linux下 彻底修改python的包/模块导入路径
python模式下,有时候需要导入 import某些模块或者包.明明这个模块/包是存在的,却提示导入错误,比如,“ImportError: No module named lxml”. 但是当你在命 ...
- 小米Pro 安装苹果系统
参考 http://www.miui.com/thread-11363672-1-1.html http://www.miui.com/thread-7601066-1-1.html https:// ...