数据嵌入js的关系图
参照echarts官网，改了一下效果图：
数据放在了js里。
代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="echarts.min.js"></script>
<script src="dataTool.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
myChart.hideLoading();
categories=[
{
"name": "人物",
"keyword": {},
"base": "HTMLElement"
},
{
"name": "机构",
"keyword": {},
"base": "WebGLRenderingContext"
},
{
"name": "行为",
"keyword": {},
"base": "SVGElement"
},
{
"name": "地点",
"keyword": {},
"base": "CSSRule"
},
{
"name": "主题",
"keyword": {}
}
],
nodes=[
<%for(int i=;i<;i++){%>
{
name: "马<%=i%>",
value: ,
category: ,
symbolSize:,
},
{
name: "刘<%=i%>",
value: ,
category:
},
{
name: "是<%=i%>",
value: ,
category: ,
},
{
name: "我<%=i%>",
value: ,
category:
},
<%}%>
],
links=[
<%for(int i=;i<;i++){%>
{
source: <%=i%>,
target: <%=i+%>
},
{
source:<%=i%>,
target: <%=i*%>
},
{
source:<%=i+%>,
target: <%=i-%>
},
<%}%>
],
option = {
/* color: ['#fc853e','#28cad8','#9564bf','#bd407e','#e5a214'], 用来改点的颜色*/
legend: {
data: ['人物', '机构', '行为', '地点', '主题']
},
series: [{
type: 'graph',
layout: 'force',
roam: true, //实现缩放
animation: false,
label: {
normal: {
position: 'right',
formatter: '{b}'
}
},
draggable: true,
data: nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: categories,
force: {
// initLayout: 'circular'
// repulsion: 20,
edgeLength: ,
repulsion: ,
gravity: 0.2
},
edges: links
}]
}; myChart.setOption(option);
myChart.on('click', function (params) {
var data=params.value
//点没有source属性
if(data.source==undefined){
nodeName=params.name
window.open("NewFile1.jsp?a=mjh")
} });
if (option && typeof option === "object") {
myChart.setOption(option, true);
} </script>
</body>
</html>
数据嵌入js的关系图的更多相关文章
- iOS -转载-使用Navicat查看数据表的ER关系图
Navicat软件真是一个好东西.今天需要分析一个数据库,然后想看看各个表之间的关系,所以需要查看表与表之间的关系图,专业术语叫做ER关系图. 默认情况下,Navicat显示的界面是这样的: 软件将表 ...
- mysql利用MySQLWorkbench生成数据表之间的关系图
先看结果,默认是展开的,我手动把表折叠了 那么如何实现呢 先点击这里 然后通过向导来创建即可,一直到finish就行了
- java+数据库+D3.js 实时查询人物关系图
先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...
- 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图
机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...
- 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛
前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...
- Echarts数据可视化series-graph关系图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id 3. ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
随机推荐
- 过滤器（Filter）对登陆页面进行过滤验证
import javax.servlet.*;import javax.servlet.annotation.WebFilter;import javax.servlet.http.HttpServl ...
- PHP 日期之间所有日期
/** * 获取起止日期之间所有日期 * @param $sdate * @param $edate * @return array */ function get_dates($sdate, $ed ...
- Oracle VirtualBox安装CentOS 8
1.下载CentOS CentOS下载地址: https://wiki.centos.org/Download 这里以CentOS8为例 选择一个比较快的地址,这里以jdcloud mirror为例 ...
- SAP GUI Security notice
出现错误提示: Failed to load administrator rule file.Check your Installation. 原因: 电脑缺少MS XML4.0,导致SAP客户端无法 ...
- 小白到大神，你需要了解的 sqlite 最佳实践
本文微信公众号「AndroidTraveler」首发. 背景 本文是对一篇英文文档的翻译,原文请见文末链接. 并发数据库访问 假设你实现了自己的 SQLiteOpenHelper. public cl ...
- 数据库死锁的问题，Deadlock found when trying to get lock; try restarting transaction at Query.formatError
场景: 应用刚上线排除大批量请求的问题 线上多次出现的Deadlock found when trying to get lock错误 代码: async batchUpdate(skus, { tr ...
- 池化技术（二）HikariCP是如何管理数据库连接的？
基于依赖程序的版本信息:HikariCP:3.3.1 驱动程序mysql-connector-java:8.0.17 上一篇:Druid是如何管理数据库连接的 零.类图和流 ...
- MyBatis的ResultMapping和ResultMap
MyBatis的ResultMapping和ResultMap Effective java 第3版中描述的Builder模式 Java设计模式14:建造者模式 2个类都使用了Builder来构建对象 ...
- java之程序流程控制
顺序结构:代码由上至下依次执行: 分支结构: if () { } else{ } if () { } else if () { } else { } switch(常量){ case 常量: 语句; ...
- SpringBoot2.0 整合 JWT 框架，解决Token跨域验证问题
本文源码:GitHub·点这里 || GitEE·点这里 一.传统Session认证 1.认证过程 1.用户向服务器发送用户名和密码. 2.服务器验证后在当前对话(session)保存相关数据. 3. ...