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个相应插件,有些会比较复 ...
随机推荐
- window.print()打印网页（一）
有时候需要将网页内容打印到纸上,最简单的一种方法是用window对象的print方法. window.print()默认打印当前网页的所有部分.(除了背景,默认打印都是白底黑字,如果有特别的设置 要另 ...
- autohotkey excel getfullname (ComObjActive)
- thinkphp3.1课程 1-1 为什么thinkphp在开发好后需要关掉开发模式
thinkphp3.1课程 1-1 为什么thinkphp在开发好后需要关掉开发模式 一.总结 一句话总结:因为调试模式中会记录你所有的调试信息,比如a调用b,b调用c,c调用d,比如你从哪个数据库取 ...
- 【Codeforces Round #185 (Div. 2) B】Archer
[链接] 链接 [题意] 在这里输入题意 [题解] 概率水题. 枚举它是第几轮成功的. 直到满足精度就好 [错的次数] 1 [反思] long double最让人安心. [代码] #include & ...
- [CSS] Control Image Aspect Ratio Using CSS
Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new ...
- Python IDLE如何清屏
金gordon 原文 IDLE如何清屏 在学习和使用python的过程中,少不了要与Python IDLE打交道.但使用 Python IDLE 都会遇到一个常见而又懊恼的问题——要怎么清屏? 答案是 ...
- php模拟post提交文件图片等
<?php /** * Email net.webjoy@gmail.com * author jackluo * 2014.11.21 * */ //* function curl_post( ...
- windows phone8.1：页面导航详解
小梦给大家带来windows phone 8.1应用开发实战教程,分享自己学习,开发过程中的经验和技巧. 今天给大家分享windows phone 8.1页面导航相关知识.涉及知识点如下: 页面一导航 ...
- svn: E200033: database is locked解决办法
svn执行update,却被告知database is locked! 执行 svn update,却抛出个错误警报: svn: E200033: database is locked, execut ...
- Ubuntu snmp配置
http://wenku.baidu.com/link?url=7ieAta_w87NDrTOT_DyEQSj4Rd9i82YRUGQl--g077oC3ftckgH7wpT5QEyir-NtZLA3 ...