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。如下：

第三步：

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

详细代码如下：

<!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>

其效果图入下：