最近给lc集团做了一个管理平台的项目,其中需要使用类似大屏展示的一个页面,考虑到图表展示,于是使用了echarts来做。
下图是其中一个图表,虽然看起来简单,但是实现还是颇费周折的。
这个图的需求是柱子和折线只显示至当前系统日期,两个气泡分别显示最大预计和最小预计,并显示在图表的最后一天,与当前日期上的累计进展气泡相连。
第一个难点:红色气泡和蓝色气泡的位置,使用coord:[x,y]来定位,x获取的是最大天数,也就是数据的总长度,比如30,31或29,28;y获取的是最大预计或最小预计的值,以此来动态定位两个气泡的位置。
第二个难点:绿色气泡与红色气泡和蓝色气泡之间的连线,假设a为绿色气泡的值,b为红色气泡的值,len为两个气泡之间的天数,也就是长度。那么,show = (b-a)/len就是当天往后的每一天的差平均值,再使用 i,len+1遍历,向需要展示的数组arr.push (show*i+a)。