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个相应插件,有些会比较复 ...
随机推荐
- struts2--笔记（一）
1.什么是struts2? 框架是一些已经写好的代码,一般情况下于产品是无关的,可以提高效率. 2.javaEE的三层结构:表现层.业务层.持久层组成,struts是变现层的一个框架结构,分成结构的方 ...
- AES 加密解密
package XX.XX.XX.test; import java.io.IOException; import java.io.UnsupportedEncodingException; impo ...
- SpringBoot application.yml logback.xml,多环境配置,支持 java -jar --spring.profiles.active(转)
趁今天有时间整理了一下 启动命令为 //开发环境 java -jar app.jar --spring.profiles.active=dev--server.port=8060 //测试环境 jav ...
- VSX(翻译)Moving Code Blocks Among Code Regions using VS 2010 Extensions
Moving Code Blocks Among Code Regions using VS 2010 Extensions (翻译)使用VS 2010 扩展性将代码块移至Region区域中 Down ...
- Android 利用an框架快速实现网络请求（含下载上传文件）
作者:Bgwan链接:https://zhuanlan.zhihu.com/p/22573081来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. an框架的网络框架是完全 ...
- Swift3.0 功能二 (表情键盘与图文混排)
随着iOS越来越多表情键盘以及图文混排的需求,本文运用Swift3.0系统的实现其功能以及封装调用方法,写的不好,如有错误望各位提出宝贵意见,多谢 项目源码地址: 相关知识点都有标识 项目源码地址 废 ...
- js进阶 12-4 jquery键盘事件如何使用
js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...
- JSP自己定义标签
JSP自己定义标签 API文档: http://docs.oracle.com/javaee/7/api/ watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ ...
- 正确使用pthread_create，防止内存泄漏
近日,听说pthread_create会造成内存泄漏,觉得不可思议,因此对posix(nptl)的线程创建和销毁进行了分析. 分析结果:如果使用不当,确实会造成内存泄漏. 产生根源:pthread ...
- ccpc2016长春站打铁记(后记)
Day3 "学术交流日" 自己进我的空间看吧. http://user.qzone.qq.com/190741511/4