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约定的更多相关文章

  1. echarts拓扑图(graph,力导向布局图)

    echarts连接:https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解:https://www.cnblogs.com/koala201 ...

  2. Echarts3 关系图-力导向布局图

    因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

  3. D3.js force力导向图用指定的字段确定link的source和target,默认是索引

    json.links.forEach(function (e) { var sourceNode = json.nodes.filter(function (n) { return n.name == ...

  4. Echarts关系图-力引导布局

    需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里 ...

  5. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

  6. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  7. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  8. 力导向图(关系图) echarts的运用

    <template> <div class="demo"> <div id="grap" class="grap&quo ...

  9. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

随机推荐

  1. Xcode缓存数据清除

    1. 移除 APP 打包的ipa历史版本(Archives) 不可恢复,就是你打的包,如果需要dysm文件,及时备份 路径:~/Library/Developer/Xcode/Archives 2. ...

  2. Framwork框架日志与配置工具的使用

    一.使用设置: 头文件的添加: ..\Framwork\Include\pthread_64; ..\Framwork\CommFramwork\include; ..\Framwork\Utilit ...

  3. C++程序设计入门(上) string类的基本用法

    string类中的函数 1. 构造 2. 追加 3. 赋值 4. 位置与清除 5. 长度与容量 6. 比较 7. 子串 8. 搜索 9. 运算符 追加字符串 string s1("Welc ...

  4. jdk 配置

    JDK (绿色版)      此次安装的 JDK 版本为  1.8.0_77 步骤一: 拷贝 JDK(350M左右)到电脑 步骤二: 配置环境变量  JAVA_HOME  , PATH  ,  CLA ...

  5. Delphi Android USB Interface with the G2

    来源:http://www.bverhue.nl/g2dev/?p=65 Delphi Android USB Interface with the G2 Leave a reply I first ...

  6. Linux 字符设备驱动—— ioremap() 函数解析

    一. ioremap() 函数基础概念 几乎每一种外设都是通过读写设备上的相关寄存器来进行的,通常包括控制寄存器.状态寄存器和数据寄存器三大类,外设的寄存器通常被连续地编址.根据CPU体系结构的不同, ...

  7. go 网络请求篇

    ---恢复内容开始--- 今天特意找了下go的网络请求篇,get请求是ok的,post请求一直不下来,搜索了下,代码都差不多,无法拿到post数据,先整理一篇,亲测可用. 针对post ,先来说下po ...

  8. 重学Veriliog(2)——高级编程语句

    1.判断 1.1 if ... else ... 有优先级 在组合逻辑电路中,需要避免产生Latch(避免结构不完整) Latch容易引起竞争冒险,同时静态时序分析工具也不好分析穿过Latch的路径? ...

  9. SAP BDC 交货增强无法进入

    最近碰到一个问题,使用BDC MODE 'N' UPDATE 'S' 无法进入增强: FV50XF0B_DELIVERY_PUBLISH DELIVERY_PUBLISH_AFTER_SAVE 前台操 ...

  10. Creating Isomorphic Apps with Node.js, React, and Express

    In this article, we’re going to use following software: React: the UI framework that can rendered on ...