Vue3 中 echarts 力导向图的简略应用和配置

最近有 Vue 我的项目中应用到 Echarts，做一个简略记录。

我的项目实现了一个显示全副节点和局部节点（依据节点长度进行过滤）的性能

做的时候写的一些思考也写在了正文外面

data.json 跟 https://cdn.jsdelivr.net/gh/a… 一样，就不专门贴出来了

<template>
  <div id="graph" style="width: 100%; height: 100%">
    <div style="padding-top: 15px">
      <el-checkbox v-model="config.showAll"> 显示全副 </el-checkbox>
    </div>
    <div>
      <span v-if="!config.showAll"> 节点长度 </span
      ><el-input-number
        size="mini"
        v-if="!config.showAll"
        v-model="config.length"
        :min="1"
        :max="10"
      />
    </div>
    <div>
      <el-button size="mini" @click="drawImage()"> 点击重绘 </el-button>
    </div>

    <div id="chart" ref="scatterMap" class="chart-wrapper" />
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import {defineComponent, onMounted, ref, reactive} from "vue";
import cloneDeep from "lodash/cloneDeep";
import {data} from "./data.js";

export default defineComponent({
  name: "echarts",
  props: {},
  setup() {function getCenterPoint() {
      return {
        x: scatterMap.value.clientWidth / 2,
        y: scatterMap.value.clientHeight / 2,
      };
    }
    const config = reactive({
      color: 0,
      colorOptions: [{ label: "计划一", value: 0},
        {label: "计划二", value: 1},
        {label: "计划三", value: 2},
      ],
      size: 1,
      sizeOptions: [{ label: "小", value: 0},
        {label: "中", value: 1},
        {label: "大", value: 2},
      ],
      length: 1,
      showAll: true,
      id: "0", // 随便设置一个, 初始化时依据参数重置
    });
    const lastNodes = ref();
    function setNodes(id, length, position, links) {let existNodes = [id];
      // 目标：查找某节点左近的 ID，如果之前曾经查找过，则过滤掉
      function findNearNodes(id) {let nodesID = [];
        const tempNodeID = [];
        // 依据已有的 ID 查找 target 和 source 所对应的 ID
        links.forEach((item) => {if (item.source === id) {tempNodeID.push(item.target);
          }
          if (item.target === id) {tempNodeID.push(item.source);
          }
        });
        // 先剔除本身反复，即查找进去的 nodesID 的反复项
        nodesID = [...new Set(tempNodeID)];
        // 剔除曾经查找过的点 []
        const res = nodesID.filter(function (v) {return existNodes.indexOf(v) == -1;
        });
        // 把新找进去的点，加到曾经存在的 list 中 existNodes
        existNodes = existNodes.concat(res);
        // 返回曾经剔除进去的新找进去的节点
        return res;
      }
      const nodeLevel = [];
      for (let i = 0; i < length + 1; i++) {nodeLevel.push([]);
      }
      let res = [];
      function setNodeLevel(nodes, levelIndex) {nodes.forEach((item) => {nodeLevel[levelIndex].push(item);
        });
        // 查找节点左近的点
        let nearNodes = [];
        nodeLevel[levelIndex].forEach((item) => {nearNodes = nearNodes.concat(findNearNodes(item));
        });
        if (levelIndex < length) {setNodeLevel(nearNodes, levelIndex + 1);
        } else {
          // 依据这个 nodeLevel 设置对应 id 的 category 属性
          const visibleNodesId = nodeLevel.flat(); // 去括号，获取所有要显示的节点 ID
          let coypNodes = cloneDeep(data.nodes);
          const visibleNodes = coypNodes.filter((item) => {return visibleNodesId.indexOf(item.id) !== -1;
          });
          nodeLevel.forEach((nodeIds, index) => {nodeIds.forEach((nodeId) => {
              // 多级遍历设置对应的 category 属性
              visibleNodes.forEach((node) => {if (node.id === nodeId) {
                  node.category = index + 1;
                  node.symbolSize = 15;
                }
                if (node.id === id) {
                  node.x = position.x;
                  node.y = position.y;
                  node.fixed = true;
                }
              });
            });
          });
          // 增加上次 查问进去的点
          // 遍历 上次查问进去的点
          res = visibleNodes;
        }
      }
      // 示例，第一个节点 id 为 '1'
      setNodeLevel([id], 0);
      return res;
    }
    function setConfig(nodeId, position) {let nodes = cloneDeep(data.nodes);
      // link 能够不扭转，然而 category 要扭转，cloneDeep 避免笼罩
      // 是否显示全副，不然有的节点永远选不到，必定要有这么一个选项
      // 即：显示全副、显示以后节点
      // 如果显示全副节点 category 如何设置？随机！// 如果节点局部设置，选中点 category 为 1，其余依照链路累加
      if (config.showAll) {nodes.forEach(function (node) {
          node.symbolSize = 15;
          node.category = Math.floor(Math.random() * 8);
        });
      } else {nodes = setNodes(nodeId, config.length, position, data.links);
      }
      // TODO
      // handle 解决 要显示的 node 跟上一次的进行合并
      const visibleNodes = cloneDeep(nodes);
      // const visibleNodesId = visibleNodes.map((item) => {
      //   return item.id;
      // });
      // 把上次的节点也显示进去
      // lastNodes.value.forEach((item) => {//   if (visibleNodesId.indexOf(item.id) === -1) {
      //     item.category = 0;
      //     item.symbolSize = 15;
      //     visibleNodes.push(item);
      //   }
      // });
      // 把以后查出来的 nodes 保留到 lastNodes 中
      lastNodes.value = cloneDeep(nodes);

      // nodes 跟上次的合并解决
      const options = {
        title: {
          text: "",
          subtext: "",
          top: "bottom",
          left: "right",
        },
        tooltip: {},
        series: [
          {// edgeSymbol:["circle","arrow"],
            // edgeSymbolSize:10,
            name: "Les Miserables",
            type: "graph",
            layout: "force",
            draggable: true,
            data: visibleNodes,
            links: data.links,
            categories: data.categories,
            roam: true,
            label: {
              position: "right",
              show: false, // 默认显示 label
              formatter: function (params) {
                // 连
                if (params.data.source) {
                  // 留神判断，else 是将节点的文字也初始化成想要的格局
                  return (
                    params.data.source +
                    "是【" +
                    params.data.target +
                    "】的居间人"
                  );
                } else {return params.name;}
              },
              clolr: "#fff", // label 色彩,
              fontSize: 12, // 字体大小
            },
            force: {
              edgeLength: 160, // TODO 能够由用户设置  边的两个节点之间的间隔，这个间隔也会受 repulsion。// 反对设置成数组表白边长的范畴，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。repulsion: 100, // 节点之间的斥力因子。// 反对设置成数组表白斥力的范畴，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
              gravity: 0.1, // 节点受到的向核心的引力因子。该值越大节点越往中心点聚拢。},
          },
        ],
      };
      return options;
    }
    // 三组配色计划 ok
    // 三组间距，球大小 ok
    // 点击后，小球居中 ok
    // 呈现问题：拖拽后小球地位主动挪动，产生偏移
    // filter 链路可调
    // 箭头双向过滤
    // 对于色彩的应用：因为总色彩无限，中心点设为 category 为 1，其余的顺次相加，0 作为默认色彩

    let myChart = ref(null);
    const scatterMap = ref();

    const initEcharts = async () => {myChart.value = echarts.init(scatterMap.value);
      lastNodes.value = data.nodes;
      draw();
      config.id = data.nodes[0].id;
      myChart.value.on("click", function (params) {
        // 点击节点时，才会触发绘图
        if (params.dataType === "node") {
          // 设置以后选中点
          config.id = params.data.id;
          draw();}
      });
    };
    function drawImage() {draw();
    }
    function draw() {const position = getCenterPoint();
      if (config.showAll) {const option = setConfig(0, position);
        myChart.value.setOption(option);
      } else {
        // TODO 设置是否居中，居中的话不便查看，不居中的话可能会导致局部节点不显示？maybe
        const option = setConfig(config.id, position);
        // 居中事实的话 setoption 第二个参数为 true
        myChart.value.setOption(option);
      }
    }
    onMounted(() => {initEcharts();
    });
    return {
      drawImage,
      scatterMap,
      myChart,
      initEcharts,
      config,
    };
  },
});
</script>

<style scoped>
.chart-wrapper {
  width: 100%;
  height: 600px;
}
</style>

实现成果

过滤成果

通过设置节点的 category 属性来示意不同节点与点击处节点的间隔，具体看代码啦。
体验一下就晓得成果了~