数据嵌入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力导向图实现节点可折叠. 这里 ...
随机推荐
- springboot使用hibernate validator
前言 在开发中经常需要写一些字段校验的代码,比如字段非空,字段长度限制,邮箱格式验证等等,写这些与业务逻辑关系不大的代码个人感觉有两个麻烦: 验证代码繁琐,重复劳动 方法内代码显得冗长 每次要看哪些参 ...
- 遇见手绘花卉小清新简约通用PPT模板推荐
模版来源:http://ppt.dede58.com/jiaoxuekejian/26484.html
- 4.Ansible Task控制
1.tag标签(调试) --skip-tags install_nfs 跳过此标签 -t 指定标签名 [root@manager tasks]# cat task_nfs.yml - hosts: w ...
- JS---DOM---点击操作---part2---14个案例
案例1:点击按钮禁用文本框 <input type="button" value="禁用文本框" id="btn" /> < ...
- iOS正则表达式解决实际问题
问题:上海市徐汇区桂林路158号1202室 字符串长度不固定,数字长度也不固定.截取第二组数字. 方法一:[正则表达式] NSString * str = @"上海市徐汇区桂林路158号12 ...
- Android五大布局详解——FrameLayout（帧布局）
FrameLayout 这个布局相对前面两节介绍的布局就简单了很多,因此它的应用场景也就特别的少.这种布局没有方便的定位方式,所有的控件都会默认摆放在布局的左上角.新建UILayoutTestThre ...
- 12C新功能：在线移动分区 (Doc ID 1584032.1)
12C New Feature: Online Move Partition (Doc ID 1584032.1) APPLIES TO: Oracle Database - Enterprise E ...
- day100_12_4DataFrame和matplotlib模块
一.Dataframe的分组. 再网页表格数据 的分析中,可以使用以下语句进行爬取表格. res = pd.read_html('https://baike.baidu.com/item/NBA%E6 ...
- Java之Map接口（双列集合）
Map集合概述 现实生活中,我们常会看到这样的一种集合:IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种一一对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种对象关系的对 ...
- vue--过滤与动画
什么是过渡和动画 元素在显示和隐藏时,实现过渡或者动画的效果,常用的过滤和动画都是使用CSS来实现的. 在CSS中操作transition(过渡)或 animation(动画)达到不同效果 为目标元素 ...