在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：
想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。
一、安装使用jsplumb
npm install jsplumb //安装jsplumb库
import {jsPlumb} from "jsplumb"; //引入jsplumb库二、API与属性
1、getInstance() 方法用于返回一个已创建的jsPlumbInstance对象。jsPlumbInstance 是 jsPlumb 库中重要的对象之一，它代表了一个 jsPlumb 实例，并包含了一系列 API 和配置选项，用于管理连接器和元素。
2、repaintEverything()方法用于重新渲染整个页面上的连接器，以适应元素位置或大小的变化。当元素被移动或缩放时，它们的位置、大小、旋转等属性都会发生变化。如果这些元素与其他元素之间存在连接器，则连接器的位置和样式也需要相应地进行更新，以保证页面上的连接显示正确。
3、deleteEveryConnection()方法用于删除页面上的所有连接器。当你需要一次性删除页面上所有的连接器时，可以调用 deleteEveryConnection() 方法。这个方法会遍历整个页面上的连接器，并将它们全部删除。
4、connect()方法用于创建一个连接器，并将其连接到页面上的两个元素之间.
5、属性字段参数：
- source：连接节点的起始位置。
- target：连接节点的结束位置。
- anchor：连接的位置(Right ，Left，Bottom，Top)。
- orerlays：给连接的线上添加小箭头。
- connector：连接的线的类型（Bezier:贝塞尔曲线；Flowchart：流程线；StateMachine：状态机；Straight：直线）。
具体的参考文档可以看这个：jsplumb 中文基础教程 (wdd.js.org)
三、完整代码
export default function Test(props:any) {
let timer: any;
const instance = jsPlumb.getInstance();//创建一个jsplumb对象
const resize = () => {
instance.repaintEverything();
};
const clear = () => {
if (timer) {
clearInterval(timer);
}
instance.deleteEveryConnection();
};
const init = () => {
let m = 0.01;
timer = setInterval(() => {
m += 0.002;
if (m > 0.98) {
m = 0.012;
}
instance.deleteEveryConnection();
//连接图一和图二
instance.connect({
source: "flowChart1",//图一的id
target: "flowChart2",//图二的id
endpoint: "Blank", //端点的形状设置为空
connector: ["Flowchart", { cornerRadius: 2 }],
anchor: ["Right", "Left"],//连接端点的位置，起始节点的右侧和结束节点的左侧
paintStyle: { stroke: "#457DA5", strokeWidth: 2 },//线的样式
overlays: [
["Arrow", { width: 12, length: 12, location: m }],//小箭头样式及位置
],
});
//连接图二和图三
instance.connect({
source: "flowChart2",
target: "flowChart3",
endpoint: "Blank",
connector: ["Flowchart", { cornerRadius: 2 }],
anchor: ["Right", "Left"],
paintStyle: { stroke: "#474554", strokeWidth: 2 },
overlays: [
["Arrow", { width: 12, length: 12, location: m }],
],
});
//连接图四和图三
instance.connect({
source: "flowChart4",
target: "flowChart3",
endpoint: "Blank",
connector: ["Flowchart", { cornerRadius: 2 }],
anchor: ["Right", "Left"],
paintStyle: { stroke: "#27951D", strokeWidth: 2 },
overlays: [
["Arrow", { width: 12, length: 12, location: m }],
],
});
//连接图四和图二
instance.connect({
source: "flowChart4",
target: "flowChart2",
endpoint: "Blank",
connector: ["Flowchart", { cornerRadius: 2 }],
anchor: ["Bottom", "Bottom"],
paintStyle: { stroke: "#27951D", strokeWidth: 2 },
overlays: [
["Arrow", { width: 12, length: 12, location: m }],
],
});
}, 20);
};
useEffect(() => {
init();
window.addEventListener("resize", resize);
return () => {
clear();
window.removeEventListener("resize", resize);
};
}, []);
return (
<div style={
{width:'100%',display:"flex",justifyContent:"space-between"}}>
<div id={'flowChart1'} style={
{border: "5px solid #457DA5"}}>FlowChart1</div>
<div id={'flowChart2'} style={
{border: "5px solid #474554"}}>FlowChart2</div>
<div id={'flowChart3'} style={
{border: "5px solid #9C8D41"}}>FlowChart3</div>
<div id={'flowChart4'} style={
{border: "5px solid #27951D"}}>FlowChart4</div>
</div>
);
};以上代码就可以实现图例中的流向图了，有什么其他的好方法欢迎评论交流。