Echarts力导向图graph 关系图绘制Demo

近期因业务需求,给我司产品做了一个Echarts----力导向图&关系图 demo

其中分为两种关系图:

01.不同等级节点样式不同

02.不同公司的颜色样式不同
效果图献上:

code如下:

 var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        myChart.showLoading();
        var webkitDep = {
            "type": "force",
            "categories": [ //关系网类别,可以写多组
                {
                    "name": "甲公司", //关系网名称
                    "keyword": {},
                    "base": "网格关系"
                },
                {
                    "name": "乙公司", //关系网名称
                    "keyword": {},
                    "base": "网格关系"
                },
            ],
            "nodes": [ //展示的节点
                {
                    "name": "甲公司", //节点名称
                    "value": 10,
                    "symbolSize": 40,
                    "category": 0 //与关系网类别索引对应,此处只有一个关系网所以这里写0 

                },
                {
                    "name": "甲公司A股东",
                    "value": 8,
                    "symbolSize": 25,
                    "category": 0,
                    itemStyle: {
                        color: '#3398db'
                    }
                },
                {
                    "name": "甲公司B股东",
                    "value": 10,
                    "symbolSize": 25,
                    "category": 0,
                    itemStyle: {
                        color: '#3398db'
                    }
                },
                {
                    "name": "子公司1",
                    "value": 10,
                    "symbolSize": 15,
                    "category": 0,
                    itemStyle: {
                        color: 'green'
                    }
                },
                {
                    "name": "子公司2",
                    "value": 110,
                    "symbolSize": 15,
                    "category": 0,
                    itemStyle: {
                        color: 'green'
                    }
                },
                {
                    "name": "子公司3",
                    "value": 100,
                    "symbolSize": 15,
                    "category": 0,
                    itemStyle: {
                        color: 'green'
                    }
                },
                {
                    "name": "子公司4",
                    "value": 1000,
                    "symbolSize": 15,
                    "category": 0,
                    itemStyle: {
                        color: 'green'
                    }
                },
                {
                    "name": "乙公司", //节点名称
                    "value": 10,
                    "symbolSize": 40,
                    "color": "#fff",
                    "category": 1 //与关系网类别索引对应,此处只有一个关系网所以这里写0
                },
                {
                    "name": "乙公司A股东",
                    "value": 8,
                    "symbolSize": 25,
                    "category": 1
                },
                {
                    "name": "乙公司B股东",
                    "value": 10,
                    "symbolSize": 25,
                    "category": 1
                },
                {
                    "name": "乙公司C股东",
                    "value": 8,
                    "symbolSize": 25,
                    "category": 1
                },
                {
                    "name": "子公司1",
                    "value": 10,
                    "symbolSize": 15,
                    "category": 1
                },
                {
                    "name": "子公司2",
                    "value": 110,
                    "symbolSize": 15,
                    "category": 1
                },
                {
                    "name": "子公司3",
                    "value": 100,
                    "symbolSize": 15,
                    "category": 1
                }
            ],
            "links": [ //节点之间连接
                {
                    "source": 0, //起始节点,0表示第一个节点
                    "target": 1 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 0,
                    "target": 2
                },
                {
                    "source": 1,
                    "target": 3
                },
                {
                    "source": 1,
                    "target": 4
                },
                {
                    "source": 2,
                    "target": 5
                },
                {
                    "source": 2,
                    "target": 6
                },
                {
                    "source": 7, //起始节点,0表示第一个节点
                    "target": 8 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 7, //起始节点,0表示第一个节点
                    "target": 9 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 7, //起始节点,0表示第一个节点
                    "target": 10 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 8, //起始节点,0表示第一个节点
                    "target": 11 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 9, //起始节点,0表示第一个节点
                    "target": 12 //目标节点,1表示与索引为1的节点进行连接
                },
                {
                    "source": 10, //起始节点,0表示第一个节点
                    "target": 13 //目标节点,1表示与索引为1的节点进行连接
                }
            ]
        };
        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: 80, //连线的长度
                    repulsion: 100 //子节点之间的间距
                },
                edges: webkitDep.links
            }]
        };
        myChart.setOption(option);;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

完结撒花

感谢Thanks?(?ω?)? 周末愉快!

原文地址:https://www.cnblogs.com/MarthaRen-diligence/p/11993901.html

时间: 2024-10-13 02:29:52

Echarts力导向图graph 关系图绘制Demo的相关文章

graph 关系图 设置

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="X-UA-Compatible" content="IE=8"> <!-- 使用IE8以上的渲染 -->

转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针对上述所提出的疑问,我琢磨了一下ECharts图表组件.找到官方这样的一个适合的简单关系图:http://echarts.baidu.com/doc/example/force1.html 通过观察ECharts图表组件的简单关系图的数据结构,得出我要实现一个站点地图需要做哪些工作: 1.引入ech

雍正剑侠图人物关系图(2014-11-24 更新)思海整理

雍正剑侠图人物关系图(2014-11-24 更新)网址:http://www.thinksea.com/hd/yzjxt/思海整理 http://www.thinksea.com/

【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问题包含: 怎样在小球旁插入文字 怎样将小球换为别的图形 怎样插入图片 怎样限制小球运动的边界 本文将对以上问题依次做出讲解.当中前三点是 SVG 元素的问题.和 D3 无多大关联. 1. SVG 图片 SVG 的图片元素的具体讲解可看[官方文档-图片].通常,我们仅仅须要使用到图片元素的五个属性就够

利用echarts highcharts 实现自定义地图 关系图效果 侧边3D柱形图饼图散点图

github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap gi

数据库精华知识点总结(1)—数据库的三层模式和二级映像,E-R(实体联系图)图,关系模型

Data base: 长期存储在计算机内,有组织的,可共享的大量数据集合.基本特征:永久存储,可共享,有一定的物理和逻辑结构. Data base manage system(DBMS):用户和os之间的一层数据管理软件. 1.提供数据操纵语言DML对数据库增删改查 2.数据库的建立和维护 3.提供数据控制功能:在数据库建立,运行和维护时,DBMS管理数据的安全性,完整性,并发控制和故障的系统恢复,(也就是数据库的事务管理和运行管理) 4.与其它软件系统通信 Data base system(D

对照层关系图验证代码

  包括要在验证期间分析的特定程序集或项目在 “解决方案资源管理器”中,右击建模项目或 “层引用”文件夹,然后单击 “添加引用”.    在 “添加引用”对话框中,选择所需程序集或项目,然后单击 “确定”.    随时手动验证代码从打开的层关系图中验证代码 右击关系图图面,再单击 “验证体系结构”.     说明  默认情况下,层关系图 (.layerdiagram) 文件的 “生成操作”属性设置为 “验证”,以便在验证过程中包括关系图.       “错误列表”窗口会报告发生的任何错误. 有关

Echarts关系图-力引导布局

需要做一个树形图,可以查看各个人员的关系. 可伸缩的力引导图-失败 刚开始,打算做一个可展开和伸缩的,搜索时候发现CSDN有一篇美美哒程序媛写的Echarts Force力导向图实现节点可折叠. 这里放上前辈的代码 /** 这段代码来自 http://blog.csdn.net/r4NqiAn/article/details/48320487 Echarts-Force 力导向布局图树状结构实现节点可折叠效果 作者:Reese 日期:2015-09-09 版本:V0.1 功能:点击一次节点,展开

Vue D3 力导向图

1. 安装 前端工程根目录下执行 yarn add d3 ,安装 d3 依赖包.安装的版本 "d3": "^5.7.0" 2. vue 文件中引入 d3 import * as d3 from 'd3' 例如一个基础的 d3.vue 文件内容,包含基本的 <template> <script> <style> <template> <div> <svg width="960" he