<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <meta charset="utf-8">

    <title>echars关系图</title>

    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.min.js"></script>

    <style>

        body, html, #main {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="main">

    </div>

    <script>

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        var option = {

            tooltip: {

                show: false

            },

            animationDurationUpdate: 1500,

            animationEasingUpdate: 'quinticInOut',

            series: [{

                type: 'graph',

                layout: 'none',

                symbol: 'roundRect',

                symbolSize: [120, 50],

                symbolOffset: ['15%', 0],

                roam: false, //禁止用鼠标滚轮缩小放大效果

                edgeSymbol: ['circle', 'arrow'],

                edgeSymbolSize: [4, 15],

                //focusNodeAdjacency: true,

                // 连接线上的文字

                edgeLabel: {

                    normal: {

                        show: false,

                        textStyle: {

                            fontSize: 15

                        }

                    }

                },

                lineStyle: {

                    normal: {

                        opacity: 1,

                        width: 2,

                        curveness: 0,//线条的曲度

                    }

                },

                itemStyle: {

                    normal: {

                        color: "#2d8cf0"

                    }

                },

                // 圆圈内的文字

                label: {

                    normal: {

                        show: true,

                        textStyle: {

                            color: "#fff",

                            fontSize: 14,

                        }

                    }

                },

                data: [{

                    name: '节点1',

                    x: 100,

                    y: 25,

                }, {

                    name: '节点2',

                    x: 100,

                    y: 50,

                }

                ],

                // links: [],

                links: [{

                    source: '节点1',

                    target: '节点2',

                }]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

　　　　//单击事件 处理

        myChart.on('click', function (params) {

            if (params.dataType === "node") {

            }

        });

　　　　

　　　　

　　　　　//窗口大小改变 关系图重置大小

        window.onresize = myChart.resize;

    </script>

</body>

</html>

echars关系图的更多相关文章

  1. Ambari服务依赖关系图生成脚本

    1. 生成服务依赖关系 #!/usr/bin/python import sys import commands import json def genDependString(ip): url=&q ...

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

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

  3. (转)整体把握jQuery -jQuery 的原型关系图

    整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...

  4. 使用MySQL Workbench导出MySQL数据库关系图

    1. 点击MySQL Workbench中间Data Modeling下的Create EER Model From Existing Database: 2. 在Stored Connection中 ...

  5. tcp/ip协议栈调用关系图

    最近阅读了tcp/ip详解卷2,总结一下整个发送过程和接收过程 sendmsg \/ sendit \/ sosend(这一步将数据从用户空间拷贝到内核空间,并且会在这一步判断发送缓存空间是否充足,是 ...

  6. [CareerCup] 15.6 Entity Relationship Diagram 实体关系图

    15.6 Draw an entity-relationship diagram for a database with companies, people, and professionals (p ...

  7. jQuery 的原型关系图，整体把握jQuery

            若干个月前,在博客园中看到一篇文章,内容很简单,就是一幅图,展示的是 jQuery 中各对象之间的关系,当时就觉得,这就是我想要的最直观的总结 jQuery 的方式.在那篇文章中,也有 ...

  8. IDEA的查询引用、调用关系图的功能

    Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员变量的调用树(caller和callee两个方向),非常方便. 在IDEA中类似功能被划分到了三个命 ...

  9. c语言分析函数调用关系图(call graph)的几种方法

    一.基于 Doxygen或 lxr 的API形式的文档系统. 二.基于CodeViz, CodeViz是<Understanding The Linux Virtual Memory Manag ...

随机推荐

  1. 使用Charles抓取APP之HTTPS请求

    Charles是一款非常好用的抓包工具,通常使用它来进行APP开发抓包调试,尤其是HTTPS请求. 一.安装Charles 去官网(https://www.charlesproxy.com/)下载软件 ...

  2. log4j学习总结

    一直使用log4j来记录日志,但是一直以来没有深入研究过log4j,最近研究了下log4j,下面总结一下: log4j配置: 1. 配置根Logger,其语法为: log4j.rootLogger = ...

  3. .NET内存管理、垃圾回收

    1. Stack和Heap    每个线程对应一个stack,线程创建的时候CLR为其创建这个stack,stack主要作用是记录函数的执行情况.值类型变量(函数的参数.局部变量 等非成员变量)都分配 ...

  4. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（二十五）：Spring Security 版本

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 到目前为止,我们使用的权限认证框架是 Shiro,虽然 Shiro ...

  5. SpringBoot集成Mybatis(0配置注解版)

    Mybatis初期使用比较麻烦,需要各种配置文件.实体类.dao层映射关联.还有一大推其它配置.当然Mybatis也发现了这种弊端,初期开发了generator可以根据表结构自动生成实体类.配置文件和 ...

  6. Linux下搭建DNS缓存服务器

    CentOS 6.10搭建本地DNS缓存服务器系统环境 1 [root@test ~]# cat /etc/redhat-release 2 CentOS release 6.10 (Final) 3 ...

  7. 深入学习使用ocr算法识别图片中文字的方法

    公司有个需求,简单点说需要从一张图片中识别出中文,通过python来实现,当然其他程序也行,只要能实现,而小编主要学习python,所以就提了python.一个小白在网上遨游了一天,终于找到一丝丝思绪 ...

  8. JavaWeb学习 (六)————Servlet(二)

    一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...

  9. Web Service 与WebAPI 的区别

    Web Servise: web service 是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作系统平台,就是说服务器端程序采用Java编写,客户端程序则可以采用其他编程语言 ...

  10. ECharts图表实战经验1：如何设置图表同序列不同数据点的独立颜色值

    最近有不少朋友在追问这样一个问题:我单序列的柱状图,我想让每一个根柱子的颜色都不一样,应该如何做? 针对这个问题,其实我只想说你压根没有认真看完或者查找ECharts官方的示例,官方能够找到的示例有: ...