[apache/echarts]能否增加对 type=line 的图的增量渲染

2024-07-16 928 views
2
Version

4.6.0

Steps to reproduce

能否增加对 type=line 的图的增量渲染

What is expected?

希望能增加对 type=line 的图的增量渲染

What is actually happening?

目前并不支持对 type=line 的增量渲染,采用 sample 的方式又不好用,严重损害原始数据的展示

回答

1

@AricZhu 可不可以说说,sample 方式,在您们场景中 “损害原始数据”,不知是否有改进的空间。

@pissang 其实对于折线图,或许也可以增加一种选择,当数据量大的时候,退化成点,应用上增量渲染?

9

@100pah @pissang echarts 的增量渲染技术能够有效的提升海量数据下的可视化交互体验,确实非常的惊艳,相比于 highcharts 用 webgl 重写底层库,从而达到百万数据量的秒级渲染来说,我觉得增量渲染技术更有可扩展性(highcharts 在千万数据量下就不行了),并且用户体验也更好。整体使用下来给我的感觉和 google earth 差不多的效果(虽然不知道 web 版的google earth 是不是也用的增量渲染技术)。 而对于 普通的折线图,应该是最常用的图表之一了,所以非常希望能增加对普通折线图的增量渲染

2

@AricZhu 增量渲染主要是针对海量图形的绘制的,折线图的图形其实只有一条线,所以没有增量渲染的配置。

现在折线图的性能主要是在数据的处理和折线的绘制上(canvas绘制宽度 > 1 px 的线其实很慢)。这个之前采用了数据采样(sampling)来减少需要处理的数据以及减少绘制折线的复杂度。但是之前采用的采样算法比较简单(可能就最近点采样,平滑采样),会导致一些极值在采样完丢失,这个后续可以加入采用一些类似保边滤波的算法来优化这种情况。

@100pah 刚想了想应该可以把折线拆成很多段折线分开绘制改造成增量渲染的方式(可能比退化成点效果好点,点的话占用图形太多了)。

之前也有看到过一些关于折线图性能问题的反馈,目前计划在正在开发的 5.0 中做折线图的集中优化。@AricZhu 不知道是否方便把你的 case 发我们方便 benchmark

4

如果能实现将折线图拆成多段进行增量渲染的话,那真的太好了。非常期待这个功能的上线。 不过由于我们的业务数据都在公司内网,所以可能不太方便导出来,抱歉啊

9

@AricZhu 了解,那等我们功能上线后还请帮忙测试下

7

嗯嗯,一定一定。非常期待这个功能的上线

0

@AricZhu 我们在 echarts 5.0 中对折线图性能做了重点的优化,如果使用静态的 Float64Array 作为数据源,可以做到 1s 内渲染完一千万的数据,已经不需要增量渲染了。例子链接 https://jsfiddle.net/ob81ap3q/

另外一些这次优化相关的链接 https://github.com/apache/incubator-echarts/pull/13314 https://github.com/apache/incubator-echarts/pull/13337

另外新增加的 LTTB 采样应该能解决你说的“损害了原始数据的展示”的问题