echart 散点图计算直线坐标

最近做项目，客户要求要做散点图，来对数据进行分析，当然一般来说，做散点图，也不是什么问题，毕竟有着 echart 这样强大的图表示例。大家可以使用echart 里边带自动计算插件的图表，只要将数据放进图标，就可以自动算出中间的横线坐标，如下图

首先，要说明一下，中间这条横线，在没有插件的情况下，是要自己手动计算，最后获取x，y轴的坐标，来确定这条线的，那这里我们来介绍下，如何通过公式的计算，来算出坐标。

第一,我们要先算出斜率  m=(n*sum(x*y)-sum(x)*sum(y))/(n*sum(x的平方)-sum(x)的二次方)

第二，我们要算出偏移量 b=(sum(y)-m*sum(x))/n

经过上边两步计算之后 ，我们已经得到了 m, b ,接下来我们就可以算出 这条直线的，两个点的坐标，就是 通过 y= mx+b.

这里就是重点了，我们要得到两个坐标，才能确定这条线是在哪里出现，但这里边的x,是什么，就是解出这条线的关键。

其实里边的x 就是指 自己后台返回来的数据里边的，最小最大值，记住这里返回的数据，是一个二维数组来的，大家要是不清楚，

可以打开echart里边的示例，看下。

y= mx+b 将x的值放进去，大家就可以算出y,得到两个坐标值，从而确定这条线的走向。

一般建议大家，直接使用带插件的散点图，大家可以直接得到算出来的结果，当然，真的是万一不支持插件的图，便可以参考一下，上边的计算公式，得到这条线的坐标。

回顾整个计算过程，其实就是比较烦索了一点，但其实公式还是很明显的，大家一看就可以明白，没有太多复杂的计算过程，前端的小伙伴，可以写个循环，对数据进行计算，快速得到结果，从而避免自己手算出现在错误。

下边是手动计算的结果，给大家参考一下：

[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]

select 10+8+13+9+11+14+6+4+12+7+5=99
select 10*10+8*8+13*13+9*9+11*11+14*14+6*6+4*4+12*12+7*7+5*5=1001
select 8.04+6.95+7.58+8.81+8.33+9.96+7.24+4.26+10.84+4.82+5.68=82.51
select 10*8.04+8*6.95+13*7.58+9*8.81+11*8.33+14*9.96+6*7.24+4*4.26+12*10.84+7*4.82+5*5.68=797.60
select 99*82.51
select 99*99
n = 11
x = 99
y=82.51
xy = 797.60
x*x= 1001
--select (11*797.60-8168.49)/(11*1001-9801) =0.50009090909090909091

select (82.51-(0.5*99))/11=3

[0,3]
y = 0.5 * 0 + 3
[20,13]
y = 0.5 * 20 + 3

以上是自己的做为资深开发的一些个人经历，把这些经验分享给大家，希望以后大家在从事开发中，可以避免不必要的麻烦，跟浪费时间精力。

要是大家喜欢我的文章的话，可以在文章下留言或是联系我，共同进步，共同探讨开发的一些案例，促进彼此间的交流，分享一些日常的开发趣事。