两个点或者两div之间画线

1.0 js库：leader-line（推荐）

使用：传入两个元素即可以连线
先导入leader-line的库文件
然后就可以直接使用了

//传入元素a，b，就可以连线，option是配置参数，详情参看leader-line介绍
new LeaderLine(a，b，{option}）

2.0 canvas绘制

window.onload = function () {
    var cav = document.getElementById('myCanvas'); //获取canvas元素
    var ctx = cav.getContext('2d'); //获取cav上下文，创建ctx对象，以获取允许进行绘制的2d环境
    ctx.fillStyle = '#f60'; //颜色填充
    ctx.fillRect(0,0,100,100);
 
 
    //绘制直线
    /*beginPath()定义了一个新的路径绘制动作的开始
     moveTo()为指定点创建了一个新的子路径，这个点就变成了新的上下文的点
     lineTo()以上下文点为起点，到方法参数中指定的点之间画一条直线。
     stroke()为所画的线赋予颜色，并使其可见，如果没有特别指定的颜色的话，则默认使用黑色画直线*/
    ctx.beginPath();
    ctx.moveTo(130,50);
    ctx.lineTo(200,50);
    ctx.lineWidth = 20; //线的宽度
    ctx.strokeStyle = '#ff0000'; //线的颜色
    ctx.lineCap='round'; //线的两头圆滑
    ctx.stroke();
 
    //绘制弧线和曲线
    /*arcTo()在画布上创建介于两个切线之间的弧/曲线
    quadraticCurveTo()绘制二次曲线，每条二次曲线要由上下文点、一个控制点和一个终止点来定义
    bezierCurveTo()绘制贝塞尔曲线，每条贝塞尔曲线要由上下文点、两个控制点和一个终止点来确定。由于贝塞尔曲线
    有两个控制点，因此比二次曲线更加的复杂多变*/
    //绘制弧线
    ctx.beginPath();
    ctx.moveTo(200,100);
    ctx.lineTo(300,100);
    ctx.arcTo(350,100,350,130,50);
    ctx.lineTo(350,170);
    ctx.stroke();
 
    //绘制二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(200,50);
    ctx.quadraticCurveTo(280,0,380,150);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'blue';
    ctx.stroke();
 
    //绘制三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(400,100);
    ctx.bezierCurveTo(280,10,500,10,580,170);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#0ff';
    ctx.stroke();
 
    //复杂路径
    ctx.beginPath();
    ctx.moveTo(120,30);
    //第一条直线
    ctx.lineTo(220,160);
    //二次曲线
    ctx.quadraticCurveTo(250,200,270,120);
    //贝尔塞尔曲线
    ctx.bezierCurveTo(300,-40,330,200,400,150);
    //第二条直线
    ctx.lineTo(500,90);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#333';
    ctx.stroke();
};

3.0 echarts绘制

/**
画线用到的 API 为 markLine 
data 即为你要画的点的集合
coord 即为 点
coord[0] 和 coord[1] 代表了该 点 的位置座标
name 和 itemStyle 可以定制画线的一些样式
这只是一个示例代码，更多东西还是要自己试一试
**/
series：{
    markLine: {
	   data: [
			[
				{
					name:'这是我画的线',
					itemStyle:{
						normal:{
							show:true,
							color:'#4c5336'
						}
					},
					coord:[0,0]
				},
				{
					coord:[5,5]
				}
			],
		  ]
	},
}

3.0 svg绘制

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
   <path
      d="
      M40 100
      L40 250
      A20,20 0 0,0 60,270
      L180 270
      A20,20 0 0,1 200,290
      L200 360"
      fill="none"
      stroke-width="2"
      stroke-dasharray="15 8"
      stroke="blue"
      />
</svg>