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