首页 新闻 赞助 找找看

Echarts——实际信息系统应用会遇到的一个问题

0
悬赏园豆:10 [已解决问题] 解决于 2019-09-04 08:37

Echarts在实际系统应用中,
(Echarts折线图同时加载多种数据(也就是有多条线)时,共用一条时间轴,因此会发生时间轴长度大于每种数据的数据量(长度),导致数据与时间轴对应关系发生错乱)
折线图:首先要清楚Echarts时根据data数组的长度去渲染数据的也就是xAxis :[] 与 series : []所对应的数据长度去渲染x轴与数据的映射关系的

如果之前做项目时第一批数据正常显示在图表上,当有新的数据添加到数据库时,而且新数据与之前的数据没有关联,这样应该会多出一条线来表示这个数据的变化,这时会发生新添加的数据所对应的线上的每一个点所对应的时间轴与数据库不匹配,原因就是新添加的数据,当添加到数据库映射到图表的时候series : [data]中某一个data(也就是新添加的数据)长度不足,这样渲染的时候就会从x轴最前端也就是下标0的位置开始渲染,这时候问题就产生了,如下图:

新数据长度为2,老数据长度为7,但是新数据是在周二三四反正不是周一录入的,但是还是会显示到最前端,时间就无法对应,试了一下只需要在data:[]中添加英文逗号,每个英文逗号就会默认是一条数据为空的,可以当作占位符来理解。如果是在周六周日两天录入的两条数据,添加逗号或者0:如下图是添加逗号的:添加0的唯一不同就是会把所有的之前时间节点的数据从0连接起来

问题好像解决了,

①但是如果数据库中的数据是一直在变化,谁也不知道要在什么时间节点中会录入这条数据,这条数据是全新数据,还是老数据的更新,如果是全新的数据线就在数据的前面添加逗号,但是添加多少个呢?

②还或者是之前一直在录入的A数据线忽然有一个时间段的空白时间节点,而其他的数据线正常每日录入,当A数据线再次录入数据时,数据依然会紧贴着之前录入的时间节点去进行渲染,我们如何判断中间会有几个时间节点的空白然后去动态的填充0进去,让这条线的所有数据对应数据库中所对应的时间呢?

这是都是纯前端的问题,后端数据并没有任何错误。目前呢我并没有想到一个动态的一劳永逸的解决填充0或者填充逗号的方法。

或者我的思路是错的,更或者Echarts本身就拥有解决这个bug的文档,当时很遗憾我没有看到,更更有甚者是这个Echarts从最初的使用上就是用错了方式。

反正:求大神指点:迷津!!先行告谢!!

myzy的主页 myzy | 初学一级 | 园豆:123
提问于:2019-07-27 22:57
< >
分享
最佳答案
0

这种数据为什么和后台没有关系????假如你要的是一周的数据,后台给你是周六和周日的值,那他给你返回数据的时候就应该把周一到周五的值全部填充为0,如果后台不处理你处理的话。你也没有固定的时间段啊,给你的两个值你也不知道位于一周的那两天啊,处理起来会很麻烦。需要各种判断下标的位置,然后用数组的方法去填充。我们的后台说很好处理这种为空数据

收获园豆:10
闪存第一帅 | 菜鸟二级 |园豆:468 | 2019-07-30 15:23

谢谢,我试一下

myzy | 园豆:123 (初学一级) | 2019-08-10 14:14
其他回答(1)
0

数据更新有几种选项设置: setOption(option, notMerge, lazUpdate)
可以设置是否合并数据

ycyzharry | 园豆:25639 (高人七级) | 2019-07-29 00:54
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册