Vue3中echarts力导向图的使用和简单配置

Vue3中echarts力导向图的简单使用和配置

最近有Vue项目中使用到Echarts，做一个简单记录。

项目实现了一个显示全部节点和部分节点（根据节点长度进行过滤）的功能

做的时候写的一些思考也写在了注释里面

data.json 跟 https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/les-miserables.json 一样，就不专门贴出来了

<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属性来表示不同节点与点击处节点的距离，具体看代码啦。
体验一下就知道效果了~