关系图：

代码：

 <!DOCTYPE html>

 <head>

     <meta charset="utf-8">

     <script type="text/javascript" src="js/echarts.js"></script>

     <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

     <script type="text/javascript" src="js/dataTool.js"></script>

 </head>

 <body style="height: 600px; margin: 0">

 <div id="container" style="height: 100%"></div>

 <script type="text/javascript">

     var dom = document.getElementById("container");

     var myChart = echarts.init(dom);

     var app = {};

     option = null;

     myChart.showLoading();

     $.get('data/les-miserables.gexf', function (xml) {

         myChart.hideLoading();

         var graph = echarts.dataTool.gexf.parse(xml);

         var categories = [];

         for (var i = 0; i < 9; i++) {

             categories[i] = {

                 name: '类目' + i

             };

         }

         graph.nodes.forEach(function (node) {

             node.itemStyle = null;

             node.value = node.symbolSize;

             node.symbolSize /= 1.5;

             node.label = {

                 normal: {

                     show: node.symbolSize > 30

                 }

             };

             node.category = node.attributes.modularity_class;

         });

         option = {

             title: {

                 text: 'Les Miserables',

                 subtext: 'Default layout',

                 top: 'bottom',

                 left: 'right'

             },

             tooltip: {},

             legend: [{

                 // selectedMode: 'single',

                 data: categories.map(function (a) {

                     return a.name;

                 })

             }],

             animationDuration: 1500,

             animationEasingUpdate: 'quinticInOut',

             series : [

                 {

                     name: 'Les Miserables',

                     type: 'graph',

                     layout: 'none',

                     data: graph.nodes,

                     links: graph.links,

                     categories: categories,

                     roam: true,

                     focusNodeAdjacency: true,

                     itemStyle: {

                         normal: {

                             borderColor: '#fff',

                             borderWidth: 1,

                             shadowBlur: 10,

                             shadowColor: 'rgba(0, 0, 0, 0.3)'

                         }

                     },

                     label: {

                         position: 'right',

                         formatter: '{b}'

                     },

                     lineStyle: {

                         color: 'source',

                         curveness: 0.3

                     },

                     emphasis: {

                         lineStyle: {

                             width: 10

                         }

                     }

                 }

             ]

         };

         myChart.setOption(option);

     }, 'xml');

     if (option && typeof option === "object") {

         var startTime = +new Date();

         myChart.setOption(option, true);

         var endTime = +new Date();

         var updateTime = endTime - startTime;

         console.log("Time used:", updateTime);

     }

 </script>

 </body>

 </html>

工程包下载：

https://pan.baidu.com/s/1vD1p3efCpHYJwMUTs8K96g

提取码：fxuk

Echarts-复杂关系图（源码）的更多相关文章

  1. Android Handler处理机制 ( 一 )（图+源码分析）——Handler,Message,Looper,MessageQueue

    android的消息处理机制(图+源码分析)——Looper,Handler,Message 作为一个大三的预备程序员,我学习android的一大乐趣是可以通过源码学习 google大牛们的设计思想. ...

  2. 点菜网---Java开源生鲜电商平台-系统架构图(源码可下载)

    点菜网---Java开源生鲜电商平台-系统架构图(源码可下载) 1.点菜网-生鲜电商平台的价值与定位. 生鲜电商平台是一家致力于打造全国餐饮行业智能化.便利化.平台化与透明化服务的创新型移动互联网平台 ...

  3. 前端 | 使用 ECharts 绘制关系图

    0 需求 做的项目需要画一个关系图,主要需求如下: 需要展示6种对象之间的关系:数据机构 数据 合约 模型 计算机构 应用 支持突出显示6种对象中的某一种的所有对象 支持Top x子图功能.top x ...

  4. 安卓贴图源码--->单点触控.多点触控.类似in/百度魔图

    效果如图: 类似in,百度魔图,的贴图功能  核心的地方:单/多点 旋转缩放后记录各个顶点小图标位置 引用这里 http://blog.csdn.net/xiaanming/article/detai ...

  5. 转 Android的消息处理机制（图+源码分析）——Looper,Handler,Message

    作为一个大三的预备程序员,我学习android的一大乐趣是可以通过源码学习google大牛们的设计思想.android源码中包含了大量的设计模式,除此以外,android sdk还精心为我们设计了各种 ...

  6. 【转】android的消息处理机制（图+源码分析）——Looper,Handler,Message

    原文地址:http://www.cnblogs.com/codingmyworld/archive/2011/09/12/2174255.html#!comments 作为一个大三的预备程序员,我学习 ...

  7. android的消息处理机制（图+源码分析）——Looper,Handler,Message

    android源码中包含了大量的设计模式,除此以外,android sdk还精心为我们设计了各种helper类,对于和我一样渴望水平得到进阶的人来说,都太值得一读了.这不,前几天为了了解android ...

  8. 带你深入理解STL之空间配置器(思维导图+源码)

    前不久把STL细看了一遍,由于看得太"认真",忘了做笔记,归纳和总结这步漏掉了.于是为了加深印象,打算重看一遍,并记录下来里面的一些实现细节.方便以后能较好的复习它. 以前在项目中 ...

  9. Echarts-树状图(源码 含flare.json)

    刚刚发现官网实例里边的数据其实在:https://www.echartsjs.com/data/asset/data/flare.json 源码: html: <!DOCTYPE html> ...

  10. 机器人路径规划其一 Dijkstra Algorithm【附动态图源码】

    首先要说明的是,机器人路径规划与轨迹规划属于两个不同的概念,一般而言,轨迹规划针对的对象为机器人末端坐标系或者某个关节的位置速度加速度在时域的规划,常用的方法为多项式样条插值,梯形轨迹等等,而路径规划 ...

随机推荐

  1. （五）sturts2+spring整合

    一.Spring与Struts的整合 1.1:加入Spring的jar包.1.2:加入Struts的jar包.1.3:加入Struts与Spring的整合jar//struts2-spring-plu ...

  2. （六）Redis之数据结构之Set

    一.常用方法 和List类型不同的是,Set集合中不允许出现重复的元素 添加/删除元素 获取集合中的元素 集合中的差集运算 集合中的交集运算 集合中的并集元算 扩展命令 1和2 添加/删除元素和获取集 ...

  3. python处理RSTP视频流

    python链接海康摄像头,并以弹出框的方式播放实时视频流, 这种方式是以弹出框的形式播放.本地测试可以,实际业务场景不建议使用.可以采用rtsp转rtmp的方式 @shared_task def p ...

  4. IE6图片透明问题

    网上很多解决IE6下png透明问题的方案,但是经本人实践,有的时候有用,有的时候并不能解决自己的问题.当是后者的时候,想到另外一种办法,就是当在IE6.IE7下使用gif图片,自己在测试的时候,如果g ...

  5. OpenCV实现图象翻转、滤波、锐化

    OpenCV实现图象翻转.滤波.锐化 注:以下代码,使用opencv库函数实现了对图片的翻转.灰度图转换.各种滤波.各种锐化. 库函数相关参数及说明参阅:OpenCV中文站=>opencv教程( ...

  6. 【2017-12-06】winfrom 窗体自启最大化，控件自适应

    先将窗体windowstate属性设置为Maximized public partial class Form1 : Form { public Form1() { InitializeCompone ...

  7. 记录一下set的用法

    set译为集合,是一个内部自动有序且不含重复元素的容器 有时出现需要去掉重复元素的情况 而且有可能因这些元素比较大或者类型不是int型而不能直接开散列表 在这种情况下就可以用set来保留元素本身而不考 ...

  8. SQL Server CET 通用表表达式 之 精典递归

    SQL2005 Common Table Expressions(CET)即通用表表达式. SQLSERVER CET递归使用案例: 1.普通案例 表结构如下:   ;WITH cet_depart ...

  9. python3 基础一

    一.python基本运行 1.python特点:(1)python使用C语言开发,但是python不再有C语言中的指针等复杂数据类型,(2)python有很强的面向对象特性,而且简化了面向对象的实现, ...

  10. 透过字节码生成审视Java动态代理运作机制

    对于动态代理我想应该大家都不陌生,就是可以动态去代理实现某个接口的类来干一些我们自己想要的功能,但是在字节码层面它的表现是如何的呢?既然目前刚好在研究字节码相关的东东,有必要对其从字节码角度来审视一下 ...