[echarts-handbook] branch master updated: en: add import

[sh...@apache.org]

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 8f7e229  en: add import
8f7e229 is described below

commit 8f7e229688b864274104b6dd3102d017c2c6a5c6
Author: pissang <bm...@gmail.com>
AuthorDate: Sat Jul 24 16:52:28 2021 +0800

    en: add import
---
 contents/en/basics/import.md | 120 +++++++++++++++++++++++++++++++++++++++++++
 contents/zh/basics/import.md |  69 +++++++++++++------------
 2 files changed, 157 insertions(+), 32 deletions(-)

diff --git a/contents/en/basics/import.md b/contents/en/basics/import.md
new file mode 100644
index 0000000..b827c96
--- /dev/null
+++ b/contents/en/basics/import.md
@@ -0,0 +1,120 @@
+# Use Apache ECharts with bundler and NPM
+
+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
+
+You can install ECharts via npm using the following command
+
+```shell
+npm install echarts --save
+```
+
+## Introduce ECharts
+
+```js
+import * as echarts from 'echarts';
+
+// initialize the echarts instance
+var myChart = echarts.init(document.getElementById('main'));
+// Draw the chart
+myChart.setOption({
+  title: {
+    text: 'ECharts Getting Started Example'
+  },
+  tooltip: {},
+  xAxis: {
+    data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
+  },
+  yAxis: {},
+  series: [
+    {
+      name: 'sales',
+      type: 'bar',
+      data: [5, 20, 36, 10, 10, 20]
+    }
+  ]
+});
+```
+
+## 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 { BarChart } from 'echarts/charts';
+// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent
+} from 'echarts/components';
+// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step
+import { CanvasRenderer } from 'echarts/renderers';
+
+// Register the required components
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  CanvasRenderer
+]);
+
+// The next step is the same as before, initialize the chart and set the configuration items
+var myChart = echarts.init(document.getElementById('main'));
+myChart.setOption({
+  // ...
+});
+```
+
+> Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import `CanvasRenderer` or `SVGRenderer` as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the `CanvasRenderer` module, which is not needed.
+
+The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.
+
+## Minimal Option Type in TypeScript
+
+For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal `EChartsOption` type. This stricter type can effectively help you check for missing components or charts.
+
+```ts
+import * as echarts from 'echarts/core';
+import {
+  BarChart,
+  // The series types are defined with the SeriesOption suffix
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption
+} from 'echarts/charts';
+import {
+  TitleComponent,
+  // The component types are defined with the suffix ComponentOption
+  TitleComponentOption,
+  GridComponent,
+  GridComponentOption
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
+// Combine an Option type with only required components and charts via ComposeOption
+type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | GridComponentOption
+>;
+
+// Register the required components
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  CanvasRenderer
+]);
+
+var option: ECOption = {
+  // ...
+};
+```
diff --git a/contents/zh/basics/import.md b/contents/zh/basics/import.md
index db50498..5bb7297 100644
--- a/contents/zh/basics/import.md
+++ b/contents/zh/basics/import.md
@@ -45,29 +45,29 @@ myChart.setOption({
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core';
 // 引入柱状图图表，图表后缀都为 Chart
-import {
-    BarChart
-} from 'echarts/charts';
+import { BarChart } from 'echarts/charts';
 // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
 import {
-    TitleComponent,
-    TooltipComponent,
-    GridComponent
+  TitleComponent,
+  TooltipComponent,
+  GridComponent
 } from 'echarts/components';
 // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import {
-    CanvasRenderer
-} from 'echarts/renderers';
+import { CanvasRenderer } from 'echarts/renderers';
 
 // 注册必须的组件
-echarts.use(
-    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
-);
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  CanvasRenderer
+]);
 
 // 接下来的使用就跟之前一样，初始化图表，设置配置项
 var myChart = echarts.init(document.getElementById('main'));
 myChart.setOption({
-    ...
+  // ...
 });
 ```
 
@@ -82,34 +82,39 @@ myChart.setOption({
 ```ts
 import * as echarts from 'echarts/core';
 import {
-    BarChart,
-    // 系列类型的定义后缀都为 SeriesOption
-    BarSeriesOption,
-    LineChart,
-    LineSeriesOption
+  BarChart,
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineChart,
+  LineSeriesOption
 } from 'echarts/charts';
 import {
-    TitleComponent,
-    // 组件类型的定义后缀都为 ComponentOption
-    TitleComponentOption,
-    GridComponent,
-    GridComponentOption
+  TitleComponent,
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  GridComponent,
+  GridComponentOption
 } from 'echarts/components';
-import {
-    CanvasRenderer
-} from 'echarts/renderers';
+import { CanvasRenderer } from 'echarts/renderers';
 
 // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
 type ECOption = echarts.ComposeOption<
-  BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | GridComponentOption
 >;
 
 // 注册必须的组件
-echarts.use(
-    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
-);
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  BarChart,
+  CanvasRenderer
+]);
 
 var option: ECOption = {
-    ...
-}
+  // ...
+};
 ```

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org