Echarts自定义Legend按钮实现以及Demo

前段时间,一个朋友问能不能做出这样的Echarts图,大概是这样:

他有个需求,有4条线分别代表:缓存100时方案A的曲线,缓存200时方案A的曲线,缓存100时方案B的曲线,缓存200时方案B的曲线,按常规模式这个时候Echarts的Legend会有4个按钮(缓存100方案A,缓存200方案A,缓存100方案B,缓存200方案B),它们分别控制一条线,但是他不想这样,他想要这样的4个按钮:缓存100,缓存200,方案A,方案B,每个按钮可以关闭对应的两条线。相当于他想要的展示维度和Echarts不一样,他的展示效果在分类上更合理。

当时之前我也没有做过,我也不知道能不能实现,直到后面有一天突然看到Echarts3.0的API,发现Echarts是提供了Legend点击事件方法的!然后马上去翻看2.0的,结果发现在用户手册上方一点的位置也明确写了的,只是从来没有注意到罢了…(-_-|||),不仅如此,Echarts还提供了线条开关的API!

既然这样,那这个需求就有可能实现了,可以自定义4个Legend按钮,然后在自己写方法来控制曲线,于是,没过多久,就有了这篇文章,先看看DEMO。下面开始解释代码:

继续阅读

Echarts长图全图打印方案以及Demo

前面使用echarts做统计图表,做出来的echarts图横向宽度挺大的,都超出页面了,然后我设置了一个横向滚动条。

然后!需求要求有打印按钮,要将图表打印出来(突然好想砍掉需求方)… 然后悲催的发现,图表滚动条所到的地方才能被打印出来,然后其他的地方就被遮住了,就像下面那个样子…

有滚动条的echarts图打印不全

有滚动条的echarts图打印不全

怎么办呢?突然想到echarts可以转换成图片的,于是想到了可以在打印前将echarts转换为图片放在页面,然后缩放到指定宽度,然后再打印,打印完成后再切换回来!于是开始试验,最后发现方案可行,就有了下面的代码。

继续阅读

数据图表趋势线算法——最小二乘法,这是你的Echarts趋势线

众所周知,Echarts是百度的图表框架,用于做统计图表是比较得心应手的工具,但是所谓百密而有一疏,Echarts居然没有描绘趋势线功能,用过Excel的小伙伴都知道,Excel统计图表可以自动生成趋势线,什么线性的啊,曲线的啊…什么什么数学术语性的啊…

之前,趋势线功能只是在需求之外想了想,也没有搞出来,就给忘了,后来,有个小伙伴又提到了,还提到趋势线可能应该是算出来的,顿时恍然大悟,找到学数学的小伙伴问了问,原来,这个趋势线的专业术语叫做“拟合曲线”,描述这种曲线的算法可以叫做拟合算法,那就好搞了,直接百度拟合算法,最终找到一个叫“最小二乘法”的算法,可以求出趋势线!那么下面就说说怎么计算吧(还好数学没有全部还给Teachers,不然公式都看不懂…)

假设我们有一组n个数据的列表需要统计,如:[y1, y2, y3, … yn],这时,我们假设每个数据的x都是间隔单位1,即[x1=1, x2=2, x3=3, … xn=n],这样就可以将该数据描述在一个xy坐标系中了,而最小二乘法可以通过上述的数据算出一个线性方程式:y = bx  + a,这个方程式就是描述上述n个数据的线性趋势线的公式,下面是求a和b的二元一次方程式:

∑(y) = b∑(x) + na
∑(xy) = b∑(xx) + a∑(x)

其中,
∑(y) – n个数据之和,
∑(x) – n个数据对应的x之和,即1~n之和
∑(xx) – 对应的x平方之和
∑(xy) – 对应的x乘y之和

通过上述方程得到a和b的代数式:

b = ( n∑(xy) – ∑(x)∑(y) ) / ( n∑(xx) – ∑(x)∑(x) )
a = ( ∑(y) – b∑(x) ) / n

继续阅读