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

14,951次阅读
没有评论

共计 1934 个字符,预计需要花费 5 分钟才能阅读完成。

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

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

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

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

高亮整条链路的思路

  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();

  
  relationships.forEach(({ source, target }) => {
    if (!nodes.has(source)) {
      nodes.set(source, { name: source, children: [] });
    }
    if (!nodes.has(target)) {
      nodes.set(target, { name: target, children: [] });
    }

    
    const sourceNode = nodes.get(source);
    const targetNode = nodes.get(target);

    
    sourceNode.children.push(targetNode);
  });

  
  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

原文地址: echarts 关系图实现一整条链路高亮

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-11-07发表,共计1934字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)