leader-line一个在网页上画指引线的库，文档地址
leader-line 绘制指引线部分效果图预览
安装
在你的页面引入 leader-line 依赖项（下载链接）
<script src="https://files.cnblogs.com/files/mggahui/leader-line.min.js"></script>
当然，也可通过npm方式安装，不过通过npm形式安装，使用的的时候会有一些问题，可参考文章末尾给出的解决方案
npm install leader-line -S
使用
指示线会被画在 start 和 end 两个元素之间
<div id="start">start</div> <div id="end">end</div> <script> new LeaderLine( document.getElementById('start'), document.getElementById('end') ); </script>
执行以上初始化代码后，页面效果如下
（这些指引线使用了一个叫leader-line的样式class，如果绘制指引线时出现遮挡情况，可以通过调整这个样式class的z-index或者position来处理。
同时我们也应该注意到：
①，避免定义全局className 为 leader-line 的样式，避免覆盖库的样式；
②，生成的 svg 指示线标签使用了相对于 body 绝对行为 (查看leader-line 的class样式可以看到)
）
现在我们来修改一下样式效果，让页面看起来更舒服些，可以通过css 修改元素样式和通过给 LeaderLine 构造函数传递参数修改样式（此处指 leader-line 修改指示线样式）。
其实我们也可以通过 LeaderLine 构造函数返回的实例来修改属性，因为这个实例具有和构造函数接收参数一样的同名属性（除了 hide 属性），当然我们推荐使用 setOptions 方法来修改属性，详情请参考文档。
给开始（start）和结束（end）元素添加样式后，重新运行效果如下
<style> .target { display: inline-block; background-color: #9ee7ea; padding: 12px; } #start {} #end { float: right; margin-top: 200px; } </style>
<div id="start" class="target">start</div> <div id="end" class="target">end</div>
现在，通过css样式把 start 和 end两个元素位置分隔的距离变大了，LeaderLine 初始化后默认会以红色带箭头实线绘制指示线，现在我们试试修改指示线的样式吧
修改指示线样式
通过添加 dash 参数修改为虚线样式
var startEle = document.getElementById('start'); var endEle = document.getElementById('end'); var leader_line = new LeaderLine( startEle, endEle, { dash: true, } );
让指示线动起来
通过添加 animation 等参数，从下方开始，仅展示核心代码部分
var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 渐变色开始色 endPlugColor: '#fff386',// 渐变色结束色 gradient: true, // 使用渐变色 dash: { // 虚线样式 animation: true,// 让线条滚动起来 } } );
实例的属性和方法
setOptions 方法
leader_line.setOptions(options)
该方法接受和构造函数相同的参数选项（除了 hide 属性）
show , hide 方法
leader_line.show([showEffectName[, animOptions]])
leader_line.hide([showEffectName[, animOptions]])
显示或隐藏指示线 (showEffectName效果可取 'draw' 慢慢绘制效果和 'fade'淡入淡出效果)
position 方法
leader_line.position()
将 start 和 end 元素的当前位置和大小重新定位到指示线。如果您的网页在不调整窗口大小的情况下移动或调整了元素的大小应调用此方法重新定位指示线位置
scrollableBox.addEventListener('scroll', AnimEvent.add(function() {
leader_line.position();
}), false);
remove 方法
leader_line.remove()
实例相关的svg标签将从页面上被删除，leader_line 实例也被销毁
更多方法和属性请参考文档。
让指示线从开始到结束慢慢绘制出来
var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 渐变色开始色 endPlugColor: '#fff386', // 渐变色结束色 gradient: true, // 使用渐变色 dash: { // 虚线样式 animation: true, // 让线条滚动起来 }, hide: true, }, ); /** 显示效果 * draw 从起点到终点绘制线条 * fade 淡入淡出 * none 无效果，即直接显示 */ var showEffectName = 'draw'; // 动画参数 var animOptions = { duration: 1000, //持续时长 timing: 'ease-in', // 动画函数 } leader_line.show(showEffectName, animOptions)
注意，想实现这个效果，必须先隐藏指示线，然后再调用实例 show 方法，并控制绘制时长。即在构造函数中添加 hide 选项来影藏指示线，然后再调用show方法，绘制效果写入 'draw'。
学习代码
页面效果完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>leader-line学习</title> <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> <script> var vConsole = new VConsole(); // 移动端调试工具 </script> <script src="https://files.cnblogs.com/files/mggahui/leader-line.min.js"></script> <style> .target { display: inline-block; padding: 12px; background-color: #9ee7ea; } #start {} #end { float: right; margin-top: 200px; } </style> </head> <body> <div id="start" class="target">start</div> <div id="end" class="target">end</div> <script> var startEle = document.getElementById('start'); var endEle = document.getElementById('end'); var leader_line = new LeaderLine( startEle, endEle, { startPlugColor: '#ff3792', // 渐变色开始色 endPlugColor: '#fff386', // 渐变色结束色 gradient: true, // 使用渐变色 dash: { // 虚线样式 animation: true, // 让线条滚动起来 }, hide: true, }, ); /** 显示效果 * draw 绘制线条 * fade 淡入 * none 无效果，即直接显示 */ var showEffectName = 'draw'; // 动画参数 var animOptions = { duration: 1000, //持续时长 timing: 'ease-in', // 动画函数 } leader_line.show(showEffectName, animOptions) </script> </body> </html>