apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.37k stars 19.61k forks source link

由于浏览器在渲染大量svg节点时性能很差,想把svg节点通过这个库映射为canvas, #18783

Open nanfb opened 1 year ago

nanfb commented 1 year ago

What problem does this feature solve?

对于大量svg节点所造成的性能问题

What does the proposed API look like?

可以提供类似于svgToCanvas一个方法,然后传入svg节点和渲染出来展示的节点等,对节点对象的属性和事件进行遍历,转化为json格式然后通过canvas渲染出来,也支持事件处理,

echarts-bot[bot] commented 1 year ago

@nanfb It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** Because the browser has poor performance when rendering a large number of svg nodes, I want to map svg nodes to canvas through this library. **BODY** ### What problem does this feature solve? Performance issues caused by a large number of SVG nodes ### What does the proposed API look like? It can provide a method similar to svgToCanvas, and then pass in svg nodes and rendered nodes to display, etc., to traverse the properties and events of node objects, convert them into json format and then render them through canvas, and also support event processing.
echarts-bot[bot] commented 1 year ago

@nanfb Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

nanfb commented 1 year ago

@nanfb Please provide a demo for the issue either with Official Editor, CodePen, CodeSandbox or JSFiddle.

This is just a feature suggestion :-)

plainheart commented 1 year ago

目前的 SVG 渲染器采用了 Virtual DOM 实现,通常来说应该性能不会太差。

nanfb commented 1 year ago

目前的 SVG 渲染器采用了 Virtual DOM 实现,通常来说应该性能不会太差。

节点数量非常多,大概有9000+,我使用svg-pan-zoom实现缩放,平移和缩略图展示,较卡顿,但可以接受,,使用canvas性能应该会好一些吧

QingLeiLi commented 1 year ago

@nanfb echarts 本身不是支持 canvas 渲染器吗?