echarts绘制节点关系图

最新推荐文章于 2024-05-24 17:52:25 发布
最新推荐文章于 2024-05-24 17:52:25 发布
阅读量2.5k 收藏 13
点赞数
文章标签： echarts 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45891676/article/details/121771086
版权

echarts绘制节点关系图

HTML代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>关系图</title>
</head>

<body>
    <div id="main" style="width: 1200px; height: 700px"></div>
    <div id="ss"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(["echarts", "echarts/chart/force"], function(ec) {
            var myChart = ec.init(document.getElementById('main'), 'macarons');
            var option = {
                tooltip: {
                    show: false
                },
                series: [{
                    type: 'force',
                    name: "Force tree",
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            nodeStyle: {
                                brushType: 'both',
                                borderColor: 'rgba(0,215,0,0.4)',
                                borderWidth: 1
                            }
                        }
                    },
                    categories: [{
                        name: 'lol'
                    }, {
                        name: '位置'
                    }, {
                        name: '英雄'
                    }, {
                        name: '技能'
                    }],
                    nodes: [{
                        id: 0,
                        category: 0,
                        name: '0',
                        label: '峡谷之巅',
                        symbolSize: 60,
                        ignore: false,
                        flag: true
                    }, {
                        id: 1,
                        category: 1,
                        name: '1',
                        label: '上单',
                        symbolSize: 40,
                        ignore: true,
                        flag: true
                    }, {
                        id: 2,
                        category: 2,
                        name: '2',
                        label: '剑姬',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 3,
                        category: 2,
                        name: '3',
                        label: '贾科斯',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 4,
                        category: 1,
                        name: '4',
                        label: '中单',
                        symbolSize: 40,
                        ignore: true,
                        flag: true
                    }, {
                        id: 5,
                        category: 2,
                        name: '5',
                        label: '辛德拉',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 6,
                        category: 2,
                        name: '6',
                        label: '阿卡丽',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 7,
                        category: 2,
                        name: '7',
                        label: '发条',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 8,
                        category: 1,
                        name: '8',
                        label: '打野',
                        symbolSize: 40,
                        ignore: true,
                        flag: true
                    }, {
                        id: 9,
                        category: 2,
                        name: '9',
                        label: '扎克',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 10,
                        category: 2,
                        name: '10',
                        label: '男枪',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 11,
                        category: 2,
                        name: '11',
                        label: '豹女',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 12,
                        category: 2,
                        name: '12',
                        label: '千珏',
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 13,
                        category: 3,
                        name: '13',
                        label: '隼舞',
                        number: 45,
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 14,
                        category: 3,
                        name: '14',
                        label: '寒影',
                        number: 52,
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 15,
                        category: 3,
                        name: '15',
                        label: '霞阵',
                        number: 52,
                        symbolSize: 20,
                        ignore: true,
                        flag: true
                    }, {
                        id: 16,
                        category: 3,
                        name: '16',
                        label: '幻樱杀缭乱',
                        number: 52,
                        symbolSize: 30,
                        ignore: true,
                        flag: true
                    }],
                    links: [{
                        source: 1,
                        target: 0
                    }, {
                        source: 4,
                        target: 0
                    }, {
                        source: 8,
                        target: 0
                    }, {
                        source: 2,
                        target: 1
                    }, {
                        source: 3,
                        target: 1
                    }, {
                        source: 5,
                        target: 4
                    }, {
                        source: 6,
                        target: 4
                    }, {
                        source: 7,
                        target: 4
                    }, {
                        source: 9,
                        target: 8
                    }, {
                        source: 10,
                        target: 8
                    }, {
                        source: 11,
                        target: 8
                    }, {
                        source: 12,
                        target: 8
                    }, {
                        source: 13,
                        target: 6
                    }, {
                        source: 14,
                        target: 6
                    }, {
                        source: 15,
                        target: 6
                    }, {
                        source: 16,
                        target: 6
                    }]
                }]
            };
            myChart.setOption(option);
            var ecConfig = require('echarts/config');

            function openOrFold(param) {
                var option = myChart.getOption();
                var nodesOption = option.series[0].nodes;
                var linksOption = option.series[0].links;
                var data = param.data;
                var linksNodes = [];

                var categoryLength = option.series[0].categories.length;

                if (data != null && data != undefined) {
                    if (data.flag) {

                        for (var m in linksOption) {

                            if (linksOption[m].target == data.id) {
                                linksNodes.push(linksOption[m].source);
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for (var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = false;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = false;
                        myChart.setOption(option);
                    } else {

                        for (var m in linksOption) {

                            if (linksOption[m].target == data.id) {
                                linksNodes.push(linksOption[m].source);
                            }
                            if (linksNodes != null && linksNodes != undefined) {
                                for (var n in linksNodes) {
                                    if (linksOption[m].target == linksNodes[n]) {
                                        linksNodes.push(linksOption[m].source);
                                    }
                                }
                            }
                        }
                        if (linksNodes != null && linksNodes != undefined) {
                            for (var p in linksNodes) {
                                nodesOption[linksNodes[p]].ignore = true;
                                nodesOption[linksNodes[p]].flag = true;
                            }
                        }
                        nodesOption[data.id].flag = true;
                        myChart.setOption(option);
                    }
                }
            }
            myChart.on(ecConfig.EVENT.CLICK, openOrFold);
            myChart.on('click', function(param) {
                url = 'https://www.ruan8.com/wenda/12132.html'
                if (param.data['category'] == '3') {
                    window.open(url)
                }
            });
        });
    </script>

</body>

</html>

在这里插入图片描述
点击它
在这里插入图片描述
再次点击另外三个
在这里插入图片描述
点击阿里卡

在这里插入图片描述

*年夕
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts关系图、流程图、导向图(详细示例——满满的注释)
2401_84141337的博客
04-17 1241
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
极致呈现系列之:Echarts关系图的网络洞察
九仞山的专栏
06-22 336
详细介绍了关系图的特性、应用场景及使用方法
vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略
weixin_54703767的博客
11-28 2491
在设计关系图时，选择力引导依赖关系图作为主要可视化方法，考虑到树状图在呈现节点之间关系方面的不便，力引导图能更好地展示节点关系。为了实现节点的折叠和展开策略，引入了开源库echarts3，并设计了节点的展开和收缩逻辑。关系图的布局采用力导向算法，其中引力中心设置为图中心，节点层级按照由中心向四周分布。详细讨论了力引导关系图的基本概念，节点和边的定义，以及力导向布局算法的原理。
vue2 eCharts实现自定义节点图标 graph关系图
weixin_50606255的博客
02-05 1200
vue2 eCharts实现自定义节点图标 graph关系图
echarts-树图、关系图、桑基图、日历图
最新发布
m0_74019046的博客
05-24 988
树图主要用来表达关系结构。树图的端点也收symbol的调节没有子节点的要叶子节点leave树图中的data只能有一个数据layout：树图的布局，有 正交 和 径向 两种，默认情况下是’orthogonal’正交布局，'radial’是径向布局。:在 layout = ‘orthogonal’ 的时候，该配置项才生效，在水平方向的排列方式。取值有’LR’ （从左到右）, ‘RL’（从右到左）, ‘TB’（从上到下）, ‘BT’（从下到上）。：树图初始展开的层级（深度）。
echarts 关系图graph
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
echarts关系图配置详解
weixin_50885665的博客
07-08 6398
echarts关系图配置详解
Echarts绘制关系图
北海几经夏的博客
12-31 4283
文章目录基本应用节点重名问题解决方案两点之间如何绘制多条连线 今天要发博客，因为今天再不发，2020就过去啦！ 最近需要用到Echarts绘制关系图，在实现的过程中遇到了一些小问题，这里记录一下，方便日后查找。 Echarts入门看这里 Echarts基本样式看这里 Echarts进阶版样式看这里 基本应用 找一个自己喜欢的Echarts样式 按照该样式要求，封装数据 举个栗子： 样式来源 样式图展示： // dataInfo节点数据，dataLink关系数据，option图配置信息 // 如果完全使
图的概念（1）
kuxingseng123的博客
11-20 813
慢慢的将各种图的概念全部都搞清楚，摸底透彻！
echarts画关系图，指定有的关系为双向箭头，有的关系为单向箭头
hj009zzh的博客
03-17 7786
// series中配置edgeSymbol和edgeSymbolSize 指定默认样式为双向箭头，大小都是10 series: [ { type: 'graph', layout: 'force', symbolSize: 80, roam: true, edgeSymbol: ['arrow', 'arrow'],
Vue+ECharts+关系图
weixin_44427407的博客
12-02 9898
Vue+ECharts画关系图 项目需求：使用echarts画出一个关系图并在前端进行展示 使用框架：vue2.x 今天忙了一天，终于是做出了一个简单的示意图。先上图看看效果。 只是简单的做了一个视图，数据是写死的，后面会记录动态获取数据并生成关系图的方法。 接下来介绍，使用vue+echarts画图的方法。 首先，引入echarts模块。在vue框架里每使用一个模块几乎都是同一个方法–引入模块。 这里我们首先下载echart模块，使用以下命令： npm intsall echarts --save 下
echarts人物关系图
12-04
1. **series-type:** 首先，你需要在ECharts配置项中设置`series-type`为`graph`，指定你要绘制的是一个图。 2. **data:** 定义图中的节点数据，每一项包含节点的id和name，以及可选的其他属性，如颜色、大小等。 ...
echarts tree 节点替换图标，节点蔓延状态自动播放
05-25
- 在ECharts的Tree图配置中，`symbol`字段用于设置节点的图形类型，可以是`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`等预设图形，也可以是图片的URL。 - 如果想使用...
echarts鼠标覆盖高亮显示节点及关系名称详解
11-29
先上效果，原来是鼠标覆盖之后只显示节点名称不显示关系名称。 修改之后可以既显示节点名称又显示（自定义的）关系名称。 2、代码 html部分就这样。 ”main”> js代码，使用了jquery和echarts.js，用的是源代码那...
echarts关系图
05-07
在ECharts的关系图中，节点代表数据实体，边则表示它们之间的关系。 1. **节点和边的配置** - **节点（Nodes）**: 可以通过`series.graph.nodes`配置节点数据，包括节点的ID、名称、形状、颜色等属性。ECharts提供...
echarts关系图中保留多条关系的js包
07-14
接着，你需要准备一个包含节点和边数据的JSON对象，根据提供的示例代码或者文档配置ECharts实例，最后调用`chart.setOption`方法来绘制关系图。 总结来说，这个"echarts关系图中保留多条关系的js包"是为了满足在...
echarts树图实现搜索查询功能
笑到世界都狼狈的博客
05-15 2918
echarts树图实现搜索查询、高亮、自定义节点图片，鼠标悬停显示详情、导出png、刷新等功能
ECharts关系图，节点可拖拽，添加节点和边的点击事件
热门推荐
Mu_Yue_Yue的博客
05-20 2万+
最近在做一个neo4j前端可视化的任务，对比了ECharts.js，Cytoscape.js和D3.js几个前端可视化工具，最终选择了ECharts.js，百度的一款开源工具，简单好用，比较容易上手。后台采用Python的Django框架，主要用于接收前端的请求，从neo4j数据库获取数据，并将数据传给前端服务器展示。这里只展示ECharts的用法以及自己的一些总结，为以后打下一个...
echarts树图根据值设置节点大小及颜色
qq_43446740的博客
12-13 5001
echarts实现效果如何实现 实现效果 数据为echarts官方数据 本例使用数据为其中的片段： 如何实现 echarts tree官方文档写法 如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数： (value: Array|number, params: Object) => number|Array 其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。 故配置参数，参数值为箭头函数，箭头函数参数为data中的数据值。 sym
echarts关系图节点发光
06-09
要让 Echarts 关系图的节点发光，可以使用 Echarts 的光晕特效(effect)功能。具体实现方法如下： 1. 在 Echarts 配置中启用特效(effect)功能，例如： ``` option = { ... series: [{ type: 'graph', ... // 启用特效 rippleEffect: { period: 4, // 涟漪动画周期 scale: 2, // 涟漪动画中波纹的最大缩放比例 brushType: 'stroke' // 波纹的绘制方式：stroke表示空心圆形 }, ... }] } ``` 2. 在节点上添加特效配置，例如： ``` option = { ... series: [{ type: 'graph', ... // 启用特效 rippleEffect: { period: 4, scale: 2, brushType: 'stroke' }, // 添加节点特效 data: [{ name: '节点1', x: 100, y: 100, // 在节点上添加特效配置 itemStyle: { color: '#ff0', // 添加高亮样式 emphasis: { color: '#f00', shadowBlur: 10, shadowColor: '#f00' }, // 添加光晕样式 shadowBlur: 20, shadowColor: '#ff0' } }, { name: '节点2', x: 200, y: 200, // 在节点上添加特效配置 itemStyle: { color: '#f0f', // 添加高亮样式 emphasis: { color: '#f00', shadowBlur: 10, shadowColor: '#f00' }, // 添加光晕样式 shadowBlur: 20, shadowColor: '#f0f' } }], ... }] } ``` 在节点的 itemStyle 中添加 shadowBlur 和 shadowColor 属性，就可以实现节点发光的效果。若要节点高亮，可以在 itemStyle 中添加 emphasis 配置，设置高亮的颜色、阴影模糊度和阴影颜色等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值