最近由于项目需求，需要做一个类似人立方效果的网络关系效果，在查询许多文档后，发现百度出echarts开源组件非常的适合，而且加载速度很棒，echarts图形主要是使用html5的新特性的做的，使用到了canvas画板等。下面是我自己实现的一些过程和经验，供大家参考。
这里是echarts的网站：http://echarts.baidu.com/doc/example.html
里面有详细的使用流程和例子，只要是稍微懂一些javascript就能看懂。
第一步：
下载echarts的插件： 在项目中导入一下俩个文件
1 esl.js
2 echarts-original.js
3 jquery-1.9.1.min.js jQuery压缩文件
第二步：
定义一个div容器，用来盛放echarts的图形，必须定义一个id。如下：
<div id="rel" style="height: 500px; margin: 0 auto;"></div>
第三步：
配置相关图形的属性，加载图形到容器中，启动图形。
详细代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>网络关系图</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/echarts/esl.js"></script>
<script type="text/javascript">
function relativeWord() {
// 路径配置
require.config({
paths : {
"echarts" : "js/echarts/echarts-original",
"echarts/chart/force" : "js/echarts/echarts-original"
}
});
// 使用
require([ "echarts", "echarts/chart/force" ], function(ec) { // 使用力向图模块，按需加载
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById("rel"));
var option = {
title : {
text : "网络关系图",
subtext : "数据来源andy",
x : "right",
y : "bottom",
padding : [ 10, 30 ]
},
dataRange : {
color : [ '#1178ad', '#72bbd0' ]
},
tooltip : {
trigger : "item",
formatter : "{a0}:{b0}<br>关系值:{d}",
borderRadius : 3,
backgroundColor : "rgba(0,0,0,0.4)",
padding : 4,
axisPointer : {
type : 'none',
lineStyle : {
color : '#4b8',
width : 2,
type : 'dashed'
},
crossStyle : {
color : '#1e90ff',
width : 5,
type : 'dashed'
},
shadowStyle : {
size : 'auto',
color : 'rgba(150,150,150,0.3)'
}
}
},
color : [ '#33ff33', '#cc33ff' ],
legend : {
data : [ {
name : "中心词",
textStyle : {
color : "#33ff33"
}
}, {
name : "关系词",
textStyle : {
color : "#cc33ff"
}
} ]
},
series : [ {
type : "force",
name : "词关系",
categories : [ {
name : "中心词",
}, {
name : "关系词",
} ],
itemStyle : {
normal : {
label : {
show : true,
textStyle : {
color : "#FFF",
fontFamily : "微软雅黑",
fontSize : 12
}
},
nodeStyle : {
brushType : "both",
color : '#333333',
strokeColor : "rgba(255,215,0,0.4)",
lineWidth : 10
},
linkStyle : {
strokeColor : "#8cdfc3",
type : 'dashed',
lineWidth : 2
}
},
emphasis : {
label : {
show : false
// textStyle: null // 默认使用全局文本样式，详见TEXTSTYLE
},
nodeStyle : {
//color:"#4B8"
//r: 30
},
}
},
useWorker : false,
minRadius : 25,
maxRadius : 35,
gravity : 0.4,
scaling : 1.5,
animation : true,
large : true,
useWorker : 20,
linkSymbol : "none",
nodes : [ {
"category" : 0,
"name" : '幸福',
"value" : 10
}, {
"category" : 1,
"name" : '你',
"value" : 4
}, {
"category" : 1,
"name" : '我',
"value" : 5
}, {
"category" : 1,
"name" : '他',
"value" : 4
}, {
"category" : 1,
"name" : '家',
"value" : 22
}, {
"category" : 1,
"name" : '微暖',
"value" : 3
}, {
"category" : 1,
"name" : '爱情',
"value" : 4
}, {
"category" : 1,
"name" : '友情',
"value" : 9
}, {
"category" : 1,
"name" : '情亲',
"value" : 11
}, {
"category" : 1,
"name" : '房子',
"value" : 14
}, {
"category" : 1,
"name" : '车',
"value" : 10
}, {
"category" : 1,
"name" : '美满',
"value" : 11
}, {
"category" : 1,
"name" : '健康',
"value" : 14
}, {
"category" : 1,
"name" : '事业',
"value" : 12
}, {
"category" : 1,
"name" : '别墅',
"value" : 10
} ],
links : [ {
source : '幸福',
target : '你',
weight : 2
}, {
source : '幸福',
target : '我',
weight : 9
}, {
source : '幸福',
target : '他',
weight : 11
}, {
source : '幸福',
target : '家',
weight : 2
}, {
source : '幸福',
target : '美满',
weight : 11
}, {
source : '幸福',
target : '健康',
weight : 14
}, {
source : '幸福',
target : '事业',
weight : 12
}, {
source : '幸福',
target : '别墅',
weight : 10
}, {
source : '你',
target : '车',
weight : 22
}, {
source : '你',
target : '微暖',
weight : 10
}, {
source : '你',
target : '房子',
weight : 8
}, {
source : '我',
target : '情亲',
weight : 5
}, {
source : '房子',
target : '情亲',
weight : 10
}, {
source : '车',
target : '家',
weight : 5
}, {
source : '幸福',
target : '房子',
weight : 7
},
{
source : '我',
target : '爱情',
weight : 9
}, {
source : '我',
target : '友情',
weight : 7
},
]
} ]
};
var ecConfig = require("echarts/config");
function focus(param) {
var data = param.data;
var links = option.series[0].links;
var nodes = option.series[0].nodes;
if (data.source !== undefined && data.target !== undefined) { //点击的是边
var sourceNode = nodes[data.source];
var targetNode = nodes[data.target];
console.log("选中了边 " + sourceNode.name + " -> "
+ targetNode.name + " (" + data.weight + ")");
} else { // 点击的是点
console.log("选中了" + data.name + "(" + data.value + ")");
}
console.log(param);
}
myChart.on(ecConfig.EVENT.CLICK, focus);
// 为echarts对象加载数据
myChart.setOption(option);
});
}
relativeWord();
</script>
</head>
<body>
<div>
<div style="margin: 20px 0 0 20px; font-size: 14px;">
<!-- 词网络容器 -->
<div id="rel" style="height: 500px; margin: 0 auto;"></div>
</div>
</div>
</body>
</html>
其效果图入下：
时间： 2024-10-12 13:10:10