echart力导向图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>Title</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script>
$(document).ready(function(){
var myChart = echarts.init(document.getElementById('piedemo'));
option = {
tooltip: {
show: true,
},
legend: {
x: "center",
y:'30px',
data: ["家人", "朋友"]
},
animation: false,
series: [{
categories: [{
name: '家人',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: '朋友',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}],
type: 'graph',
layout: 'force',
symbol: "roundRect",
symbolSize: 50,
roam: true, //禁止用鼠标滚轮缩小放大效果
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [0, 10],
// 连接线上的文字
focusNodeAdjacency: true, //划过只显示对应关系
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 18
},
formatter: "{c}"
}
},
categories: [{
name: '家人',
itemStyle: {
normal: {
color: "#009800",
}
},
}, {
name: '朋友',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}],
lineStyle: {
normal: {
opacity: 1,
width: 2,
curveness: 0
}
},
force: {
repulsion: 5000
},
label: {
normal: {
show: true,
position : ['20%','38%'],//标签的位置。['50%', '50%'][x,y]
textStyle:{
color:"#fff"
}
}
},
data: [{
name: '中爆数字',
symbol: "Rect",
symbolSize: [250,30],
label: {
normal: {
show: true,
position : ['40%', '20%'],//标签的位置。['50%', '50%'][x,y]
}
}
}, {
name: '节点2',
category: 1,
itemStyle: {
normal: {
color: '#090',
},
emphasis: {
color: "#000"
}
}
}, {
name: '节点3',
category: 1
}, {
name: '节点4',
category: 0
}, {
name: '节点5',
category: 0
}, {
name: '节点6',
category: 0
}],
links: [{
source: '节点2',
target: 0,
value: "朋友",
lineStyle: {
normal: {
color: '#38f',
curveness: 0 // 线的弯曲度 0-1之间 越大则歪曲度更大
}
},
label: {
normal: {
textStyle: {
color: '#07ac72'
}
}
}
}, {
source: '节点3',
target: 0,
value: "朋友"
}, {
source: '节点4',
target: 0,
value: "家人"
}, {
source: '节点5',
target: 0,
value: "家人"
}, {
source: '节点6',
target: 0,
value: "家人"
} ]
}]
}; myChart.setOption(option);
myChart.on('dblclick', openOrFold); function appendPath(params){ //拼接节点关系并显示在左下角，
var option = myChart.getOption();
var series = option.series[params.seriesIndex]; //获取图表
var links= series.links;//获取所有连线
if(params.dataType=="node"){ //dataType可以是edge(线条)或node(数据)
var str = params.data.name;
for( i = 0 ; i < links.length; i++){
if(links[i].source==str){
str =links[i].source+"->" +series.data[links[i].target].name ;
}
}
return str;
}else if(params.dataType=="edge"){ //当鼠标停留在连线上时，暂不处理
return "";
}
} function openOrFold(params) { //该事件会提示节点间关系
var str = appendPath(params);
document.getElementById("main_1").innerHTML = str;
var oW = $('#main_1').width()/2;
$('#main_l').css({marginLeft:-oW});
return str;
}
});
</script>
<style>
.box{position: relative;width: 800px;
height: 600px;
margin: 40px auto;}
#piedemo{width:800px;height:600px;margin: 40px auto;}
#main_1{
height: 20px;
width: 80%;
text-align: center;
background: rgba(243,112,0,.2);
z-index: 10000;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div id="main_1"></div>
<div id="piedemo"></div>
</div>
</body>
</html>
echart力导向图的更多相关文章
- D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- D3.js 力导向图
花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
- 力导向图Demo
<html> <head> <meta charset="utf-8"> <title>力导向图</title> < ...
- d3.js（v5.7）力导向图（关系图谱）
先上图,后面再一一解释: ok,为了方便理解,这里我就没有用之前封装的automatch函数来将数据和节点匹配了,如果你对enter(),exit()函数还不是很理解的话,请移步至我之前写的<n ...
- D3.js系列——布局：饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- 使用百度Echarts制作力导向图
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...
- D3.js力导向图中新增节点及新增关系连线示例
大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...
- D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决
上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
随机推荐
- python基础教程_学习笔记9：抽象
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/signjing/article/details/30745465 抽象 懒惰即美德. 抽象和结构 抽 ...
- 你不知道的JavaScript(中卷) (Kyle Simpson 著)
第一部分 类型和语法 第1章 类型 1.1 类型 1.2 内置类型 1.3 值和类型 1.3.1 undefined和undeclared 1.3.2 typeof Undeclared 1.4 小结 ...
- .NET本质论 方法
方法和JIT编译 CLR只执行本机的机器代码.如果一个方法体由CIL组成,那么它就必须在调用之前被转换为本机的机器码(将MSIL编译为本机代码,运行库提供了两种方式.一种就是在安装与部署时的预编译(由 ...
- 短信验证登陆-中国网建提供的SMS短信平台
一.JAVA发送手机短信常见的有三种方式(如下所列): 使用webservice接口发送手机短信,这个可以使用sina提供的webservice进行发送,但是需要进行注册 使用短信mao的方式进行短信 ...
- Lambda 表达式 是 个 好东东
Lambda 表达式 是 个 好东东 首先,通过 Lambda 表达式 + 动态语言特性 dynamic , C# 已经 可以 实现 函数式 编程 了 其次, 利用 Lambda, 可以 实现 AOP ...
- Maven知识整理
一.概念: Maven是一个项目管理工具,它包含了一个项目对象模型(Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统( ...
- JAVA中数组Array与List互转
List<String> list = new ArrayList<String>();String[] array = new String[10]; 1.数组转成Listl ...
- mysql之 redo log
重做日志(redo log) 前言:之前一直弄不清楚 mysql 里面 bin log 和 innodb log 文件的区别,在脑子里面一直有个疑问 binlog 日志文件已经可以用来进行数据库的日志 ...
- css 如何实现图片等比例缩放
在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...
- C166-变量和函数指定物理地址一
1.函数指定地址 按照http://www.keil.com/support/docs/2215.htm C166: LOCATING PROGRAM SECTIONS TO SPECIAL MEMO ...