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中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...
随机推荐
- Singer 学习一 使用Singer进行mysql 2 postgres 数据转换
Singer 因为版本的问题,推荐的运行方式是使用virtualenv,对于taps&& target 的运行都是 推荐使用此方式,不然包兼容的问题太费事了 备注: 使用docker- ...
- vorpal 又一个方便的cli 开发包
vorpal 是一个npm 包,我们可以用来开发专业的cli 程序 简单使用 初始化项目 yarn init -y 添加依赖 yarn add vorpal 简单demo app.js // cons ...
- Gravitee.io api gateway 试用
以前写过几篇关于整体介绍的以及 使用docker 运行的简单说明,有了docker-compose 环境我们可以 方便的进行测试使用了. 环境准备 docker-compose 文件 versio ...
- ML（5）——神经网络2（BP反向传播）
上一章的神经网络实际上是前馈神经网络(feedforward neural network),也叫多层感知机(multilayer perceptron,MLP).具体来说,每层神经元与下一层神经元全 ...
- RCC 和 RTC
RCC是STM32的时钟控制器,可开启或关闭各总线的时钟,在使用各外设功能必须先开启其对应的时钟,没有这个时钟内部的各器件就不能运行.RTC是STM32内部集成的一个简单的时钟(计时用),如果不用就关 ...
- Linux下使用Quagga(Zebra)搭建路由器记录（转）
写在前面 从22号中午开始琢磨zebra/quagga的用法,一直到晚上11点多都没有什么头绪.各种Google,百度,几近崩溃.由于网上关于zebra/quagga的配置方法都是在真实的若干台电脑上 ...
- jmeter修改ServerAgent的默认端口号
jmeter修改ServerAgent的默认端口号 1 java -jar ./CMDRunner.jar --tool PerfMonAgent --udp-port 5555 --tcp-port ...
- 部署openresty遇到的一些坑
最近,遇到一个问题,就是我们CMS系统制作的产品页面和产品列表页面,发布到nginx服务器上,因为业务要求,客户看到的链接必须是短链接,当前的做法就是在nginx的配置中通过rewrite的方式做的. ...
- java集合之List源码解析
List是java重要的数据结构之一,我们经常接触到的有ArrayList.Vector和LinkedList三种,他们都继承来自java.util.Collection接口,类图如下 接下来,我们对 ...
- javascript map forEach filter some every在购物车中的实战演练区分用法
1.map forEach 1.map 循环遍历每一项,返回一个新的数组 例: 购物车商品小计: //购物车 var cart=[ {"id":101,"name&quo ...