ECharts之force力导向布局图——数据源说明及后端API约定
Echarts ?
关于 Echarts 请移步这里
force 力导向图
实现方式,如:
function require_EC () {
require(
[
'echarts',
//载入force模块
'echarts/chart/kforce'
],
function (ec) {
//确定需要绘制的DOM
setChats(ec);
}
)
}
function setChats (ec) {
var myChart = ec.init(document.getElementById('main'));
myChart.setOption(option);
}
数据源说明
主要三个数据源: categories (数据分类)、 nodes (图表中的节点名称)、 links (图表中节点之间的链接线),具体如下图:

API开发
力导向图数据 API文档 (个人意见仅供参考)
| 实现功能 | 1、categories、nodes、links、数组按需加载,减轻服务器压力; 2、对展示孤岛链接的优化 3、cache data 应用 |
| 接口传递的主要参数以及主要值 | name、force、categories、nodes、links、cache、refresh |
| 返回码 | 见 返回码附件图 |
参数说明:

请求示例:(详情看图片)
| 示例 链接 | 返回值 | 含义 |
| force-api.php?name=demo1&force=nodes |
图片详情 |
获取了 名称为 ”demo1“的力导向图表的 nodes(节点) 数据 |
| force-api.php?name=demo1&force=categories | 图片详情 | 获取了 名称为 ”demo1“的力导向图表的 categories(分类) 数据,【以此类推 links 不做举例】 |
| force-api.php?name=demo1_isolated_all&force=links | 图片详情 | 【如何获取 孤岛链接?】将 孤岛链接组成的图表 当成一张新的图表 即可:如图, 获取了 demo1的所有孤岛链接(demo1_isolated_all)的 links 数组 |
| force-api.php?name=demo1_isolated_all&force=nodes&cache=refresh | 图片详情 | 获取了 demo1的所有孤岛链接(demo1_isolated_all)的 node 数组 并做了 强制刷新 |
注:第一次请求服务器,如果请求正确返回码将是
code: "2200",message: "nodes success",
第二次请求服务器 将会返回
code: "3304",message: "cache:2015-01-19 15:14:43",
除非加上参数 cache=refresh 缓存时间3天
返回码约定

牛刀小试

如需查看此次 demo 源码,移步GitHub
完
附上此次 API 接口源码php (php随便写了下,轻拍……):下载
ECharts之force力导向布局图——数据源说明及后端API约定的更多相关文章
- echarts拓扑图(graph,力导向布局图)
echarts连接:https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解:https://www.cnblogs.com/koala201 ...
- Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
- D3.js force力导向图用指定的字段确定link的source和target,默认是索引
json.links.forEach(function (e) { var sourceNode = json.nodes.filter(function (n) { return n.name == ...
- Echarts关系图-力引导布局
需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...
- 使用百度Echarts制作力导向图
最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】
前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...
- 力导向图(关系图) echarts的运用
<template> <div class="demo"> <div id="grap" class="grap&quo ...
- D3.js 力导向图的制作
力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...
随机推荐
- Ubuntu18.04挂载exfat格式移动硬盘
1.安装exfat-fuse 命令:sudo apt-get install exfat-fuse 2.重新插拔移动硬盘,即可识别 查看挂载命令:lsblk
- 苹果App Store提交app审核时EULA(终端用户软件使用条款)的注意事项等政策解读
写在前面,今天是2014年10月14日,以下内容可能会随着时间的推进而失效,请注意时效性 当在App Store提交app审核的时候,苹果通常会要求开发者提供一个EULA,苹果默认提供了一个,地址: ...
- TP5.0中多图上传文件名重复问题
最近在做项目的时候出现了一个问题,这里记录一下: 问题: 使用TP5.0框架自带的文件上传方法后,发现多图上传可能会出现文件名重复的问题. 问题代码: 找到TP5框架上传文件命名方法,/thinkph ...
- Oracle之plsql及游标
--1.赋值 --:= 赋值 declare var_name ) :='&请输入名字';--&是一个提示输入的特殊符号,会打开一个输入框 var_age ) :='&请输入年 ...
- 在javascript中的跨域解决
跨域产生的原因 跨域是由浏览器的同源策略引起的,即不同源(协议,域名,端口中其中有一个不同)的js是不能读取对方的资源的.当要网站中的js要请求其他网站的数据时就会产生跨域问题,就像下面这样,浏览器会 ...
- Xilinx FPGA高速串行收发器简介
1 Overview 与传统的并行实现方法相比,基于串行I/O的设计具有很多优势,包括:器件引脚数较少.降低了板空间要求.印刷电路板(PCB)层数较少.可以轻松实现PCB设计.连接器较小.电磁干扰降低 ...
- leetcode记录-罗马数字转整数
罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...
- 20155236 2016-2017-2 《Java程序设计》第十周学习总结
20155236 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发 ...
- 20155336 实验三 敏捷开发与XP实践
20155336 实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验内容及步骤 (一)编码标准:在IDEA中使用工具(Code->Reformate Code)把代码重 ...
- yaml中的锚点和引用
项目引入yaml语言来写配置文件,最近发现利用其锚点&和引用*的功能,可以极大减少配置文件中的重复内容,将相同配置内容收敛到锚点处,修改时,只需要修改锚点处的内容,即可在所有引用处生效. ya ...