You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by wa...@apache.org on 2021/09/11 01:01:57 UTC
[echarts-handbook] branch master updated: improve docs of
data-transform and basic-import, resolves apache/echarts#15514.
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 c6253e1 improve docs of data-transform and basic-import, resolves apache/echarts#15514.
c6253e1 is described below
commit c6253e1bdcdc5fc4c1f44152af1d85e75d5bb6af
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Sat Sep 11 09:00:44 2021 +0800
improve docs of data-transform and basic-import, resolves apache/echarts#15514.
---
contents/en/basics/import.md | 30 ++++++++++++++++++++++--------
contents/en/concepts/data-transform.md | 30 +++++++++++++++++++++++++++++-
contents/zh/basics/import.md | 23 ++++++++++++++++++-----
contents/zh/concepts/data-transform.md | 28 ++++++++++++++++++++++++++++
4 files changed, 97 insertions(+), 14 deletions(-)
diff --git a/contents/en/basics/import.md b/contents/en/basics/import.md
index 25d497a..dd60698 100644
--- a/contents/en/basics/import.md
+++ b/contents/en/basics/import.md
@@ -2,7 +2,7 @@
If your development environment uses a package management tool like `npm` or `yarn` and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.
-## NPM Installation of ECharts
+## Install ECharts via NPM
You can install ECharts via npm using the following command
@@ -37,24 +37,28 @@ myChart.setOption({
});
```
-## Importing Required Charts and Components to Have Minimal Bundle.
+## Importing Required Charts and Components to Have Minimal Bundle
The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.
```js
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
-// Import bar charts, all with Chart suffix
+// Import bar charts, all suffixed with Chart
import { BarChart } from 'echarts/charts';
-// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component
+// Import the tooltip, title, rectangular coordinate system, dataset and transform components
+// all suffixed with Component
import {
TitleComponent,
TooltipComponent,
- GridComponent
+ GridComponent,
+ DatasetComponent,
+ TransformComponent
} from 'echarts/components';
// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';
-// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
+// Import the Canvas renderer
+// Note that introducing the CanvasRenderer or SVGRenderer is a required step
import { CanvasRenderer } from 'echarts/renderers';
// Register the required components
@@ -62,6 +66,8 @@ echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
+ DatasetComponent,
+ TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
@@ -97,7 +103,12 @@ import {
// The component types are defined with the suffix ComponentOption
TitleComponentOption,
GridComponent,
- GridComponentOption
+ GridComponentOption,
+ // Dataset
+ DatasetComponent,
+ DatasetComponentOption,
+ // Built-in transform (filter, sort)
+ TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
@@ -108,6 +119,7 @@ type ECOption = echarts.ComposeOption<
| LineSeriesOption
| TitleComponentOption
| GridComponentOption
+ | DatasetComponentOption
>;
// Register the required components
@@ -115,13 +127,15 @@ echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
+ DatasetComponent,
+ TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
-var option: ECOption = {
+const option: ECOption = {
// ...
};
```
diff --git a/contents/en/concepts/data-transform.md b/contents/en/concepts/data-transform.md
index 9ae26d2..5f9df2a 100644
--- a/contents/en/concepts/data-transform.md
+++ b/contents/en/concepts/data-transform.md
@@ -465,7 +465,21 @@ type DimensionName = string;
type DimensionIndex = number;
```
-## The transform "sort"
+> Note that when using [Minimal Bundle](${lang}/basics/import#importing-required-charts-and-components-to-have-minimal-bundle), if you need to use this built-in transform, besides the `Dataset` component, it's required to import the `Transform` component.
+
+```ts
+import {
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components';
+
+echarts.use([
+ DatasetComponent,
+ TransformComponent
+]);
+```
+
+## Sort Transform
Another built-in transform is "sort".
@@ -572,6 +586,20 @@ type DimensionName = string;
type DimensionIndex = number;
```
+> Note that when using [Minimal Bundle](${lang}/basics/import#importing-required-charts-and-components-to-have-minimal-bundle), if you need to use this built-in transform, besides the `Dataset` component, it's required to import the `Transform` component.
+
+```ts
+import {
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components';
+
+echarts.use([
+ DatasetComponent,
+ TransformComponent
+]);
+```
+
## Use External Transforms
Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library [ecStat](https://github.com/ecomfe/echarts-stat) as an example:
diff --git a/contents/zh/basics/import.md b/contents/zh/basics/import.md
index b4d16e2..7658313 100644
--- a/contents/zh/basics/import.md
+++ b/contents/zh/basics/import.md
@@ -46,11 +46,14 @@ myChart.setOption({
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
-// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
- GridComponent
+ GridComponent,
+ DatasetComponent,
+ DatasetComponentOption,
+ TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -62,6 +65,8 @@ echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
+ DatasetComponent,
+ TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
@@ -75,7 +80,7 @@ myChart.setOption({
});
```
-> 需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入`CanvasRenderer`或者`SVGRenderer`作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的`CanvasRenderer`模块。
+> 需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 `CanvasRenderer` 或者 `SVGRenderer` 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 `CanvasRenderer` 模块。
我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。
@@ -97,7 +102,12 @@ import {
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
GridComponent,
- GridComponentOption
+ GridComponentOption,
+ // 数据集组件
+ DatasetComponent,
+ DatasetComponentOption,
+ // 内置数据转换器组件 (filter, sort)
+ TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
@@ -108,6 +118,7 @@ type ECOption = echarts.ComposeOption<
| LineSeriesOption
| TitleComponentOption
| GridComponentOption
+ | DatasetComponentOption
>;
// 注册必须的组件
@@ -115,13 +126,15 @@ echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
+ DatasetComponent,
+ TransformComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
-var option: ECOption = {
+const option: ECOption = {
// ...
};
```
diff --git a/contents/zh/concepts/data-transform.md b/contents/zh/concepts/data-transform.md
index a75a27f..c65a418 100644
--- a/contents/zh/concepts/data-transform.md
+++ b/contents/zh/concepts/data-transform.md
@@ -464,6 +464,20 @@ type DimensionName = string;
type DimensionIndex = number;
```
+> 注意：使用[按需引入](${lang}/basics/import#按需引入-echarts-图表和组件)接口时，如果需要使用该内置转换器，除了 `Dataset` 组件，还需引入 `Transform` 组件。
+
+```ts
+import {
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components';
+
+echarts.use([
+ DatasetComponent,
+ TransformComponent
+]);
+```
+
## 数据转换器 "sort"
"sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ `axis.type: 'category'` ）中显示排过序的数据。例如：
@@ -571,6 +585,20 @@ type DimensionName = string;
type DimensionIndex = number;
```
+> 注意：使用[按需引入](${lang}/basics/import#按需引入-echarts-图表和组件)接口时，如果需要使用该内置转换器，除了 `Dataset` 组件，还需引入 `Transform` 组件。
+
+```ts
+import {
+ DatasetComponent,
+ TransformComponent
+} from 'echarts/components';
+
+echarts.use([
+ DatasetComponent,
+ TransformComponent
+]);
+```
+
## 使用外部的数据转换器
除了上述的内置的数据转换器外，我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中，我们使用第三方库 [ecStat](https://github.com/ecomfe/echarts-stat) 提供的数据转换器。
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org