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>

其效果图入下：

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

jQuery插件：超酷的多列网格式拖放插件gridster.js
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 在线演示本地下载以往的文章中,我们分享了很多jQuery相关拖放插件,今天 ...
html文字变成汉堡插件,一组超酷汉堡包图标变形动画特效
Hamburgers是一款效果超酷的汉堡包图标变形动画特效CSS3动画库.这组汉堡包图标动画包括18种不同的汉堡包变形动画效果,你还可以通过Sass文件来自定义你自己的汉堡包图标变形动画. 安装你可 ...
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
在线演示本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打 ...
13个可实现超棒数据可视化效果的Javascript框架
随着商业及其相关需求的发展,数据成为越来越重要的元素之一,为了更加直观和明显的展示商业潜在的趋势和内在的特性,我们需要使用图表和图形的方式来直观动态的展示数据内在秘密,在今天的这篇文章中我们推荐12款 ...
java全景图片生成_[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果...
[Java教程]使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果 0 2015-07-23 18:00:14 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们 ...
Javascript教程：AngularJS的五个超酷特性
日期:2012-7-17 来源:GBin1.com AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单 ...
分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
日期:2012/03/08 在线演示本地下载今天分享一个帮助你添加图片悬浮特效的jQuery插件 - Adipoli,这个插件可以帮助你添加各种不同的悬浮特效到你指定的图片上,特别适合制作你的相 ...
帮助你高效开发Ajax应用的超酷jQuery插件 - AjaxML
日期:2012-4-20 来源:GBin1.com 如果你使用jQuery进行Ajax开发的话,你一定要试试今天我们这里介绍的这一款jQuery插件 - AjaxML.它是一款能够帮助你提高ajax ...
使用jQuery插件realshadow实现超酷真实阴影效果
为什么80%的码农都做不了架构师?>>> 日期:2012-5-4 来源:GBin1.com 在线演示本地下载大家有没有尝试使用纯CSS和Javascript来生成带有颜 ...
分类图片展示php源码,HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)...
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我 ...

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

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

最新文章

热门文章