echarts力导向图配置项

最新推荐文章于 2024-04-02 14:54:42 发布

欢欢小乖

最新推荐文章于 2024-04-02 14:54:42 发布

阅读量772

点赞数 1

分类专栏： echarts 文章标签：可视化

本文链接：https://blog.csdn.net/HuanHuan_Alne/article/details/115757826

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客内容涉及利用Echarts库构建一个力导向布局的网络图。数据包含多个节点，如'王大妈'、'王二麻子'和'李四'，节点类别分为两类，并设置了不同的图标和大小。节点间的关系通过links数据结构定义，具有特定的标签和线样式。此外，还配置了节点文本、节点图片大小和关系线颜色等细节。

摘要由CSDN通过智能技术生成

var data = {
          nodes: [
              {
                  name: '王大妈',
                  category: 0,
                  ip: '10.0.5.187',
              }, {
                  name: '王二麻子',
                  category: 1,
      
                  
                  ip: '10.0.5.187'
              }, {
                  name: '李四',
                  category: 1,
                  ip: '10.0.5.186'
              },
          ],
          links: []
          }
          var count = 0;
          var nodesList = data.nodes
          data.links = Array.from({length: nodesList.length -1}).map((item, index)=> {
          return {
                  source: nodesList[0].name,
                  target: nodesList[(index + 1)].name,
                  count: count++
              }
          })
 // 节点配置
            data.nodes.forEach(node => {
                // 判断节点类型
                if (node.category === 0) {
                    // 设置节点图片
                    node.symbol = 'image://'+"./img/server3-success.png",
                    // 节点图片大小
                    node.symbolSize = 40;
                } else if (node.category === 1) {
                    node.symbol = 'image://'+"./img/server1-success.png",
                    node.symbolSize = 30
                }
        });
    
        // 节点关系数据
            data.links.forEach(link => {
                // 关系标签
                link.label = {
                    // 文字水平居中
                    align: 'center',
                    // 字号
                    fontSize: 12,
                    color: '#32527d'
                };
                // 关系线的样式
                link.lineStyle = {
                    color: '#1b95d9'
                }
                
            });
 option = {
        animation:false,
        series: [{
            type: 'graph',
            //  布局为力导向布局
            layout: 'force',
            // 节点是否可拖拽
            draggable: false,
            // 是否开启鼠标缩放和平移漫游
            roam: false,
            lineStyle: {
                color: '#1b95d9',
                width: 2
            },
            // 节点文本配置
            label: {
                 // 是否显示
                show: true,
                // 字号
                fontSize:12,
                color: '#32527d',
                borderWidth: 0,
                shadowBlur: 0,
                shadowColor: 'transparent',
                // 文字偏移
                offset: [0, 30],
                // 显示文本
                formatter:function(e){
                    return e.data.ip
                }
            },
            force: {
                 // 节点之间的斥力因子
                repulsion: 1500,
                // 线两边的节点距离
                edgeLength: 50,
                layoutAnimation: false
            },
           //  不响应鼠标事件
            silent: true,
            data: data.nodes,
            links: data.links
        }]
    }