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划线，其它项目已经用的svg画线，正在研究当中，研究好了更新