<!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中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
随机推荐
-
关于面向切面编程Aspect Oriented Programming(AOP)
最近学到spring ,出来了一个新概念,面向切面编程,下面做个笔记,引自百度百科. Aspect Oriented Programming(AOP),面向切面编程,是一个比较热门的话题.AOP主要实 ...
-
thinking in Java 学习
1.句柄 所谓句柄实际上是一个数据,是一个long的数据. 句柄是WINDOWS用来标识被应用程序所建立或使用的对象的唯一整数,WINDOWS使用各种各样的句柄标识诸如应用程序实例,窗口,控制,位图, ...
-
Oracle设置表只读－alter table xxx read only
11g以前,当需要设置一个表只读时,我们通过赋予某些用户select权限.但对于表的owner来说,还是可以读写的. 从Oracle 11g开始,我们可以通过一下命令设置表只读或可读可写: alter ...
-
YUV格式转换RGB（基于opencv）
在编写代码将需要处理YUV格从每个视频帧中提取,然后将其保存为图片.有两种常见的方法在线,第一种是通过opencv自带cvCvtColor,可是这样的方法有bug.得到的图片会泛白.另外一种方法是公式 ...
-
Vbox隐藏虚拟机，实现后台运行
Vbox隐藏虚拟机,实现后台运行 1.进入vBox安装位置的命令行 D:\Program Files\VirtualBox> 2.执行命令: .\VBoxManage startvm Xp_ ...
-
Angularjs中config中置入以下拦截器
$httpProvider.interceptors.push(['$rootScope', '$q', '$localStorage', function ($rootScope, $q, $loc ...
-
关于微信分享的一些心得之recommend.js(直接复制就行)
// import $ from 'jquery'import Vue from 'vue'export default function (type,title,con,img,url,) { / ...
-
React之特点及常见用法
1.什么是React? React是一个用于构建用户界面的JavaScript库.主要用于构建UI,很多人认为Reatc是MVC中的V(视图). React起源于Facebook的内部项目,用来架构I ...
-
C# 将外部exe程序 嵌入到自己的窗体界面
将别人开发的exe程序,放到自己的窗体里面来运行. 1.基本功能实现 首先,在自己的窗体后面加上代码: [DllImport("User32.dll", EntryPoint = ...
-
查看Linux服务器的物理状态
1.当前内存使用情况 [user@host ~]$ free -m 2.当前CPU使用情况 [user@host ~]$ top 3.当前硬盘使用状态 [user@host ~]$ df -lh 4. ...