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

页面导航:首页 > 网络编程 > JavaScript > javascript框架echarts插件实现超酷人立方效果图

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

来源: 作者: 时间:2016-02-05 11:06 【

最近由于项目需求,需要做一个类似人立方效果的网络关系效果,在查询许多文档后,发现百度出echarts开源组件非常的适合,而且加载速度很棒,echarts图形主要是使用html5的新特性的做

最近由于项目需求,需要做一个类似人立方效果的网络关系效果,在查询许多文档后,发现百度出echarts开源组件非常的适合,而且加载速度很棒,echarts图形主要是使用html5的新特性的做的,使用到了canvas画板等。下面是我自己实现的一些过程和经验,供大家参考。

 

里面有详细的使用流程和例子,只要是稍微懂一些javascript就能看懂。

第一步:

echarts的插件: 在项目中导入一下俩个文件

1 esl.js

2 echarts-original.js

3 jquery-1.9.1.min.js jQuery压缩文件

第二步:

定义一个div容器,用来盛放echarts的图形,必须定义一个id。如下:

 

 

 

 

第三步:

配置相关图形的属性,加载图形到容器中,启动图形。

详细代码如下:

 




<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}
关系值:{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>
 

其效果图入下:

 

\

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<