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中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
随机推荐
- HotSpot VM GC 的种类
collector种类 GC在 HotSpot VM 5.0里有四种: incremental (sometimes called train) low pause collector已被废弃,不在介 ...
- PowerDesigner学习 ---- 系列文章
一.PowerDesigner概述(系统分析与建模) 二.项目和框架矩阵 三.企业架构模型 四.业务处理模型 五.概念数据模型(CDM生成LDM,PDM和OOM) 六.物理数据模型(PDM逆向工程) ...
- asterisk todo
1, 如何让用户打一个密码才能继续外拨? 可以利用__9xxx那种做法 2,如何和onsip连起来? 3, 如何记录所有拨打记录?
- 通过script src引入ElementUI时，使用语句：window.ELEMENT.MessageBox.alert(xxx) 调用弹出框
通过script src引入ElementUI时,使用语句:window.ELEMENT.MessageBox.alert(xxx) 调用弹出框.
- Bitvise 使用公私玥免密登陆 服务器
远程机linux 首先需要把 生成 公私玥,并且把公钥 写到 远程linux 主机的,你要登陆的用户下面 的.ssh 文件里面的authorized_keys 文件里面.这个参考我的另一篇关于linu ...
- php调用c#的dll（转）
这几天,一直在做DES ecb模式的加解密,刚用.net实现了加解密,完了由于需要又要转型成PHP代码,费了九牛二虎之力单独用PHP没能实现,结构看到一篇php直接调用c#里生成的.dll文件的方法, ...
- Linux paste命令详解
Linux paste命令 Linux paste命令用于合并文件的列.paste指令会把每个文件以列对列的方式,一列列地加以合并 将每个指定文件里的每一行整合到对应一行里写到标准输出,之间用制表符分 ...
- Ubuntu Server 与 Ubuntu Desktop之间的区别
服务器版本的内核时钟频率由桌面的100hz转为1khz,这一点是为某些服务器应用提供更好的性能和吞吐量. 除此之外,服务器内核支持SMP"对称多处理"(Symmetrical Mu ...
- ByteType字符串中判断是否英文
ByteType('123你好吗',1)=mbSingleByte//单字节ByteType('123你好吗',4)=mbLeadByte//双字节字符的第一个字符ByteType('123你好吗', ...
- [VC6,VC9] [ts,nts,deb] [rpm,msi] 你需要下载什么格式的文件
1.VC6与VC9的区别 VC6版本是使用Visual Studio 6编译器编译的,如果你的PHP是用Apache来架设的,那你就选择VC6版本. VC9版本是使用Visual Studio 200 ...