参照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的关系图的更多相关文章

  1. iOS -转载-使用Navicat查看数据表的ER关系图

    Navicat软件真是一个好东西.今天需要分析一个数据库,然后想看看各个表之间的关系,所以需要查看表与表之间的关系图,专业术语叫做ER关系图. 默认情况下,Navicat显示的界面是这样的: 软件将表 ...

  2. mysql利用MySQLWorkbench生成数据表之间的关系图

    先看结果,默认是展开的,我手动把表折叠了 那么如何实现呢 先点击这里 然后通过向导来创建即可,一直到finish就行了

  3. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  4. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

  5. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  6. Echarts数据可视化series-graph关系图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  8. Echarts3 关系图-力导向布局图

    因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

  9. Echarts关系图-力引导布局

    需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...

随机推荐

  1. jQuery随笔记录

            DOM遍历 parent()方法返回所选元素的直接父元素.(parent() 只能遍历单个级别的 DOM树) parents()方法获取所选元素的所有祖先 children()所选元素 ...

  2. 【js】canvas——Atomic-particle-motion

    原子粒动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. tomcat启停脚本

    脚本存放目录 /etc/init.d/ #!/bin/bash # description: Tomcat8 Start Stop Restart # processname: tomcat8 # c ...

  4. Java+TestNG+Maven+Excel+IDEA接口自动化入门（一）环境配置

    前置: 1.本机环境安装了maven并配置环境变量 2.本机环境安装了IDEA软件 3.本机环境安装了Java jdk 8版本 4.有一定java和maven基础 因为以上网上例子很多,就不再重复赘述 ...

  5. 关于ssh的几个功能

    这个有许多介绍的. 通过ssh可以实现远程shell命令行登录,x window登录,端口转发,scp文件复制,本地与远程命令间的管道连接,sftp文件传输与管理,包括同步,以及rsync文件同步,还 ...

  6. Vant-Weap通过事件获取值

    van-field框的使用 和通过事件获取值 <van-cell-group> <van-field value="{{username}}" label=&qu ...

  7. [C]表达式结合规律和运算符优先级

    表达式结合规律 如果运算符具有相同的优先级(precedence)有些表达式的结合方式是从左往右,有些则是从右往左结合的(例如赋值运算符): 表达式 结合律 组合方式 a/b%c 从左往右 (a/b) ...

  8. mysqlbinlog-Note

    binlog_format = mixedlog-bin = /data/mysql/mysql-binexpire_logs_days = 7 #binlog过期清理时间max_binlog_siz ...

  9. hibernate opensission.createSQLquery 问题

    在进行分页查询的时候,通常会用到,页码,每页容量等等的参数进行操作,如下图: query.list()的时候会执行得到所需要的集合的值,在这个过程中, 如果使用自定义的返回参数,比如将日期做一些基本处 ...

  10. go语言的json

    简介 json 中提供的处理 json 的标准包是 encoding/json,主要使用的是以下两个方法: // 序列化 func Marshal(v interface{}) ([]byte, er ...