This is an automated email from the ASF dual-hosted git repository.
wangzx pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new ecbb679 tweak the docs of `canvas-vs-svg`
ecbb679 is described below
commit ecbb679861991afadd84c21a451b0ad2dace41b1
Author: plainheart <[email protected]>
AuthorDate: Fri Dec 23 15:53:45 2022 +0800
tweak the docs of `canvas-vs-svg`
---
contents/en/best-practices/canvas-vs-svg.md | 8 +++++---
contents/zh/best-practices/canvas-vs-svg.md | 2 ++
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/contents/en/best-practices/canvas-vs-svg.md
b/contents/en/best-practices/canvas-vs-svg.md
index f28f11f..8c4f9ee 100644
--- a/contents/en/best-practices/canvas-vs-svg.md
+++ b/contents/en/best-practices/canvas-vs-svg.md
@@ -2,11 +2,11 @@
Most browser-side chart libraries use SVG or Canvas as the underlying
renderer. Generally, both technologies are interchangeable and have a similar
effect. However, the difference may be notable in some specific scenarios and
cases. As a result, it's always a hard choice to decide which technology to
render charts.
-Canvas has been used as the renderer of ECharts from the beginning. Since
[v4.0](https://echarts.apache.org/en/changelog.html#v4-0-0), ECharts has
provided the SVG render as an additional option. You can specify the [renderer
parameter](${mainSitePath}api.html#echarts.init) as `'canvas'` or `'svg'` when
initializing the chart.
+Canvas has been used as the renderer of ECharts from the beginning. Since
[v4.0](https://echarts.apache.org/en/changelog.html#v4-0-0), ECharts has
provided the SVG renderer as an additional option. You can specify the
[renderer parameter](${mainSitePath}api.html#echarts.init) as `'canvas'` or
`'svg'` when initializing the chart.
> SVG and Canvas have a significant difference in use. The uniform support for
> both technologies in ECharts is attributed to the abstraction and
> implementation of the underlying library
> [ZRender](https://github.com/ecomfe/zrender).
-## How to Choose a Renderer?
+## How to Choose a Renderer
Generally, Canvas is more suitable for charts with a large number of elements
(heat map, large-scale line or scatter plot in geo or parallel coordinates,
etc.), and with visual
[effect](${mainSitePath}examples/editor.html?c=lines-bmap-effect). However, SVG
has an important advantage: It has less memory usage (which is important for
mobile devices) and won't be blurry when zooming in.
@@ -21,6 +21,8 @@ We strongly welcome
[feedback](https://github.com/apache/echarts/issues/new) fro
Note: Currently, some special effects still relies on Canvas: e.g. [trail
effect](${optionPath}series-lines.effect), [heatmap with blending
effect](${mainSitePath}examples/editor.html?c=heatmap-bmap), etc.
+Since [v5.3.0](${lang}/basics/release-note/5-3-0/#new-svg-renderer), the SVG
renderer got refactored using the Virtual DOM, the performance got improved by
2-10 times and it can even be dozens of times in some specific scenarios! Refer
to [#836](https://github.com/ecomfe/zrender/pull/836) for more details.
+
## How to Use the Renderer
If `echarts` is fully imported in the following way, it already automatically
imported and registered the SVG renderer and the Canvas renderer.
@@ -39,7 +41,7 @@ import { SVGRenderer, CanvasRenderer } from
'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);
```
-Then you can specify the [renderer
parameter](${mainSitePath}api.html#echarts.init) as `'canvas'` or `'svg'` when
initializing the chart.
+Then you can set the [renderer
parameter](${mainSitePath}api.html#echarts.init) when initializing the chart.
```js
// Use the Canvas renderer (default)
diff --git a/contents/zh/best-practices/canvas-vs-svg.md
b/contents/zh/best-practices/canvas-vs-svg.md
index d9dae85..3c1a977 100644
--- a/contents/zh/best-practices/canvas-vs-svg.md
+++ b/contents/zh/best-practices/canvas-vs-svg.md
@@ -21,6 +21,8 @@ ECharts 从初始一直使用 Canvas 绘制图表。而 [ECharts v4.0](https://e
注：当前某些特殊的渲染依然需要依赖
Canvas：如[炫光尾迹特效](${optionPath}series-lines.effect)、[带有混合效果的热力图](${mainSitePath}examples/editor.html?c=heatmap-bmap)等。
+我们在 [v5.3.0](${lang}/basics/release-note/5-3-0/#全新的-svg-渲染器) 中使用虚拟 DOM 技术对 SVG
渲染器进行了重构，从而使其渲染性能提升了 2~10 倍，在某些特殊场景中甚至能有数十倍的提升！参见
[#836](https://github.com/ecomfe/zrender/pull/836)。
+
## 如何使用渲染器
如果是用如下的方式完整引入`echarts`，代码中已经包含了 SVG 渲染器和 Canvas 渲染器
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
