码迷,mamicode.com
首页 > 编程语言 > 详细

javascript框架echarts插件实现超酷人立方效果图

时间:2014-11-17 16:00:05      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:echarts   html5   网络图   关系图   人立方   

最近由于项目需求,需要做一个类似人立方效果的网络关系效果,在查询许多文档后,发现百度出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>

其效果图入下:

bubuko.com,布布扣



javascript框架echarts插件实现超酷人立方效果图

标签:echarts   html5   网络图   关系图   人立方   

原文地址:http://blog.csdn.net/fengshizty/article/details/41208625

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!