一，需要的插件，charts ,jquery
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>二，设置参数
(1)节点 ，_node
数据格式
{
name: '张东',
itemStyle: {
normal: {
color: 'green',
}
}
}参数 symbolSize 图表的点的大小
（2）链路
数据格式
{
source: '马云',
target: '阿里巴巴',
name: '高管',
des: 'XXXX',
lineStyle: {
normal: {
color: '#000',
}
}
}参数 source 边的源节点名称的字符串，也支持使用数字表示源节点的索引。
target 边的目标节点名称的字符串，也支持使用数字表示源节点的索引。
value 边的数值，可以在力引导布局中用于映射到边的长度。
lineStyle 线条风格
三，series 设置
type: 'graph',
layout: 'force',
symbolSize: 80,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
itemStyle: {
normal: {
color: '#4b565b'
}
},
lineStyle: {
normal: {
width: 2,
color: '#4b565b'
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data: _node,
links:_links
} 参数 （1）roam 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
（2）layout 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
'circular' 采用环形布局，见示例 Les Miserables，布局相关的配置项见 graph.circular
'force' 采用力引导布局，见示例 Force，布局相关的配置项见 graph.force
（3） edgeSymbol
边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：
edgeSymbol: ['circle', 'arrow']（4） series[i]-graph.draggable boolean
[ default: false ]
节点是否可拖拽，只在使用力引导布局的时候有用
其他参数可以查看 http://echarts.baidu.com/option.html#series-graph.edgeSymbol
源码
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ECharts 关系图谱</title>
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
<style type="text/css">
html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }
</style>
</head>
<body>
<div id="main" style=""></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var _node=[
{
name: '张东',
itemStyle: {
normal: {
color: 'green',
}
}
},
{
name: '高育良'
},
{
name: '高育良1'
},
{
name: '高育良2'
},
{
name: '阿里巴巴',
itemStyle: {
normal: {
color: 'blue',
}
}
}
, {
name: '陕西西部资信',
symbolSize:100,
itemStyle: {
normal: {
color: 'red',
}
}
}
]
var _links=[
{
source: '高育良',
target: '陕西西部资信',
name: '高管',
des: '陕西西部资信是高育良的得意门生',
lineStyle: {
normal: {
color: '#000',
}
}
},
{
source: '高育良1',
target: '陕西西部资信',
name: '高管',
des: '陕西西部资信是高育良的得意门生',
lineStyle: {
normal: {
color: '#000',
}
}
},
{
source: '高育良2',
target: '陕西西部资信',
name: '高管',
des: '陕西西部资信是高育良的得意门生',
lineStyle: {
normal: {
color: '#000',
}
}
},
{
source: '张东',
target: '陕西西部资信',
name: '股东',
des: '陕西西部资信是高育良的得意门生',
lineStyle: {
normal: {
color: '#000',
}
}
},
{
source: '张东',
target: '阿里巴巴',
name: '任职',
des: '陕西西部资信是高育良的得意门生',
lineStyle: {
normal: {
color: '#000',
}
}
},
{
source: '张东',
target: '陕西西部资信',
name: '任职',
des: '陕西西部资信',
lineStyle: {
normal: {
color: '#000',
}
}
}]
option = {
title: { text: '企业关系' },
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 80,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
itemStyle: {
normal: {
color: '#4b565b'
}
},
lineStyle: {
normal: {
width: 2,
color: '#4b565b'
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data: _node,
links:_links
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
