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 2021/07/21 10:04:04 UTC
[echarts-handbook] branch master updated: en: update aria and
canvas-svg
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/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new edfa090 en: update aria and canvas-svg
edfa090 is described below
commit edfa090c8312de996ff9ecb46f017769e55451b7
Author: pissang <bm...@gmail.com>
AuthorDate: Wed Jul 21 18:03:49 2021 +0800
en: update aria and canvas-svg
---
contents/en/best-practice/aria.md | 45 ++++++++++++--------------
contents/en/best-practice/canvas-vs-svg.md | 51 +++++++++++++++---------------
contents/zh/best-practice/aria.md | 4 +--
contents/zh/best-practice/canvas-vs-svg.md | 2 +-
4 files changed, 48 insertions(+), 54 deletions(-)
diff --git a/contents/en/best-practice/aria.md b/contents/en/best-practice/aria.md
index 60703b2..3d57c33 100644
--- a/contents/en/best-practice/aria.md
+++ b/contents/en/best-practice/aria.md
@@ -8,31 +8,30 @@ About the configuration item:
```js
option = {
- aria: {
- show: true
- },
- title: {
- text: 'Referrer of a User',
- x: 'center'
- },
- series: [
- {
- name: 'Referrer',
- type: 'pie',
- data: [
- { value: 335, name: 'Direct Visit' },
- { value: 310, name: 'Email Marketing' },
- { value: 234, name: 'Union Ad' },
- { value: 135, name: 'Video Ad' },
- { value: 1548, name: 'Search Engine' }
- ]
- }
- ]
+ aria: {
+ show: true
+ },
+ title: {
+ text: 'Referrer of a User',
+ x: 'center'
+ },
+ series: [
+ {
+ name: 'Referrer',
+ type: 'pie',
+ data: [
+ { value: 335, name: 'Direct Visit' },
+ { value: 310, name: 'Email Marketing' },
+ { value: 234, name: 'Union Ad' },
+ { value: 135, name: 'Video Ad' },
+ { value: 1548, name: 'Search Engine' }
+ ]
+ }
+ ]
};
```
-<iframe width="700" height="300" src="${exampleViewPath}doc-example/aria-pie&reset=1&edit=1"></iframe>
-
+<md-example src="doc-example/aria-pie"></md-example>
There will be an `area-label` attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:
@@ -44,8 +43,6 @@ This is a chart about "Referrer of a User" with type Pie chart named Referrer. T
For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.
-
-
Under this circumstance, user can define the overall description by [aria.description](${optionPath}aria.description) configuration item.
## Customize Template Description
diff --git a/contents/en/best-practice/canvas-vs-svg.md b/contents/en/best-practice/canvas-vs-svg.md
index 0b53b15..53fa1ab 100644
--- a/contents/en/best-practice/canvas-vs-svg.md
+++ b/contents/en/best-practice/canvas-vs-svg.md
@@ -8,46 +8,45 @@ Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginnin
## 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](examples/editor.html?c=lines-bmap-effect). However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), higher rendering performance, no blur when using the browser zoom. For instance, we used Canvas and SVG renderer in some hardware environment to draw the ch [...]
+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), no blur when using the browser zoom.
-<iframe width="600" height="400" src="${exampleViewPath}doc-example/canvas-vs-svg&reset=1&edit=1"></iframe>
+The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.
-In those scenarios, SVG renderer has better overall performance than Canvas in mobile devices. This is not a comprehensive evaluation for sure, in other scenarios of huge data volume, the performance of Canvas is still better than SVG. We keep both renderers to provide a wider space for developers to optimize their program.
+- In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.
+- In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
+ - In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the [LiquidFill chart](https://ecomfe.github.io/echarts-liquidfill/example/).
+ - For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.
-When choosing renderer, try to consider hardware and software environment, data amount, and functional requirement:
-+ If the environment is not harsh, and the data volume is not big (eg. Business report in PC), you can choose both of them without tangling.
-+ In some harsh environment, try to consider these points:
+We strongly welcome [feedback](https://github.com/apache/echarts/issues/new) from developers on their experiences and scenarios to help us make better optimizations.
- + To create a huge amount of instance in a crash-prone browser (It perhaps because the number of Canvas exceeded the capacity of the phone.), Try to use SVG renderer to improve. Generally, if the chart is running on a low-end Android phone, or you are using some specific chart like [liquidfill](https://ecomfe.github.io/echarts-liquidfill/example/), the SVG render will perform better.
- + Use Canvas while visualizing a large amount of data.
+Note: Currently, some special rendering still relies on Canvas: e.g. [trail effect](${optionPath}series-lines.effect), [heatmap with blending effect](${mainSitePath}/examples/editor.html?c=heatmap-bmap), etc.
-We strongly welcome developers to give us a [feedback](https://github.com/apache/echarts/issues/new). It will be very helpful for us to optimize ECharts. Thank you!
+## How to Use the Renderer
-Note: except some specific charts rely on Canvas (eg. [series lines effect](option.html#series-lines.effect), [heatmap bmap](examples/editor.html?c=heatmap-bmap), etc.), most of the remaining render are supported by SVG. SVG can not support rich text, texture, and shadow right now.
+If `echarts` is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer
-## Suggestion for Using Renderer
-
-ECharts uses Canvas by default. You must include the SVG renderer module if you intend to try SVG.
-
-- ECharts
-
-- In [pre-built](https://www.jsdelivr.com/package/npm/echarts) of ECharts，[common](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.common.min.js) version and [complete](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js) version included SVG renderer that can be used directly. The [simple](https://cdn.jsdelivr.net/npm/echarts/dist/echarts.simple.min.js) version did not include SVG renderer.
-- If [build ECharts online](builder.html), tick the "SVG Renderer" checkbox.
-- If [build ECharts offline](tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts), import the SVG renderer module:
+```js
+import * as echarts from 'echarts';
+```
+If you are using treeshakable import as described in [Introducing Apache ECharts in your project](${lang}/basics/import), you will need to import the required renderers manually
```js
-import 'zrender/lib/svg/svg';
+import * as echarts from 'echarts/core';
+// You can use only the renderers you need
+import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([SVGRenderer, CanvasRenderer]);
```
-Then you can define the [parameter](api.html#echarts.init) of renderer type while initializing it:
+Then, we can [pass in the parameter](${mainSitePath}/api.html/api.html#echarts.init) when initializing the chart instance in code to select the renderer.
```js
-// Use Canvas renderer（default）
-var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
-// equivalent to:
+// Use the Canvas renderer (default)
+var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
+// Equivalent to.
var chart = echarts.init(containerDom);
-// Use SVG renderer
-var chart = echarts.init(containerDom, null, {renderer: 'svg'});
+// using the SVG renderer
+var chart = echarts.init(containerDom, null, { renderer: 'svg' });
```
diff --git a/contents/zh/best-practice/aria.md b/contents/zh/best-practice/aria.md
index a232bb4..6e1053d 100644
--- a/contents/zh/best-practice/aria.md
+++ b/contents/zh/best-practice/aria.md
@@ -31,7 +31,7 @@ option = {
};
```
-<md-example src="doc-example/aria-pie&reset=1&edit=1"></md-example>
+<md-example src="doc-example/aria-pie"></md-example>
生成的图表 DOM 上，会有一个 `aria-label` 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：
@@ -43,8 +43,6 @@ option = {
对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。
-
-
这时候，用户可以通过 [aria.description](${optionPath}aria.description) 配置项指定图表的整体描述。
## 定制模板描述
diff --git a/contents/zh/best-practice/canvas-vs-svg.md b/contents/zh/best-practice/canvas-vs-svg.md
index 14f2cad..3d34ba2 100644
--- a/contents/zh/best-practice/canvas-vs-svg.md
+++ b/contents/zh/best-practice/canvas-vs-svg.md
@@ -19,7 +19,7 @@ ECharts 从初始一直使用 Canvas 绘制图表。而 [ECharts v4.0](https://g
我们强烈欢迎开发者们[反馈](https://github.com/apache/echarts/issues/new)给我们使用的体验和场景，帮助我们更好的做优化。
-注：当前某些特殊的渲染依然需要依赖 Canvas：如[炫光尾迹特效](${optionPath}series-lines.effect)、[带有混合效果的热力图](examples/editor.html?c=heatmap-bmap)等。
+注：当前某些特殊的渲染依然需要依赖 Canvas：如[炫光尾迹特效](${optionPath}series-lines.effect)、[带有混合效果的热力图](${mainSitePath}/examples/editor.html?c=heatmap-bmap)等。
## 如何使用渲染器
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org