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)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
随机推荐
- Vue(十八)Element UI
Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...
- Asp.Net HttpPostedFile和base64两种上传图片(文件)方式
之前上传图片基本都是用的HttpPostedFile方式获取图片,这次因为需求关系,要对准备上传的图片进行删除,最后提交的时候才去保存图片到服务器, 找了下资料,html5有个新的东西出来,js 里面 ...
- Docker命令使用详解(转)
如果各位看官熟悉 Git 和 GitHub ,可与 Docker 做个类比,可更加容易理解 Docker 和 Docker Hub 及两者关系. 1. docker version 显示 Docker ...
- [原创]AndroBugs_Framework Android漏洞扫描器介绍
[原创]AndroBugs_Framework Android漏洞扫描器介绍 1 AndroBugs_Framework Android 漏洞扫描器简介 一款高效的Android漏洞扫描器,可以帮助开 ...
- 咏南新CS三层开发框架
咏南新CS三层开发框架 咏南WEB桌面框架演示:47.106.93.126:9999 咏南WEB手机框架本地:47.106.93.126:8077 咏南CS框架下载:https://pan.baidu ...
- line-height 设置为 1
https://stackoverflow.com/questions/1000398/what-is-line-height1 If no unit is supplied e.g. " ...
- Guava future
减少主函数的等待时间,使得多任务能够异步非阻塞执行 ListenableFuture是可以监听的Future,它是对java原生Future的扩展增强.Future表示一个异步计算任务,当任务完成时可 ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- 理解JAVA的IO
1. 什么是流Java中的流是对字节序列的抽象,我们可以想象有一个水管,只不过现在流动在水管中的不再是水,而是字节序列.和水流一样,Java中的流也具有一个“流动的方向”,通常可以从中读入一个字节序列 ...
- Jmeter执行python脚本函数使用说明
一.下载地址插件百度网盘下载地址:https://pan.baidu.com/s/1SvJjyThsXYryXuEEg9rm3g提取码:q9hd 二.使用说明1.将下载的jmeter-function ...