<!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. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

  2. Xamarin.Android 调用原生的Jar包

    我们有时候会从Android原生开发(Java)转移到Xamarin.Android开发时,需要将过去写好的Android Class Library直接嵌入到Xamarin.Android底下使用, ...

  3. 一些oracle的经验

    注:再写存储过程的时候,在for循环里要写begin和end,这样就可以写exception ,让这条错误数据回滚,然后记录错误日志,commit 关键字: oracle 存储过程 1.基本结构 CR ...

  4. ACM学习大纲

    1 推荐题库 •http://ace.delos.com/usaco/ 美国的OI 题库,如果是刚入门的新手,可以尝试先把它刷通,能够学到几乎全部的基础算法极其优化,全部的题解及标程还有题目翻译可以b ...

  5. 深入学习sequoiadb巨杉数据库及python连接方式

    随着公司日益复杂与多变的需求,以及迅速扩展带来的海量数据业务,我们需要在提供高效服务的同时,降低其设备与程序维护成本.算了,不吹了,说白了就是需要从巨杉数据库中抓取大量的数据,但是我现在不会,所以需要 ...

  6. 配置IIS的负载均衡

    在大型Web应用系统中,由于请求的数据量过大以及并发的因素,导致Web系统会出现宕机的现象,解决这一类问题的方法我个人觉得主要在以下几个方面: 1.IIS 负载均衡. 2.数据库 负载均衡. 3.系统 ...

  7. 详细的最新版fastdfs单机版搭建

    前言 目前项目是tomcat单机部署的,图片.视频也是上传到tomcat目录下,关键是此项目的主要内容还就是针对图片.视频的,这让我非常担忧:文件服务器的应用是必然的,而且时间还不会太久.之前一直有听 ...

  8. #1 初识Python

    前言 要说现在最时髦的编程语言是什么,那么一定是Python无疑了.让我们来一起来领略其风采吧! 一.Python介绍 Python的创始人为吉多·范罗苏姆(Guido van Rossum),被大家 ...

  9. SpringBoot入门之集成Druid

    Druid:为监控而生的数据库连接池.这篇先了解下它的简单使用,下篇尝试用它做多数据源配置.主要参考:https://github.com/alibaba/druid/wiki/常见问题 https: ...

  10. QT中全局变量的定义

    多的就不说了,本来就是一个简单地内容,只是不会的话会很头疼 我们首先新建两个文件,文件名可以自定义,我们在这里定义为variate.h 和 variate.cpp 当然了,后缀是不能变的. 和函数一样 ...