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. jmeter接口测试实例6-注册(参数化)

    Jmeter实例6:注册(参数化) 选中http协议,添加CSV Data set Config 准备参数中要使用到的值,存放到txt中,如果一个里面有多个参数,中间用,号分隔: 选中CSV元件,fi ...

  2. Mybatis批量插入返回自增主键(转)

    我们都知道Mybatis在插入单条数据的时候有两种方式返回自增主键: 1.对于支持生成自增主键的数据库:useGenerateKeys和keyProperty. 2.不支持生成自增主键的数据库:< ...

  3. 部署前准备--使用Mysql之Django Debug Toolbar安装以及配置

    python -c "import django ;print(django.__path__);" 查看python的全局配置 vi /usr/local/lib/python3 ...

  4. Vue(十一)计算属性

    计算属性 1. 基本用法 计算属性也是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作 b.对计算属性中的数据进行监视 2.计算属性 vs 方法 将计算属性的get函数定义为一个方法也 ...

  5. Vue(九)小案例 - 百度搜索列表(跨域)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Annotation 的第一个工程

    一.什么是 Annotation? java.lang.annotation,接口 Annotation.对于Annotation,是Java5的新特性,JDK5引入了Metadata(元数据)很容易 ...

  7. lettcode笔记--Valid Parentheses

    20.Valid Parentheses Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...

  8. 使用linux kernel代码编译perf工具

    环境:Qemu + ARMv8 perf是一款综合性分析工具,大到系统全局性性能,再小到进程线程级别,甚至到函数及汇编级别. 在内核源码目录下执行编译脚本: #!/bin/bash cross_com ...

  9. Unity3D性能优化最佳实践(四)资源审查

    Asset auditing - 资源审查 许多项目发生效能问题的真正原因只是由于人员操作不当或是试东试西,而不小心改到导入设定影响到导入的资源.(例如最近的gitlab惨案) 对于较大规模的项目,最 ...

  10. Caffe-SSD相关源码说明和调试记录

    1      对Blob的理解及其操作: Blob是一个四维的数组.维度从高到低分别是: (num_,channels_,height_,width_) 对于图像数据来说就是:图片个数,彩色通道个数, ...