数据嵌入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力导向图实现节点可折叠. 这里 ...
随机推荐
- AssemblyBuilder以及Activator双剑合璧
AssemblyBuilder和Activator两个类是DispatchProxy类实现动态代理以及AOP的根本,示例demo可参考 DispatchProxy实现动态代理及AOP .Assembl ...
- 易优CMS：switch的基础用法
[基础用法] 名称:switch 功能:简单条件判断,比if判断标签少些不等于相同功能,视个人习惯而用. 语法: {eyou:switch name='$eyou.field.has_children ...
- vue-better-scroll实现移动端下拉加载组件
1.下载安装better-scroll npm i -S better-scroll 1.1安装完成之后,打开pacaage.json文件查看,是否有(better-scroll) "dep ...
- JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范
文档下载地址:JT/T 808-2013 道路运输车辆卫星定位系统北斗兼容车载终端通讯协议技术规范
- SAP FI 问题汇总
记录工作中遇到的问题汇总 1.固定资产折旧码的设置 2.与资产有关的日期 3.如何添加固定资产分类
- C编程小结1
1. ‘\0’表示字符串结束符 2. 变量之间互相赋值一定要考虑他们的数据类型,要强制转换匹配上了或者进行一些处理才能赋值,同时读程序的时候也要注意这一点,否则可能看不懂.如: sData[0]=wD ...
- 如何从 ASH 找到消耗 PGA 和 临时表空间 较多的 Top SQL_ID (Doc ID 2610646.1)
如何从 ASH 找到消耗 PGA 和 临时表空间 较多的 Top SQL_ID (Doc ID 2610646.1) 适用于: Oracle Database - Enterprise Edition ...
- unittest---unittest中verbosity参数设置
我们在做自动化测试的时候,有时候想要很清楚的看到每条用例执行的详细信息,我们可以通过unittest中verbosity参数进行设置 verbosity参数设置 verbosity表示在只执行用例的过 ...
- Java连载57-equals重写、finalize方法、hashCode方法
一.关于java语言中如何比较两个字符串是否一致 1.不能使用双等号来比较两个字符串是否相等,应该使用equals方法进行比较,如例子 package com.bjpowernode.java_lea ...
- error: (-210:Unsupported format or combination of formats) [Start]FindContours supports only CV_8UC1 images when mode != CV_RETR_FLOODFILL otherwise supports CV_32SC1 images only in
问题: error: (-210:Unsupported format or combination of formats) [Start]FindContours supports only CV_ ...