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. iOS中UITextField常用设置和方法

    //初始化textField并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(, , , )]; // ...

  2. crontab基础笔记 思维导图版

    直接上图吧----------------------------------------------------------------------------------------------- ...

  3. 深入了解Linux(一)

    Linux的各个文件夹 每次当我使用linux的时候我都被一个个文件夹整懵逼,那么多文件夹到底是怎么分类的呢.今天终于有时间好好整理一下 /boot: 引导文件存放目录,内核文件(vmlinuz),引 ...

  4. BurpSuite—-Target模块(目标模块)

    Target功能 目标工具包含了SiteMap,用你的目标应用程序的详细信息.它可以让你定义哪些对象在范围上为你目前的工作,也可以让你手动测试漏洞的过程,Target分为site map和scope两 ...

  5. PTA基础编程题目集6-6求单链表结点的阶乘和(函数题)

    本题要求实现一个函数,求单链表L结点的阶乘和.这里默认所有结点的值非负,且题目保证结果在int范围内. 函数接口定义: int FactorialSum( List L ); 其中单链表List的定义 ...

  6. My First

    刚入职不到2个月吧,还在实习,月底拿毕业证转正.工作期间遇到很多麻烦问题,有的解决了,有的解决不了,换了个方法实现,挺无奈的.弄个博客,记录下平常遇到的问题和解决方式,也省的每次拿个笔记下来了…… 公 ...

  7. Oracle入门第六天(上)——用户控制

    一.概述 权限的分类: 系统权限: 对于数据库的权限 对象权限: 操作数据库对象的权限 基本上,权限的控制和之前介绍的管理控制台是相通的,所以基本可以大概将此节看作图形化操作的SQL语句操作版本 二. ...

  8. 20155213 2016-2017-2《Java程序设计》第四周学习总结

    20155213 2016-2017-2<Java程序设计>第四周学习总结 教材学习内容总结 继承与多态 继承 继承避免多个类间重复定义共同行为,使用关键字extends.继承表明了子类与 ...

  9. 20155308 实验四 Android开发基础

    20155308 实验四 Android开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android.组件.布局管理器的使用: 掌握Android中 ...

  10. [BZOJ1185][HNOI2007]最小矩形覆盖-[凸包+旋转卡壳]

    Description 传送门 Solution 感性理解一下,最小矩形一定是由一条边和凸包上的边重合的. 然后它就是模板题了..然而真的好难调,小于大于动不动就打错. Code #include&l ...