参照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. React 基础笔记

    概览 React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript库.可以将一些简短.独立的代码片段组合成复杂的UI界面,这些片段被称为"组件". React 大 ...

  2. English:Day-to-day 1015

    device session stroll pants & trousers gist deep depth diameter D radius R merge ..

  3. LeetCode刷题191122

    博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. ...

  4. MySQL——my.cnf参数设置说明

    以下为个人总结的MySQL配置文件参数说明,如有错误,烦请大佬们留言指正,本人将第一时间修改.2019-12-10 12:32:08 [mysqld] server- # Mysql唯一标识,一个集群 ...

  5. centos安装jdk10

    下载一个jdk10文件到linux : wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=ac ...

  6. 磕磕绊绊中，使用Git工具完成代码上传

    1.安装Git工具 1)下载并安装Git工具:Git下载地址 安装完成之后,在桌面空白处点击右键,会出现以下选项: 2.初始化环境 1) 在一文件夹中,点击右键,选择上图中的Git Bash Here ...

  7. IT兄弟连 HTML5教程 HTML5表单 H5表单提交综合实例

    这里我们创建一个填写个人基本信息的表单,使用了表单元素有<input>输入框.<datalist>选项列表.<textarea>文本框,通用的表单输入类型有text ...

  8. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  9. 用深度学习做命名实体识别(二)：文本标注工具brat

    本篇文章,将带你一步步的安装文本标注工具brat. brat是一个文本标注工具,可以标注实体,事件.关系.属性等,只支持在linux下安装,其使用需要webserver,官方给出的教程使用的是Apac ...

  10. Vue 从入门到进阶之路（十一）

    之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...