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个相应插件,有些会比较复 ...
随机推荐
- 总览：SpringCloud基础结构
客户端: 1.连接 配置中心2.连接 服务中心3.连接 链路跟踪3.feign调用4.熔断机制5.连接 熔断监控6.swagger2 生成的RESTful-API7.消息总线-rabbitMQ实现 基 ...
- android请求
//请求 HttpURLConnection conn = (HttpURLConnection)new URL(path).openConnection(); conn.setConnecTimeo ...
- squeeze() 函数——MATLAB
B=squeeze(A) 移除张量A的单一维,即返回和矩阵A元素相同,但所有单一维都移除的矩阵B,单一维是满足size(A,dim)=1的维. squeeze命令对二维数组是不起作用的; 如果A是一行 ...
- 使用ToolRunner运行Hadoop程序基本原理分析 分类： A1_HADOOP 2014-08-22 11:03 3462人阅读 评论(1) 收藏
为了简化命令行方式运行作业,Hadoop自带了一些辅助类.GenericOptionsParser是一个类,用来解释常用的Hadoop命令行选项,并根据需要,为Configuration对象设置相应的 ...
- 搭建基于java环境
.net项目架构改造之搭建基于java环境配置一览[上] 最近公司做了一个项目,需要嵌套在千牛的客户端上,项目代码必须上阿里的聚石塔,全程采用基于docker的自动化部署,我们的项目是基于.net ...
- 在windows下远程访问linux服务器
在网络性能.安全性.可管理性上,Linux有着其他系统无法比拟的强大优势,而服务器对这些方面要求特别高,因此Linux常常被用来做服务器使用.而当我们需要维护linux服务器的时候,就需要远程访问li ...
- 浅谈struts2的国际化----i18n
可能大家在使用struts框架的时候,偶尔会看到这个词: i18n.也就是 Internationalization i 开头,n 结尾. 总共18个字母,今天的主要内容就是环绕这 四个字母. ...
- 为什么说 C/C++ 不适合做 Web 开发？（成本高，容易出错，apache等工具分担了大部分工作）
因为大家在讨论用C#.Java,做出来的项目的时候,用C++的人们还在讨论语言特性 每种语言都有特定适用范围,对应着某类问题.web开发的重头戏不是计算,而是与用户交互和发送sql语句,当然以脚本语言 ...
- 小强的HTML5移动开发之路（52）——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧 ...
- 编辑器vim简介
vi简介 vi是"Visual interface"的简称,它在Linux上的地位就仿佛Edit程序在DOS上一样.它可以执行输出.删除.查找.替换.块操作等众多文本操作,而且用户 ...