zoukankan      html  css  js  c++  java
  • javascript相框echarts插件实现酷立方效果图的人

    最近由于项目需求,我们需要做的一类似网络效应的人立方效果,很多文件中的查询之后。百度发现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>
    

    其效果图入下:




    版权声明:本文博主原创文章,博客,未经同意不得转载。

  • 相关阅读:
    Python元组、列表、字典
    测试通过Word直接发布博文
    Python环境搭建(windows)
    hdu 4003 Find Metal Mineral 树形DP
    poj 1986 Distance Queries LCA
    poj 1470 Closest Common Ancestors LCA
    poj 1330 Nearest Common Ancestors LCA
    hdu 3046 Pleasant sheep and big big wolf 最小割
    poj 3281 Dining 最大流
    zoj 2760 How Many Shortest Path 最大流
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4837306.html
Copyright © 2011-2022 走看看