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>
其效果图入下：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmVuZ3NoaXp0eQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
版权声明：本文博主原创文章，博客，未经同意不得转载。
javascript相框echarts插件实现酷立方效果图的人的更多相关文章
- ECharts插件的使用
ECharts插件:官网下载echarts.js开发者可以选择源码.下载地址:http://echarts.baidu.com/download.html 下载之后,echarts.js放在js文件夹 ...
- 项目中使用ECharts插件实现统计功能
一.前端界面 // 界面中定义一个div,放图表 <div id="box" style="width: 600px;height:400px;padding: 1 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
- Sortable – 简单灵活的 JavaScript 拖放排序插件
当需要在网站中添加拖放排序功能的时候,jQuery UI 的排序组件可能是最流行的解决方案.今天给大家介绍另一款简单灵活的 JavaScript 拖放排序插件——Sortable,它使用 HTML5 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- [转]7个高性能JavaScript代码高亮插件
对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高 ...
- angular引用echarts插件
方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...
- 2017年最新20个轻量的 JavaScript 库和插件
下面这个列表中的免费 JavaScript 插件都是今年发布的,没有臃肿的一体化的框架,它们提供轻量级的解决方案,帮助 Web 开发过程更容易和更快.提供的插件可以创建滑块.响应式菜单.模态窗口.相册 ...
- 11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
随机推荐
- ZOJ 2850和ZOJ 1414
下午上数据结构,结果竟然没有新题.T T果断上OJ来水一发 ZOJ 2850 Beautiful Meadow 传送门http://acm.zju.edu.cn/onlinejudge/showP ...
- 自己定义Dialog的具体步骤（实现自己定义样式一般原理）
转载请标注转载http://blog.csdn.net/oqihaogongyuan/article/details/50958659 自己定义Dialog的具体步骤(实现自己定义样式一般原理) ...
- IOS使用AsyncSocket进行Socket通信
首先导入CFNetwork.framework框架 1.下载ASyncSocket库源码 2.把ASyncSocket库源码加入项目 3.在项目增加CFNetwork框架 使用AsyncSocket开 ...
- Apache多虚拟主机多版本PHP（5.3+5.6+N）共存运行配置全过程
摘要: 为需要实现在同一台Linux服务器上面,同时运行多个不同版本的PHP程序,本文我们将使用FastCGI方式加载,并把过程详细记录下来方便大家参考. 常规的PHP配置方式有很多种,例如CGI.f ...
- php对象和数组的相互转换（还是可以去找没有没php的高阶课程看看看）（要不别人分析一下重点要点，要不自己来，不然 效果真的不好）
php对象和数组的相互转换(还是可以去找没有没php的高阶课程看看看)(要不别人分析一下重点要点,要不自己来,不然 效果真的不好) 一.总结 都是自己实现的函数 算法: 1.先判断类型,gettype ...
- percona-toolkit源码编译安装
安装依赖软件yum install perl-ExtUtils-CBuilder perl-ExtUtils-MakeMakeryum install perl-Time-HiRes perl-DB ...
- stm32的复用与映射
摘自:https://blog.csdn.net/lincheng15/article/details/51789093 摘自:http://www.51hei.com/bbs/dpj-36242-1 ...
- JS-OO-数据属性，访问器属性
一.数据属性 Configurable:表示能否通过Delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问器属性.默认true. Enumerable:表示能否通过for-in ...
- ArcEngine由点生成TIN
这两天替别人写一个三维校园的展示程序.用的是SceneControl二次开发. 须要利用DOM和TIN构建三维地形.如今说下依据高程点生成TIN的过程: (1)依据高程点文件(Excel)生成点sha ...
- 贝叶斯统计（Bayesian statistics） vs 频率统计（Frequentist statistics）：marginal likelihood（边缘似然）
1. Bayesian statistics 一组独立同分布的数据集 X=(x1,-,xn)(xi∼p(xi|θ)),参数 θ 同时也是被另外分布定义的随机变量 θ∼p(θ|α),此时: p(X|α) ...