关系图：

代码：

  1.  <!DOCTYPE html>
  2.  <head>
  3.      <meta charset="utf-8">
  4.      <script type="text/javascript" src="js/echarts.js"></script>
  5.      <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  6.      <script type="text/javascript" src="js/dataTool.js"></script>
  7.  </head>
  8.  <body style="height: 600px; margin: 0">
  9.  <div id="container" style="height: 100%"></div>
  10.  <script type="text/javascript">
  11.      var dom = document.getElementById("container");
  12.      var myChart = echarts.init(dom);
  13.      var app = {};
  14.      option = null;
  15.      myChart.showLoading();
  16.      $.get('data/les-miserables.gexf', function (xml) {
  17.          myChart.hideLoading();
  18.  
  19.          var graph = echarts.dataTool.gexf.parse(xml);
  20.          var categories = [];
  21.          for (var i = 0; i < 9; i++) {
  22.              categories[i] = {
  23.                  name: '类目' + i
  24.              };
  25.          }
  26.          graph.nodes.forEach(function (node) {
  27.              node.itemStyle = null;
  28.              node.value = node.symbolSize;
  29.              node.symbolSize /= 1.5;
  30.              node.label = {
  31.                  normal: {
  32.                      show: node.symbolSize > 30
  33.                  }
  34.              };
  35.              node.category = node.attributes.modularity_class;
  36.          });
  37.          option = {
  38.              title: {
  39.                  text: 'Les Miserables',
  40.                  subtext: 'Default layout',
  41.                  top: 'bottom',
  42.                  left: 'right'
  43.              },
  44.              tooltip: {},
  45.              legend: [{
  46.                  // selectedMode: 'single',
  47.                  data: categories.map(function (a) {
  48.                      return a.name;
  49.                  })
  50.              }],
  51.              animationDuration: 1500,
  52.              animationEasingUpdate: 'quinticInOut',
  53.              series : [
  54.                  {
  55.                      name: 'Les Miserables',
  56.                      type: 'graph',
  57.                      layout: 'none',
  58.                      data: graph.nodes,
  59.                      links: graph.links,
  60.                      categories: categories,
  61.                      roam: true,
  62.                      focusNodeAdjacency: true,
  63.                      itemStyle: {
  64.                          normal: {
  65.                              borderColor: '#fff',
  66.                              borderWidth: 1,
  67.                              shadowBlur: 10,
  68.                              shadowColor: 'rgba(0, 0, 0, 0.3)'
  69.                          }
  70.                      },
  71.                      label: {
  72.                          position: 'right',
  73.                          formatter: '{b}'
  74.                      },
  75.                      lineStyle: {
  76.                          color: 'source',
  77.                          curveness: 0.3
  78.                      },
  79.                      emphasis: {
  80.                          lineStyle: {
  81.                              width: 10
  82.                          }
  83.                      }
  84.                  }
  85.              ]
  86.          };
  87.  
  88.          myChart.setOption(option);
  89.      }, 'xml');
  90.      if (option && typeof option === "object") {
  91.          var startTime = +new Date();
  92.          myChart.setOption(option, true);
  93.          var endTime = +new Date();
  94.          var updateTime = endTime - startTime;
  95.          console.log("Time used:", updateTime);
  96.      }
  97.  </script>
  98.  </body>
  99.  </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. （六）授权（下）：自定义permission

    一.Authorizer.PermissionResolver及RolePermissionResolver Authorizer的职责是进行授权(访问控制),是Shiro API中授权核心的入口点, ...

  2. HotSpot JVM目录

    一.知识结构整理 jvm体系大体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 二.运行时JVM结构组成及作用 http://www.cnblogs.com/imxi ...

  3. js监听audio播放完毕

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. C++ STL 之 常用算法

    #include <iostream> #include <vector> #include <algorithm> using namespace std; // ...

  5. nuxt中全局引入element-ui

    介绍 对于一个前端小白来说,使用一套已有的框架作为基础,可以达到事半功倍的效果,在这里我们选择Element.Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库( ...

  6. Java基础加强-泛型

    /*泛型*/ (泛型是给编译器看的) 泛型是提供给 /*javac编译器使用的*/,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型带类型说明的集合时,会去掉 "类 ...

  7. MyBatis工厂工具类 MyBatisUtils

    import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apach ...

  8. Linux上使用trash回收机制来替换rm命令

    因为我们日常使用的rm 命令没有恢复机制,删除了文件就找不到了,往往重要的文件,我们要特别小心才对,但是有时还是避免不了我们的误操作.可能会造成很大的影响. 本博文简单介绍一下,用trash命令仿照W ...

  9. spider _其他库的简单操作与方法

    PHP : 网络IO java : 代码笨重,代码量很大 C/C++ :虽然效率高,但是代码成型很慢 1 通用网络爬虫(搜索引擎引用,需要遵守robots协议) 1 搜索引擎如何获取一个新网站的 UR ...

  10. Liunx-tail命令

    1. 实时刷新tail -f /var/log/messages 2. 实时刷新最新500条log tail -500f  /var/log/messages 3. tail -n 20 catali ...