echars关系图
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<title>echars关系图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>
<style>
body, html, #main {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="main">
</div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
show: false
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series: [{
type: 'graph',
layout: 'none',
symbol: 'roundRect',
symbolSize: [120, 50],
symbolOffset: ['15%', 0],
roam: false, //禁止用鼠标滚轮缩小放大效果
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 15],
//focusNodeAdjacency: true,
// 连接线上的文字
edgeLabel: {
normal: {
show: false,
textStyle: {
fontSize: 15
}
}
},
lineStyle: {
normal: {
opacity: 1,
width: 2,
curveness: 0,//线条的曲度 }
},
itemStyle: {
normal: {
color: "#2d8cf0"
}
},
// 圆圈内的文字
label: {
normal: {
show: true,
textStyle: {
color: "#fff",
fontSize: 14,
}
}
},
data: [{
name: '节点1',
x: 100,
y: 25,
}, {
name: '节点2',
x: 100,
y: 50,
}
],
// links: [],
links: [{
source: '节点1',
target: '节点2',
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); //单击事件 处理
myChart.on('click', function (params) {
if (params.dataType === "node") { }
});
//窗口大小改变 关系图重置大小
window.onresize = myChart.resize;
</script>
</body>
</html>
echars关系图的更多相关文章
- Ambari服务依赖关系图生成脚本
1. 生成服务依赖关系 #!/usr/bin/python import sys import commands import json def genDependString(ip): url=&q ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- (转)整体把握jQuery -jQuery 的原型关系图
整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...
- 使用MySQL Workbench导出MySQL数据库关系图
1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...
- tcp/ip协议栈调用关系图
最近阅读了tcp/ip详解卷2,总结一下整个发送过程和接收过程 sendmsg \/ sendit \/ sosend(这一步将数据从用户空间拷贝到内核空间,并且会在这一步判断发送缓存空间是否充足,是 ...
- [CareerCup] 15.6 Entity Relationship Diagram 实体关系图
15.6 Draw an entity-relationship diagram for a database with companies, people, and professionals (p ...
- jQuery 的原型关系图，整体把握jQuery
若干个月前,在博客园中看到一篇文章,内容很简单,就是一幅图,展示的是 jQuery 中各对象之间的关系,当时就觉得,这就是我想要的最直观的总结 jQuery 的方式.在那篇文章中,也有 ...
- IDEA的查询引用、调用关系图的功能
Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员变量的调用树(caller和callee两个方向),非常方便. 在IDEA中类似功能被划分到了三个命 ...
- c语言分析函数调用关系图(call graph)的几种方法
一.基于 Doxygen或 lxr 的API形式的文档系统. 二.基于CodeViz, CodeViz是<Understanding The Linux Virtual Memory Manag ...
随机推荐
- Neo4j学习笔记
1. 环境搭建 正好最近同学有一台阿里云服务器借我玩,就尝试着在服务器上搭了Neo4j. 环境:CentOS Linux release 7.4.1708 (Core) 安装Java 安装Neo4j需 ...
- C# log4net 使用
利用log4net写入异常类日志,在网上搜索一阵之后便想记录下来,以便后期使用,同时希望帮到大家. 第一步:使用管理NuGet程序包导入log4net.dll 导入成功后会在引用下显示相应的log4 ...
- C#效率优化（2）-- 方法内联
一.JIT编译器可以通过将方法内联展开(Method Inline Expansion)来提升效率,类似C++中的内联函数(Inline Function),与C++的内联函数不同的是,C#并不支持内 ...
- AOP技术基础(转)
1.引言 2.AOP技术基础 3.Java平台AOP技术研究 4..Net平台AOP技术研究 2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto ...
- Xdebug在PHP中的安装配置
Xdebug在PHP中的安装配置涉及php.ini配置文件的修改. 1 首先需要下载Xdebug,根据安装的PHP版本,选择合适的Xdebug版本, 2 安装Xdebug将下载的php_xdebu ...
- Debatching(Splitting) XML Message in Orchestration using DefaultPipeline - BizTalk 2010
Debatching(Splitting) XML Message in Orchestration using DefaultPipeline - BizTalk 2010 In this po ...
- Java基础系列--ArrayList集合
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8494618.html 一.概述 ArrayList是Java集合体系中最常使用,也是最简单 ...
- python的Web框架，中间件middleware及djangoAdmin
简介 用于处理request和response的中间处理的函数,可以创建在项目中的任意位置,只要可以导入即可. 建议创建在APP目录下,方便管理. 函数范式与激活 中间件的范式: # 必须接受get_ ...
- [SCOI2010] 连续攻击游戏
题目 Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一 ...
- nginx作为web服务以及nginx.conf详解
Nginx系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 1.nginx简介 nginx是一个优秀的web服务程序.反向代理程序.它采用非 ...