echarts 关系图实现一整条链路高亮

graph 没有 配置项支持高亮整条链路到根节点,目前只支持一下四种:

      // 'none' 不淡出其它图形,默认使用该配置。
    // 'self' 只聚焦(不淡出)当前高亮的数据的图形。
    // 'series' 聚焦当前高亮的数据所在的系列的所有图形。
    // 'adjacency' 聚焦关系图中的邻接点和边的图形。

从接口拿到的数据,示例:

[在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e2a808f7fc0b4c81a858ff7389bae865.png![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c35977c5a1f540258f62919e876f322a.png

高亮整条链路的思路

  1. 确定每个节点有多少个分支---------确定有多少条分支

  2. 设置series(series就是接口返回的nodes)的每一项 itemStyle.opacity=1-------------默认节点全部高亮

  3. 设置links的每一项 lineStyle.opacity=0.5 --------------默认线也高亮

  4. 创建一个多维数组,接收根据links 获取到从根节点到叶子节点的所有链路的集合
    在这里插入图片描述

  5. 循环遍历链路集合的多维数组的同事遍历nodes,nodes中的某一项数据匹配到第几条链路,就往这一项中line中添加上该链路的index+1
    在这里插入图片描述

  6. 监听鼠标悬浮上节点的事件---------
    1、首先讲所有节点和连接线 变为透明
    设置series的每一项 itemStyle.opacity=0.1
    设置links的每一项 lineStyle.opacity=0.1
    2、如果当前节点的line 的长度是1 ,说明 当前节点只在一条链路中存在,循环遍历nodes,找到所有line中含有当前节点line的节点并点亮,点亮节点的同时找到links中target是当前点亮的节点的线,并点亮线。如果当前节点的line有多个,说明当前节点在多个链路中存在,循环遍历当前节点的line,循环遍历nodes,找到所有line中含有当前节点line的节点并点亮,点亮节点的同时找到links中target是当前点亮的节点的线,并点亮线。

  7. 监听鼠标移出事件,恢复默认设置
    讲所有节点和连接线 变为高亮
    设置series的每一项 itemStyle.opacity=1
    设置links的每一项 lineStyle.opacity=0.5

下面是整体代码

<template>
  <div class="p-16px">
    <el-card class="bg-white overflow-hidden mb-16px" style="width: 100%">
      <div>
        <SearchForm @search="search" :initKv="initKv" />
      </div>
    </el-card>
    <div class="h-900px w-full bg-white overflow-hidden p-15px pb-0" v-if="requestFinish">
      <Chart
        class="h-full w-full bg-white"
        :option="chartOption"
        ref="graphRef"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
    ref, onMounted, nextTick } from "vue";
import * as AnaApi from "@/api/statisticalAnalysis";
import SearchForm from "./SearchForm.vue";

const requestFinish = ref(false);
const graphRef = ref(null);

function buildPaths(relationships) {
   
  const nodes = new Map();

  // Create a map of nodes with children
  relationships.forEach(({
     source, target }) => {
   
    if (!nodes.has(source)) {
   
      nodes.set(source, {
    name: source, children: [] });
    }
    if (!nodes.has(target)) {
   
      nodes.set(target, {
    name: target, children: [] });
    }

    // Find the source and target nodes
    const sourceNode = nodes.get(source);
    const targetNode = nodes.get(target);

    // Add target node as a child of source node
    sourceNode.children.push(targetNode);
  });

  // Function to find the root nodes
  const findRoots = () => {
   
    const allChildren = new Set();
    nodes.forEach((node) => {
   
      node.children.forEach((child) => allChildren.add(child.name));
    });

    return [...nodes.keys()]
      .filter((name) => !allChildren.has(name))
      .map
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
链路是指网络中两个节点之间的连接。在网络监控中,链路状态监控可以用来检测网络中各个链路的可用性和性能。通过监控链路状态,可以及时发现链路故障或异常,以便进行相应的处理和维护。 使用Echarts可以实现链路状态的可视化展示。可以通过绘制力导向(Force-Directed Graph)来展示网络中各个节点之间的链路关系。在Echarts中,可以使用节点和边的方式来表示链路,节点表示网络中的设备或主机,边表示节点之间的连接关系。 以下是一个使用Echarts实现链路状态监控面板的示例代码: ```javascript // 引入echarts和jquery库 <script src="jquery.min.js"></script> <script src="echarts.min.js"></script> // 创建一个具有力导向功能的echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 定义节点和边的数据 var nodes = [ {name: '节点1'}, {name: '节点2'}, {name: '节点3'}, // ... ]; var links = [ {source: '节点1', target: '节点2'}, {source: '节点2', target: '节点3'}, // ... ]; // 配置echarts的option var option = { series: [{ type: 'graph', layout: 'force', force: { repulsion: 100, // 节点之间的斥力 edgeLength: 100, // 边的长度 }, data: nodes, links: links, // 其他配置项... }] }; // 使用配置项绘制表 myChart.setOption(option); ``` 通过以上代码,可以实现一个简单的链路状态监控面板,展示网络中各个节点之间的链路关系。你可以根据实际需求进行进一步的定制和修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值