You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/12/26 02:17:24 UTC
[incubator-echarts-doc] branch master updated: fix typos and
improve grammar on renderer section
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/master by this push:
new 88c9808 fix typos and improve grammar on renderer section
new 00578d6 Merge pull request #146 from villebro/villebro/renderer
88c9808 is described below
commit 88c9808668a6d33f98d45e4983d71b1ff98913a8
Author: Ville Brofeldt <vi...@gmail.com>
AuthorDate: Fri Dec 25 18:50:58 2020 +0200
fix typos and improve grammar on renderer section
---
en/tutorial/renderer.md | 30 +++++++++++++++---------------
1 file changed, 15 insertions(+), 15 deletions(-)
diff --git a/en/tutorial/renderer.md b/en/tutorial/renderer.md
index 3546f00..427e034 100644
--- a/en/tutorial/renderer.md
+++ b/en/tutorial/renderer.md
@@ -2,46 +2,46 @@
# Render by Canvas or SVG
-Most of browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of Apache ECharts (incubating)<sup>TM</sup>, they are usually alternative, without critical differences. But in some environment and scenarios, they show notable differences in performance or functionality.
+Most browser-side charting libraries use SVG or Canvas as their underlying renderer. In the scope of Apache ECharts (incubating)<sup>TM</sup>, they are usually interchangeable, without critical differences. However, in some cases, they show notable differences in performance or functionality.
-ECharts has been using Canvas as its renderer (use VML for IE8-) from the begining. Now, from [ECharts v3.8](https://github.com/apache/incubator-echarts/releases) we provide a SVG renderer (beta version) as another option. Either of them can be used by specifing parameter [renderer](api.html#echarts.init) as `'canvas'` or `'svg'` when initailizing a chart instance.
+ECharts has been using Canvas as its renderer (use VML for IE8-) from the beginning. As of [ECharts v3.8](https://github.com/apache/incubator-echarts/releases) we provide an SVG renderer (beta version) as another option. Either of them can be used by specifing parameter [renderer](api.html#echarts.init) as `'canvas'` or `'svg'` when initailizing a chart instance.
-> That both SVG and Canvas, who are very different in use, are able to be supported in ECharts owns to the abstruction in its underlying render library [zender](https://github.com/ecomfe/zrender), where they are implemented as a Canvas renderer and a alternative SVG renderer.
+> Both SVG and Canvas, which are very different rendering implementations, are supported in ECharts by leveraging the Canvas and SVG renderers offered by the [zender](https://github.com/ecomfe/zrender) library.
## How to make a choice?
-Generally speaking, Canvas is suitable for the case that there is a large amount of grpahic elements (which basically due to a large amount of data), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. Besides it supports some [special visual effect](${websitePath}/examples/en/editor.html?c=lines-bmap-effect). But in some other scenarios SVG has some critical advantages: it consumes less memory then Canvas (especially in mobile device), and gives better [...]
+Generally speaking, Canvas is suitable for cases where there is a large amount of graphical elements (usually due to a large amount of data points), like heatmap and lines or scatter plot with large data in geo or parallel coordinates. In addition, it supports some [special visual effect](${websitePath}/examples/en/editor.html?c=lines-bmap-effect) not supported by SVG. However, in some other scenarios SVG has some critical advantages: it consumes less memory than Canvas (especially in mo [...]
+
+Below is a comparison of frame rate during the initial animation stage when rendering line, bar, pie charts with the Canvas renderer and the SVG renderer:
~[90%x400](${galleryViewPath}doc-example/canvas-vs-svg-en&reset=1)
-In the scenarios above, the SVG renderer has provided a better FPS performance in mobile devices. In some other scenarios, where big data amount or certain kinds of human interactions exists, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provides the ability to optimize the performance according to the requirements of each developer.
+In the example above, the SVG renderer provides better FPS performance in mobile devices. In some other scenarios with large amounts of data or with certain kinds of user interaction, the SVG renderer is still not as good as the Canvas renderer in performance, but two options provide the ability to optimize the performance according to the requirements of each developer.
How to make a choice? These factors, hardware and software environment, data amount and functional requirements, should be considered.
-+ If the environment is not harsh and the data amount is not large, both of them can be used, no need to pay attention too much.
-+ If some harsh environment caused performance problem, we can attempt to get better result by choose appropriate renderer.
- + If lots of echarts instances have to be created and it cause browser crash (it probably caused by that the large memory consumption of those Canvas instances is beyond the limit of some mobile devices) we can try the SVG renderer. Or, generally, if charts runs in some old Android devices, or if we are using some kind of charts like [liquidfill](https://ecomfe.github.io/echarts-liquidfill/example/), the SVG renderer probably gives a better performance.
++ When not constrained by hardware/software, and the data amount is not large, both should provide equally satisfactory results.
++ When encountering performance issues, we can attempt to get better result by choose appropriate renderer.
+ + If lots of ECharts instances have to be created, and it causes the browser crash (probably caused by that the large memory consumption) we can try the SVG renderer. Or, generally, when running on some old Android devices, or if we are using some kind of charts like [liquidfill](https://ecomfe.github.io/echarts-liquidfill/example/), the SVG renderer probably gives a better performance.
+ If visualizing a large amount of data, or complicated human interactions with data is required, the Canvas renderer works better currently.
-Therefore [feedback](https://github.com/apache/incubator-echarts/issues/new) of experiences and usage scenarios are strongly welcomed, which will make the these renderers better and better.
-
+Therefore [feedback](https://github.com/apache/incubator-echarts/issues/new) of experiences and usage scenarios are strongly welcomed, which will help improve the these renderers.
Notice: The features of rich text, shadow and texture have not been supported yet in the current beta version of the SVG renderer.
-
## How to use specify a renderer?
-ECharts uses Canvas by default. If user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.
+ECharts uses Canvas by default. If a user intends to use the SVG renderer, the module of the SVG renderer should be included in ECharts bundle.
+ In the [pre-build](https://www.jsdelivr.com/package/npm/echarts) of ECharts, the SVG renderer has been included in [common version](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.common.min.js) and [complete version](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js). But not in [simple version](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.simple.min.js).
-+ If [build ECharts online](${websitePath}/en/builder.html), the checkbox "SVG Renderer" should be checked.
-+ If [build ECharts offline](tutorial.html#Create%20Custom%20Build%20of%20ECharts), the module of the SVG renderer should be imported:
++ When [building ECharts online](${websitePath}/en/builder.html), the checkbox "SVG Renderer" should be checked.
++ When [buildin ECharts offline](tutorial.html#Create%20Custom%20Build%20of%20ECharts), the SVG renderer module should be imported:
```js
import 'zrender/lib/svg/svg';
```
-Then wen can specify renderer by [parameter](api.html#echarts.init):
+Then we can specify renderer by [parameter](api.html#echarts.init):
```js
// Use the Canvas renderer (default).
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org