近期需要使用echarts关系图,当我打开echarts3.0官方demo后发现,对于新手而言,直接看懂有点儿难度,固写这样一篇文章让自己加深记忆,也便新手迅速上手。话不多说,开整生气!

echarts3.0官网提供的demo是json文件或者xml文件,我这里以json格式为例说明。echarts3.0关系图由三部分组成,关系类别、关系节点、节点之间连线。下面是代码,代码可以直接粘贴到echarts官网中执行。

myChart.showLoading();
var webkitDep = {
"type": "force",
"categories": [//关系网类别,可以写多组
{
"name": "人物关系",//关系网名称
"keyword": {},
"base": "人物关系"
}
],
"nodes": [//展示的节点
{
"name": "刘烨",//节点名称
"value": 3,
"category": 0//与关系网类别索引对应,此处只有一个关系网所以这里写0
},
{
"name": "霓娜",
"value": 1,
"category": 0
},
{
"name": "诺一",
"value": 1,
"category": 0
}
],
"links": [//节点之间连接
{
"source": 0,//起始节点,0表示第一个节点
"target": 1 //目标节点,1表示与索引为1的节点进行连接
},
{
"source": 0,
"target": 2
}
]
};
myChart.hideLoading(); option = {
legend: {
data: ['人物关系']//此处的数据必须和关系网类别中name相对应
},
series: [{
type: 'graph',
layout: 'force',
animation: false,
label: {
normal: {
show:true,
position: 'right'
}
},
draggable: true,
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
categories: webkitDep.categories,
force: {
edgeLength: 105,//连线的长度
repulsion: 100 //子节点之间的间距
},
edges: webkitDep.links
}]
};
myChart.setOption(option);

最终效果图:

echarts3.0之关系图详解的更多相关文章

  1. SPI总线协议及SPI时序图详解

    SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接口.SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线,节约了芯片的管脚 ...

  2. SPI总线协议及SPI时序图详解【转】

    转自:https://www.cnblogs.com/adylee/p/5399742.html SPI,是英语Serial Peripheral Interface的缩写,顾名思义就是串行外围设备接 ...

  3. (转)CAS (4) —— CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example)

    CAS (4) —— CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0 ...

  4. [转载] 多图详解Spring框架的设计理念与设计模式

    转载自http://developer.51cto.com/art/201006/205212_all.htm Spring作为现在最优秀的框架之一,已被广泛的使用,51CTO也曾经针对Spring框 ...

  5. Hadoop2.2.0分布式安装配置详解[2/3]

    前言 本文主要通过对hadoop2.2.0集群配置的过程加以梳理,所有的步骤都是通过自己实际测试.文档的结构也是根据自己的实际情况而定,同时也会加入自己在实际过程遇到的问题.搭建环境过程不重要,重要点 ...

  6. CAS (6) —— Nginx代理模式下浏览器访问CAS服务器网络顺序图详解

    CAS (6) -- Nginx代理模式下浏览器访问CAS服务器网络顺序图详解 tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 nginx版本: nginx-1. ...

  7. CAS (4) —— CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example)

    CAS (4) -- CAS浏览器SSO访问顺序图详解(CAS Web Flow Diagram by Example) tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0 ...

  8. UML类图详解_关联关系_一对多

    对于一对多的示例,可以想象一个账户可以多次申购.在申购的时候没有固定上限,下限为0,那么就可以使用容器类(container class)来搞,最常见的就是vector了. 下面我们来看一个“一对多” ...

  9. UML类图详解_关联关系_多对一

    首先先来明确一个概念,即多重性.什么是多重性呢?多重性是指两个对象之间的链接数目,表示法是“下限...上限”,最小数据为零(0),最大数目为没有设限(*),如果仅标示一个数目级上下限相同. 实际在UM ...

随机推荐

  1. oracle 里面定时执行任务,比如存储过程内容等

    DECLARE   job_no_ NUMBER;   BEGIN      DBMS_JOB.SUBMIT(job_no_,                   'proc_qszx_dw_sc(' ...

  2. 如何在linux下解压缩rar和zip格式的文件压缩包

    转载:http://oldboy.blog.51cto.com/2561410/597515 使用apt-get安装:  sudo apt-get install  rar  zip rar使用: 将 ...

  3. ios block循环引用问题

    ios开发中,开了ARC模式,系统自动管理内存,如果程序中用到了block就要注意循环引用带来的内存泄露问题了 这几天遇到一个问题,正常页面dismiss的时候是要调用dealloc方法的,但是我的程 ...

  4. WPF-19:分享一个样式(左右滑动选中的checbox)

    首先看下效果. 选中: 不选中 样式: <Style x:Key="CheckStyle" TargetType="{x:Type CheckBox}"& ...

  5. E - Triangle

    Description Johnny has a younger sister Anne, who is very clever and smart. As she came home from th ...

  6. PowerShell 远程执行任务

    在 linux 中我们可以使用 SSH 执行各种远程操作,同样的在 windows 平台上我们可以通过 PowerShell 获得类似的能力.本文将介绍通过 PowerShell 执行远程操作的基本信 ...

  7. 设计模式之生成器(Builder)模式

    意图 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以表示不同的表示. 适用性 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方式时. 当构造过程必须允许被构造的对象有不同的表 ...

  8. Pushgateway 介绍

    Pushgateway是一个独立的服务,Pushgateway位于应用程序发送指标和Prometheus服务器之间. Pushgateway接收指标,然后将其作为目标被Prometheus服务器拉取. ...

  9. java.lang.NullPointerException at java.lang.ProcessBuilder.start(Unknown Source) at org.apache.hadoop.util.Shell.runCommand(Shell.java:482)

    1:问题出现的原因,部署好的hadoop-2.6.4进行window10操作hadoop api出现的错误,具体错误是我向hdfs上传文件,还好点,之前解决过,这里不叙述,这里说一下从hdfs下载文件 ...

  10. GIT 命令集

    Git图形化界面 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remot ...