Merge pull request #384 from apache/dev-5.5.0

doc: add doc for 5.5.0 pull requets

en/api/echarts.md

@@ -36,7 +36,7 @@ Creates an ECharts instance, and returns an [echartsInstance](~echartsInstance).
 
     + `devicePixelRatio` Ratio of one physical pixel to the size of one device independent pixels. Browser's `window.devicePixelRatio` is used by default.
     + `renderer`  Supports `'canvas'` or `'svg'`. See [Render by Canvas or SVG](${handbookPath}best-practices/canvas-vs-svg).
-    + `ssr` Whether to use server-side rendering. Only available in SVG rendering mode. When enabled, it will no longer render automatically every frame, you have to use the [renderToSVGString](~echartsInstance.renderToSVGString) method to get the rendered SVG string.
+    + `ssr` Whether to use server-side rendering. Only available in SVG rendering mode. When enabled, it will no longer render automatically every frame, you have to use the [renderToSVGString](~echartsInstance.renderToSVGString) method to get the rendered SVG string. See [Server Side Rendering](${handbookPath}how-to/cross-platform/server).
     + `useDirtyRect` Enable dirty rectangle rendering or not, `false` by default. See [New features in ECharts 5](${handbookPath}basics/release-note/v5-feature).
     + `useCoarsePointer` Whether to expand the response area when interacting with elements. `null` means enabling for mobile devices; `true` means always enabling; `false` means always disabling. See [Coarse Pointer](${handbookPath}how-to/interaction/coarse-pointer) for more information.
     + `pointerSize` Size of expanded interaction size in pixels. It should be used along with `opts.useCoarsePointer`.

en/option/component/angle-axis.md

@@ -19,10 +19,22 @@ The index of angle axis in Polar Coordinate. The first axis is used by default.
 
 Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.
 
-The following shows an example with startAngle of 45 deg.
+The following shows an example with `startAngle` of 45 deg.
 
 ~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
 
+## endAngle(number) = null
+
+<ExampleUIControlAngle default="null" min="-360" max="360" step="1" />
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Ending angle of axis. `null` by default, standing for a whole circle.
+
+The following shows an example with `endAngle` of -180 deg.
+
+~[400x400](${galleryViewPath}doc-example/polar-end-angle&edit=1&reset=1)
+
 ## clockwise(boolean) = true
 
 <ExampleUIControlBoolean default="true" />

en/option/component/axis-common.md

@@ -147,6 +147,62 @@ Whether to show the label of the min tick. Optional values: `true`, `false`, `nu
 
 Whether to show the label of the max tick. Optional values: `true`, `false`, `null`. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.
 
+{{ if: ${componentType} === 'xAxis' }}
+
+##${prefix} alignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Alignment of the label of the min tick. If set to be `null`, it's the same with other labels .
+
+Options are:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+##${prefix} alignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Alignment of the label of the max tick. If set to be `null`, it's the same with other labels. See [align](~${componentType}.axisLabel.align).
+
+Options are:
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+{{ /if }}
+
+{{ if: ${componentType} === 'yAxis' }}
+
+##${prefix} verticalAlignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Vertical alignment of the label of the min tick. If set to be `null`, it's the same with other labels. See [verticalAlign](~${componentType}.axisLabel.verticalAlign).
+
+Options are:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+##${prefix} verticalAlignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+Vertical alignment of the label of the max tick. If set to be `null`, it's the same with other labels. See [verticalAlign](~${componentType}.axisLabel.verticalAlign).
+
+Options are:
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+{{ /if }}
+
 ##${prefix} hideOverlap(boolean)
 
 <ExampleUIControlBoolean />

en/option/component/tooltip.md

@@ -199,6 +199,8 @@ Useful when tooltip is cut because of `'overflow: hidden'` set on outer dom of c
     version = "4.7.0"
 ) }}
 
+(DEPRECATED, use [appendTo](~tooltip.appendTo) instead.)
+
 Whether to append the tooltip DOM element as a child of the `<body>` of the HTML page, when using [renderMode](~tooltip.renderMode) `'html'`.
 
 By default `false`, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with `overflow: hidden`. This case could also be resolved by setting [tooltip.confine](~tooltip.confine), but it might not suitable for all scenarios.
@@ -207,6 +209,20 @@ Here we provide `appendToBody: true` to auto append the tooltip element to `<bod
 
 Note that it also works when CSS transform used.
 
+## appendTo() = Function | HTMLElement | string | null
+
+{{ use: partial-version(
+    version = "5.5.0"
+) }}
+
+Which DOM element to append the tooltip to. Only avaiable when using [renderMode](~tooltip.renderMode) `'html'`.
+
+The default value is `null``, which means that the tooltip's DOM node will be added as a descendant node of the chart’s DOM container. However, this approach can cause the tooltip to be truncated if it extends beyond the container, due to ancestors of the chart's DOM container having overflow: hidden set. This issue can be partially addressed using tooltip.confine, but it may not cover all scenarios.
+
+For such scenarios, `appendTo` can be specified. When it is a function, the interface is in the form of `(chartContainer: HTMLElement) => HTMLElement | undefined | null`, which means it returns the node that the tooltip's DOM node should be added to. Returning `undefined` or `null` indicates that the default logic described above should be used. Returning an HTMLElement means that it should be added under that node.
+
+Note that it also works when CSS transform used.
+
 ## className(string)
 
 <ExampleUIControlText />

zh/api/echarts.md

@@ -37,7 +37,7 @@
 
     + `devicePixelRatio`设备像素比，默认取浏览器的值`window.devicePixelRatio`。
     + `renderer` 渲染模式，支持`'canvas'`或者`'svg'`。参见 [使用 Canvas 或者 SVG 渲染](${handbookPath}best-practices/canvas-vs-svg)。
-    + `ssr` 是否使用服务端渲染，只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染，必须要调用 [renderToSVGString](~echartsInstance.renderToSVGString) 方法才能得到渲染后 SVG 字符串。
+    + `ssr` 是否使用服务端渲染，只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染，必须要调用 [renderToSVGString](~echartsInstance.renderToSVGString) 方法才能得到渲染后 SVG 字符串。参见[服务端渲染 ECharts 图表](${handbookPath}how-to/cross-platform/server)。
     + `useDirtyRect`是否开启脏矩形渲染，只有在 Canvas 渲染模式有效，默认为`false`。参见 [ECharts 5 新特性](${handbookPath}basics/release-note/v5-feature)。
     + `useCoarsePointer` 是否扩大可点击元素的响应范围。`null` 表示对移动设备开启；`true` 表示总是开启；`false` 表示总是不开启。参见[增加交互响应范围](${handbookPath}how-to/interaction/coarse-pointer)。
     + `pointerSize` 扩大元素响应范围的像素大小，配合 `opts.useCoarsePointer`使用。

zh/option/component/angle-axis.md

@@ -90,6 +90,18 @@ const option = {
 
 ~[400x400](${galleryViewPath}doc-example/polar-start-angle&edit=1&reset=1)
 
+## endAngle(number) = null
+
+<ExampleUIControlAngle default="null" min="-360" max="360" step="1" />
+
+结束刻度的角度，默认为 `null`，表示一整个圆。
+
+{{ use: partial-version(version = '5.5.0') }}
+
+如下示例是 endAngle 为 -180 的效果：
+
+~[400x400](${galleryViewPath}doc-example/polar-end-angle&edit=1&reset=1)
+
 ## clockwise(boolean) = true
 
 <ExampleUIControlBoolean default="true" />

zh/option/component/axis-common.md

@@ -145,6 +145,62 @@ X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一
 
 是否显示最大 tick 的 label。可取值 `true`, `false`, `null`。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）。
 
+{{ if: ${componentType} === 'xAxis' }}
+
+##${prefix} alignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最小的坐标刻度标签的对齐方式。如果设置为 `null`，则和其他标签一致。参见 [align](~${componentType}.axisLabel.align)。
+
+可选：
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+##${prefix} alignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最大的坐标刻度标签的对齐方式。如果设置为 `null`，则和其他标签一致。参见 [align](~${componentType}.axisLabel.align)。
+
+可选：
++ `'left'`
++ `'center'`
++ `'right'`
++ `null` (default)
+
+{{ /if }}
+
+{{ if: ${componentType} === 'yAxis' }}
+
+##${prefix} verticalAlignMinLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最小的坐标刻度标签的对齐方式。如果设置为 `null`，则和其他标签一致。参见 [align](~${componentType}.axisLabel.verticalAlign)。
+
+可选：
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+##${prefix} verticalAlignMaxLabel(string) = null
+
+{{ use: partial-version(version = '5.5.0') }}
+
+最大的坐标刻度标签的对齐方式。如果设置为 `null`，则和其他标签一致。参见 [align](~${componentType}.axisLabel.verticalAlign)。
+
+可选：
++ `'top'`
++ `'middle'`
++ `'bottom'`
++ `null` (default)
+
+{{ /if }}
+
 ##${prefix} hideOverlap(boolean)
 
 <ExampleUIControlBoolean />

zh/option/component/tooltip.md

@@ -199,6 +199,8 @@ const option = {
     version = "4.7.0"
 ) }}
 
+（已废弃，请使用 [appendTo](~tooltip.appendTo)。）
+
 是否将 tooltip 的 DOM 节点添加为 HTML 的 `<body>` 的子节点。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
 
 默认值是 `false`。`false` 表示，tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致，如果本图表的 DOM container 的祖先节点有设置 `overflow: hidden`，那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 [tooltip.confine](~tooltip.confine) 来解决，但是不一定能解决所有场景。
@@ -207,6 +209,20 @@ const option = {
 
 注：CSS transform 的场景，这也可以使用。
 
+## appendTo() = Function | HTMLElement | string | null
+
+{{ use: partial-version(
+    version = "5.5.0"
+) }}
+
+将 tooltip 的 DOM 节点添加到哪个节点下。只有当 [renderMode](~tooltip.renderMode) 为 `'html'` 是有意义的。
+
+默认值是 `null`，表示 tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致，如果本图表的 DOM container 的祖先节点有设置 `overflow: hidden`，那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 [tooltip.confine](~tooltip.confine) 来解决，但是不一定能解决所有场景。
+
+对于这样的场景，可以指定 `appendTo`。当其为 `Function` 形式时，接口形如 `(chartContainer: HTMLElement) => HTMLElement | undefined | null`，即返回 tooltip 的 DOM 节点应该添加到哪个节点下。返回 `undefined` 或 `null` 表示采用上述的默认逻辑。返回 `HTMLElement` 表示添加到该节点下。
+
+注：CSS transform 的场景，这也可以使用。
+
 ## className(string)
 
 <ExampleUIControlText />