Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AricZhu opened this issue Mar 8, 2020 · 9 comments
Closed

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

AricZhu opened this issue Mar 8, 2020 · 9 comments

Comments

@AricZhu
Copy link

AricZhu commented Mar 8, 2020

Version

4.6.0

Steps to reproduce

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

What is expected?

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

What is actually happening?

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

@echarts-bot
Copy link

echarts-bot bot commented Mar 8, 2020

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

@echarts-bot echarts-bot bot added bug pending We are not sure about whether this is a bug/new feature. waiting-for: community labels Mar 8, 2020
@100pah
Copy link
Member

100pah commented Mar 8, 2020

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

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

@100pah 100pah added this to the TBD milestone Mar 8, 2020
@AricZhu
Copy link
Author

AricZhu commented Mar 9, 2020

关于采用 sample 方式损害了原始数据的展示,可以看如下例子:左侧是原始数据展示,右侧是开启 sample 后的数据展示。从两幅图中可以明显的看出显示的不同,对于数据量更大的场景就更加明显了。所以我感觉对于大数据量的场景采用 sample 的方式并不是一个比较好的解决方式。

origin vs sample

@AricZhu
Copy link
Author

AricZhu commented Mar 9, 2020

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

@pissang pissang modified the milestones: TBD, 5.0.0 Mar 11, 2020
@pissang
Copy link
Contributor

pissang commented Mar 11, 2020

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

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

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

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

@AricZhu
Copy link
Author

AricZhu commented Mar 11, 2020

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

@pissang
Copy link
Contributor

pissang commented Mar 12, 2020

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

@AricZhu
Copy link
Author

AricZhu commented Mar 14, 2020

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

@pissang
Copy link
Contributor

pissang commented Nov 19, 2020

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

另外一些这次优化相关的链接 #13314 #13337

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants