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中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
随机推荐
- day44 数据库学习 索引 引用自egon 老师博客
MySQL索引管理 总结 #索引是存在硬盘中的, #索引的功能, 1.可以加速查询 2.但是他会降低写入和删除的速度 所以不能乱加索引 总结二 1 最左前缀匹配原则 2设置的索引,它的字段中的内容占空 ...
- What's New In Zeebe: Scaling Zeebe, New Client APIs, Faster Requests, Timestamps, NodeJS Client, and Default Topic is Back!
Written by Daniel Meyer on May 16 2018 in the What's New In Zeebe category. Welcome to the first-eve ...
- Singer 学习八 运行&&开发taps、targets (三 开发tap)
如何没有找到适合的tap,那么我们可以自己开发一个 hello world tap 仅仅是一个程序,我们可以使用任何语言进行编写,根据singer 指南,输出数据到stdout 即可,实际上一个简单的 ...
- 海思HI3518由于sensor对齐方式问题导致视频花屏
https://blog.csdn.net/faihung/article/details/70306446 前几天在验证一台IPC硬件时,遇到一个问题:在其它设备上视频功能运行正常的固件,烧录到客户 ...
- [转]从OSI网络模型到TCP/IP协议族简介
OSI七层模型 OSI(Open System Interconnection,开放系统互联)七层网络模型成为开放式系统互联参考模型,是一个把网络通信在逻辑上的定义,也可以理解成为定义了通用的网络通信 ...
- redis 学习资料
redis 学习资料 网址 Redis 教程(菜鸟教程) http://www.runoob.com/redis/redis-tutorial.html Redis 命令参考 http://redis ...
- webpack 打包产生的文件名中，hash、chunkhash、contenthash 的区别
table th:first-of-type { width: 90px; } hash 类型 区别 hash 每一次打包都会生成一个唯一的 hash chunkhash 根据每个 chunk 的内容 ...
- this、new，容易混淆的地方
this.new,容易混淆的地方 情况1 关系 情况2 new Foo() 等价于,推荐的写法是new Foo() new Foo new Foo() 不一样 Foo(), Foo()这种情况下,构造 ...
- Tornado 文件操作笔记
import tornado.web import tornado.ioloop import tornado.options import tornado.httpserver from torna ...
- C# 多线程控制
C# 多线程控制 通讯 和切换 一.多线程的概念 Windows是一个多任务的系统,如果你使用的是windows 2000及其以上版本,你可以通过任务管理器查看当前系统运行的程序和进程.什么是进 ...