vue项目中画出优雅的线条（虚线、直线、折线、带箭头、流动效果等）

需求：运行监控图模块，模块之间用虚线或者实线连接，且带有箭头

实现方法：

1、canvas绘制

2、echarts专业的表格软件（画带箭头的虚线有难度）

3、svg方法

4、leader-line插件

5、背景图

•    刚开始项目比较紧急，也没时间研究怎么划线比较好，就用了最笨的方法：背景图。就是让ui出一张背景图，只留下线条和背景色，其它元素的位置通过配置数据来动态渲染

      难点：屏幕缩放时保证相对位置精确，这就需要以一个屏幕的宽高为基准进行比例计算，把其它元素的left和top值转化为百分比，并调节数值，使元素和背景图上线条的位置达到需要的效果

• 后续维护的时候发现了一个划线的专业插件leader-line，原理是使用svg绘制，https://anseki.github.io/leader-line/

文档相当详细，支持虚线、线条粗细、箭头、线性等的配置，就是不支持90度折线的圆角设置，于是在项目中使用了leader-line来划线

我的做法是在页面mounted时根据配置好的数据渲染线条，然后将线条对象存到store里，beforeDestroy时调用hide()方法隐藏，下次进入页面时就只需要调用show()方法显示就行，避免过多的渲染。当然也可以离开页面前调用remove()方法移除线条对象，下次进来再重新渲染，都是可以的。

注意点：渲染线条实例时需要获取dom结构，所以要等页面渲染完成后再调用绘制函数，最好在nextTick后再加个500ms的延时，确保需要的dom结构完全渲染完成，我之前没加就导致绘制了却无法显示的问题。

• canvas划线没试过，肯定是可以的
• svg划线

这是简单的画一条弯折的虚线，M40 100代表起点，L40 250代表画直线到坐标40 250，A是画圆弧，后面的20,20代表x和y方向的半径，1表示顺时针画，0表示逆时针画，200,290代表结束位置，stroke-width="2"为线条粗细，stroke-dasharray="15 8"虚线中实线和空格的值，stroke="blue"线条颜色

三角形画法：

M和L意思是一样的，Z表示闭合，填充一个blue的颜色

这样一条好看的带箭头的虚线就画出来了，更多svg用法可以搜索网络文档，我也是现学现卖