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网络拓扑图的更多相关文章

  1. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  2. ECharts+BaiduMap+HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  3. HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用

    在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web  ...

  4. 快速开发基于 HTML5 网络拓扑图应用

    采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...

  5. HTML5 网络拓扑图性能优化

    HTML5 中的 Canvas 对文本的渲染(fillText,strokeText)性能都不太好,比如设置字体(font).文本旋转(rotation),如果绘制较多的文本时,一些交互操作会手动很大 ...

  6. 矢量Chart图表嵌入HTML5网络拓扑图的应用

    使用 HT for Web (以下简称 HT)开发HTML5网络拓扑图的开发者有 Chart 需求的项目的时候,感觉很痛苦,HT 集成的 Chart 组件中,并不包含有坐标,在展现方面不是很直观,但是 ...

  7. 网络/运维工程师visio2013模具图标 绘制漂亮的网络拓扑图 狮子XL工程师美学思想

    visio2013狮子XL自定义运维模具下载: 链接:http://pan.baidu.com/s/1bo779Kz 密码:xh3s 狮子XL 的美学思想: 1,一次痛苦,一生幸福. 之前,在绘制网络 ...

  8. 快速开发基于 HTML5 网络拓扑图应用1

    今天开始我们就从最基础解析如何构建 HTML5 Canvas 拓扑图应用,HT 内部封装了一个拓扑图形组件 ht.graph.GraphView(以下简称 GraphView)是 HT 框架中 2D ...

  9. 基于 HTML5 Canvas 绘制的电信网络拓扑图

    电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...

随机推荐

  1. 用Java代码列出一个目录下所有的文件

    1.File类 File类在java.io.File包中,所以要导入这个包. File类中用到的方法: boolean isDirectory()       测试此抽象路径名表示的文件是否是个目录 ...

  2. Centos7——NFS(Network File System)服务

    NFS(Network File System)即网络文件系统,允许计算机之间通过网络共享资源:在NFS客户端即可NFS服务端所共享的目录挂载到本地,此时即可像读写本地目录一样读写远程计算机的目录与文 ...

  3. HTTP协议内容1

    一.请求协议(浏览器---àserver) 格式: (1)    请求首行 ://请求方式 请求路径 协议和版本 例如:GET /index.html HTTP/1.1 (2)    请求头信息:// ...

  4. python之装饰器篇

    一.基本装饰器 基本装饰器的作用: 在不改变原函数的基础上, 通过装饰器, 给原函数新增某些功能 实现方法: 在原函数上加 @装饰器名字 其中@叫做语法糖 定义装饰器 第一层函数传入参数(用于传入原函 ...

  5. JSP解决:Attempt to clear a buffer that&#39;s already been flushed错误(jsp:forward标签跳转空白)

    [摘要:本日正在开辟过程当中发明一个题目:正在页里中应用了jsp:forward扔错Attempt to clear a buffer that's already been flushed!! 百思 ...

  6. x264阅读记录-2

    x264阅读记录-2 7. x264_encoder_encode函数-1 查看该函数代码(Encoder.c文件)可以发现,该函数中注释很详细,对编码的整个步骤展示的也相对比较清晰. 在查看具体的代 ...

  7. iOS:练习题中如何用技术去实现一个连线题

    一.介绍 本人做的app涉及的是教育行业,所以关于练习题的开发肯定是家常便饭.例如,选择题.填空题.连线题.判断题等,每一种题型都需要技术去实现,没啥多大难度,这里呢,就给出实现连线题的核心代码吧.过 ...

  8. QPS从0到4000请求每秒,谈达达后台架构演化之路(转载)

    https://blog.csdn.net/czbing308722240/article/details/52350219 QPS从0到4000请求每秒,谈达达后台架构演化之路   达达是全国领先的 ...

  9. JSONObject、JSONArray、Map、JavaBean的相互转换

    1,JSONObject json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} 2,JSONArray json数组,使用中括号[ ],只不过数组里面的项也是json键 ...

  10. 使用pyenv安装多个Python版本

    pyenv是一个便于使用多版本Python环境的工具 pyenv使用shell脚本编写的,只需要下载就可以使用了,不需要root用户,这个我比较喜欢. 具体介绍看网址:https://github.c ...