参照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. JS基础语法---String（字符串的案例）

    练习1: var str = "我的宝宝最可爱,声音嗲嗲的"; var key = "可爱"; //先获取要截取的字符串的索引位置 var index = st ...

  2. (办公)记事本_Linux的In命令

    参考菜鸟教程Linux:https://www.runoob.com/linux/linux-comm-ln.html linux的ln命令. Linux ln命令是一个非常重要命令,它的功能是为某一 ...

  3. 新手学Html之JSP基础语法——入门（二）

    JSP基础语法 JSP注释 comment.jsp <%@ page language="java" contentType="text/html; charset ...

  4. VS2017初学者如何打开右侧的解决方案资源管理器

  5. 12. java ArrayList类

    一.ArrayList定义 ​ java.util.ArrayList是大小可变的数组的实现,存储在内的数据成为元素.此类提供一些方法来操作内部存储的元素.ArrayList中可不断添加元素,其大小也 ...

  6. [译]Vulkan教程(28)Image视图和采样器

    [译]Vulkan教程(28)Image视图和采样器 Image view and sampler - Image视图和采样器 In this chapter we're going to creat ...

  7. [译]Vulkan教程(04)基础代码

    [译]Vulkan教程(04)基础代码 General structure 通用结构 In the previous chapter you've created a Vulkan project w ...

  8. Java连载55-Mail编程

    一.电子邮件的历史 1.起源: 1969 Lenoard K. 教授发给同事的“LO” 1971 美国国防部自主的阿帕网(Arpanet)的通讯机制 通讯地址里用@ 1987年中国的第一份电子邮件 “ ...

  9. Redis分布式缓存实现

    基于redis分布式缓存实现 第一:Redis是什么? Redis是基于内存.可持久化的日志型.Key-Value数据库高性能存储系统,并提供多种语言的API. 第二:出现背景 数据结构(Data S ...

  10. 分享Java程序员50多道热门的多线程和并发面试题（答案解析）

    下面是Java程序员相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器 ...