Axis break enhance

README.md

@@ -60,15 +60,36 @@ For example,
 ### Global Variables
 
 These global variables can be used in doc:
-+ `${galleryViewPath}`
-+ `${galleryEditorPath}`
-+ `${websitePath}`
-+ `${handbookPath}`
-
-Note: All of them are ended with a `/`, therefore, use them like `${galleryEditorPath}pie-legend`.
++ `${galleryViewPath}`: Use it like `${galleryViewPath}pie-legend`.
++ `${galleryEditorPath}`: Use it like `${galleryEditorPath}pie-legend`.
++ `${optionDocPath}`: Use it like `${optionDocPath}#xAxis.type`.
++ `${apiDocPath}`: Use it like `${apiDocPath}#echarts.init`.
++ `${handbookPath}`: Use it like `${handbookPath}basics/import`.
++ `${websitePath}`: Use it like `${websitePath}/examples/en/index.html#chart-type-custom`.
 
 See samples in "Reference of echarts-examples or other links"
 
+### Reference of Other ECharts Option
+
+A `~` can be used to refer to a option item in the same doc. For example:
+```md
+[xAxis.name](~xAxis.name)
+```
+
+To reference an anchor in different doc, it can be:
+```md
+[itemStyle](option.html#series.itemStyle)
+[action.highlight](api.html#action.highlight)
+[Custom Series](tutorial.html#Custom%20Series)
+[Use ECharts with bundler and NPM](${handbookPath}basics/import)
+```
+
+To add references in a code block, we have to:
+```md
+// See doc: ${optionDocPath}#series-bar.select
+// See doc: ${apiDocPath}#echarts.init
+```
+
 ### Reference of echarts-examples or Other Links
 
 Embed an example in doc (display the example directly in doc with an iframe. To avoid performance issues, do not overuse it.):
@@ -77,6 +98,11 @@ Embed an example in doc (display the example directly in doc with an iframe. To
 ~[700x300](${galleryViewPath}doc-example/aria-pie&edit=1&reset=1)
 ```
 
+Insert an image:
+```md
+[600xauto](~axis-align-with-label.png)
+```
+
 Provide an example link in doc:
 ```md
 [vertically scrollable legend](${galleryEditorPath}pie-legend&edit=1&reset=1)
@@ -88,21 +114,6 @@ Provide a website link in doc:
 [Apache ECharts website](${websitePath}/en/download.html)
 ```
 
-### Reference of Other ECharts Option
-
-A `~` can be used to refer to a option item in the same doc. For example:
-```md
-[xAxis.name](~xAxis.name)
-```
-
-If intending to reference an anchor in different doc, it can be:
-```md
-[itemStyle](option.html#series.itemStyle)
-[action.highlight](api.html#action.highlight)
-[Custom Series](tutorial.html#Custom%20Series)
-[Use ECharts with bundler and NPM](${handbookPath}basics/import)
-```
-
 
 ### Notice
 

config/env.asf.js

@@ -3,6 +3,8 @@ const path = require('path');
 module.exports = {
     galleryViewPath: 'https://echarts.apache.org/examples/${lang}/view.html?c=',
     galleryEditorPath: 'https://echarts.apache.org/examples/${lang}/editor.html?c=',
+    optionDocPath: 'https://echarts.apache.org/${lang}/option.html',
+    apiDocPath: 'https://echarts.apache.org/${lang}/api.html',
     handbookPath: 'https://echarts.apache.org/handbook/${lang}/',
     websitePath: 'https://echarts.apache.org',
 

config/env.dev.js

@@ -3,6 +3,8 @@ const path = require('path');
 module.exports = {
     galleryViewPath: 'http://localhost/echarts-website/examples/${lang}/view.html?c=',
     galleryEditorPath: 'http://localhost/echarts-website/examples/${lang}/editor.html?c=',
+    optionDocPath: 'https://echarts.apache.org/${lang}/option.html',
+    apiDocPath: 'https://echarts.apache.org/${lang}/api.html',
     handbookPath: 'http://localhost/echarts-website/handbook/${lang}/',
     websitePath: 'http://localhost/echarts-website',
 

config/env.localsite.js

@@ -3,6 +3,8 @@ const path = require('path');
 module.exports = {
     galleryViewPath: 'http://localhost/echarts-website/examples/${lang}/view.html?c=',
     galleryEditorPath: 'http://localhost/echarts-website/examples/${lang}/editor.html?c=',
+    optionDocPath: 'https://echarts.apache.org/${lang}/option.html',
+    apiDocPath: 'https://echarts.apache.org/${lang}/api.html',
     handbookPath: 'http://localhost/echarts-website/handbook/${lang}/',
     websitePath: './',
 

en/api/action.md

@@ -28,6 +28,37 @@
     name?: string,{{/target}}
 
 
+{{ target: action-axis-break-expand-collapse-common }}
+Can not be used to create a new axis break.
+```ts
+dispatchAction({
+    type: '${actionType}',
+
+    // The target axis components can be queried by either index, id, or name.
+    xAxisIndex?: 'all' | number;
+    xAxisId?: string | number;
+    xAxisName?: string;
+    yAxisIndex?: 'all' | number;
+    yAxisId?: string | number;
+    yAxisName?: string;
+    singleAxisIndex?: 'all' | number;
+    singleAxisId?: string | number;
+    singleAxisName?: number;
+
+    breaks: {
+        // Use the start/end to identify the target break items.
+        // See more details in doc: ${optionDocPath}#xAxis.breaks.start
+        start: string | number | Date,
+        end: string | number | Date,
+    }
+})
+```
+
+Then event [axisbreakchanged](~events.axisbreakchanged) is triggered.
+
+See also [axis break isExpanded](option.html#xAxis.breaks.isExpanded).
+{{/target}}
+
 
 {{ target: action }}
 # action
@@ -127,6 +158,39 @@ dispatchAction({
 })
 ```
 
+
+## axis
+
+### expandAxisBreak
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Expand one or multiple existing axis break items.
+
+{{ use: action-axis-break-expand-collapse-common(
+    actionType = "expandAxisBreak"
+) }}
+
+### collapseAxisBreak
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Collapse one or multiple existing axis break items.
+
+{{ use: action-axis-break-expand-collapse-common(
+    actionType = "collapseAxisBreak"
+) }}
+
+### toggleAxisBreak
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Toggle (expand/collapse) one or multiple existing axis break items.
+
+{{ use: action-axis-break-expand-collapse-common(
+    actionType = "toggleAxisBreak"
+) }}
+
 ## legend
 
 Actions related to [legend component](option.html#legend), [legend component](option.html#legend) should be imported before use.

en/api/events.md

@@ -202,6 +202,43 @@ Event when trigger legend scroll.
 ```
 
 
+## axisbreakchanged(Event)
+
+{{ use: partial-version(version = "6.0.0") }}
+
+**ACTION:** [expandAxisBreak](~action.axis.expandAxisBreak), [collapseAxisBreak](~action.axis.collapseAxisBreak) and [toggleAxisBreak](~action.axis.toggleAxisBreak) will trigger this event.
+
+```ts
+{
+    type: 'axisbreakchanged';
+    // The type of the action that triggered this event.
+    fromAction: 'expandAxisBreak' | 'collapseAxisBreak' | 'toggleAxisBreak';
+    // The original input action payload.
+    fromActionPayload: Payload;
+    // This breaks array only includes only break items that is specified
+    // in the action, rather than all break items existing in axes.
+    breaks: {
+        // start/end is also the unique identifier of this break item.
+        start: number;
+        end: number;
+
+        // The index of the axis this break item belongs to.
+        xAxisIndex?: number;
+        yAxisIndex?: number;
+        singleAxisIndex?: number;
+
+        // The state after updating.
+        isExpanded: boolean;
+        old: {
+            // The previous state.
+            isExpanded: boolean;
+        };
+    }[]
+}
+```
+
+**Notice:**When using [chart.setOption](~echartsInstance.setOption) to update axis breaks, this event is not triggered. Only actions trigger this event.
+
 
 ## datazoom(Event)
 **ACTION:** [dataZoom](~action.dataZoom.dataZoom)
@@ -221,6 +258,7 @@ Event emitted after zooming data area.
     endValue?: number
 }
 ```
+
 ## datarangeselected(Event)
 **ACTION:** [selectDataRange](~action.dataRange.selectDataRange)
 Event emitted after range is changed in visualMap.

en/api/version.md

@@ -1,9 +1,11 @@
 {{ target: partial-version }}
 
+<div class="doc-partial-version">
 {{ if: ${deprecated} }}
-> Deprecated since `v${version}`. ${deprecated}
+Deprecated since `v${version}`. ${deprecated}
 {{ else }}
-> Since `v${version}`
+Since `v${version}`
 {{ /if }}
+</div>
 
 {{ // this line break is necessary for md quote }}

en/option-gl/component/axis3D-common.md

@@ -82,7 +82,9 @@ The margin between the axis label and the axis line.
 {{ /if }}
 
 ##${prefix|default('#')} formatter(string|Function) = null
-{{use: axis-common-formatter-desc}}
+{{ use: axis-common-formatter-desc(
+    componentType=${componentType}
+) }}
 
 
 ##${prefix|default('#')} textStyle(Object)

en/option-gl/partial/version.md

@@ -1,8 +1,10 @@
 
 {{ target: partial-version }}
 
+<div class="doc-partial-version">
 {{ if: ${deprecated} }}
-> Deprecated since{{ if: ${isECharts} }} ECharts{{ /if }} `v${version}`. ${deprecated}
+Deprecated since{{ if: ${isECharts} }} ECharts{{ /if }} `v${version}`. ${deprecated}
 {{ else }}
-> Since{{ if: ${isECharts} }} ECharts{{ /if }} `v${version}`
+Since{{ if: ${isECharts} }} ECharts{{ /if }} `v${version}`
 {{ /if }}
+</div>