You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2021/04/30 19:22:01 UTC
[echarts-doc] branch master updated (e759b76 -> ee4f2b3)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git.
from e759b76 fix(changelog): fix format flaw in the changelog.
new 8e81194 doc: make selected more specifically.
new 7abd921 doc: registerMap and geoselectchanged.
new 678baa0 doc: add geo highlight downplay and select
new 837af47 Merge branch 'master' of github.com:apache/incubator-echarts-doc
new 4cf74de doc: add showTip geo.
new b128e51 doc: add tooltip to geo and geo.regions.
new f3351bc doc: add since version.
new 1162441 doc: add geo focus blur.
new 35b0bd3 doc: add geo SVG tutorial.
new ee4f2b3 Merge branch 'master' of github.com:apache/incubator-echarts-doc
The 10 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
en/api/action.md | 133 ++++++++----
en/api/echarts.md | 98 ++++++---
en/api/events.md | 43 +++-
en/option/component/geo-common.md | 99 ++++++---
en/option/component/geo.md | 22 ++
en/option/partial/focus-blur-scope.md | 21 +-
en/option/partial/tooltip-common.md | 40 +++-
en/tutorial/geo-svg.md | 368 +++++++++++++++++++++++++++++++++
en/tutorial/tutorial.md | 1 +
zh/api/action.md | 129 ++++++++----
zh/api/echarts.md | 100 ++++++---
zh/api/events.md | 50 +++--
zh/option-gl/component/geo3D-common.md | 2 +-
zh/option/component/geo-common.md | 98 ++++++---
zh/option/component/geo.md | 19 ++
zh/option/partial/focus-blur-scope.md | 23 ++-
zh/option/partial/tooltip-common.md | 41 +++-
zh/tutorial/geo-svg.md | 360 ++++++++++++++++++++++++++++++++
zh/tutorial/tutorial.md | 1 +
19 files changed, 1423 insertions(+), 225 deletions(-)
create mode 100644 en/tutorial/geo-svg.md
create mode 100644 zh/tutorial/geo-svg.md
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 01/10: doc: make selected more specifically.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 8e811940b920bae295ff487317cda02b64b57661
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 02:11:06 2021 +0800
doc: make selected more specifically.
---
en/api/events.md | 32 ++++++++++++++++++++++++--------
zh/api/events.md | 39 ++++++++++++++++++++++++---------------
2 files changed, 48 insertions(+), 23 deletions(-)
diff --git a/en/api/events.md b/en/api/events.md
index 4d29c9a..e71944b 100644
--- a/en/api/events.md
+++ b/en/api/events.md
@@ -120,7 +120,9 @@ Event emitted after legend selecting state changes.
// change legend name
name: string
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
## legendselected(Event)
@@ -133,7 +135,9 @@ Event emitted after legend is selected.
// name of selected legend
name: string
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -149,7 +153,9 @@ Event emitted after unselecting legend.
// name of unselected legend
name: string
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -161,7 +167,9 @@ Event emitted after all legends are selected.
{
type: 'legendselectall',
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -174,7 +182,9 @@ Event emitted after inversing all legends.
{
type: 'legendinverseselect',
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -471,7 +481,9 @@ It will be triggered when user clicks to select.
// data name
name: name,
// table of all selected data.
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
**Attention: ** This event is the same as event `${componentType}Selected` in ECharts 2.
@@ -491,7 +503,9 @@ Use `dispatchAction` can trigger this event, but user clicking this event won't
// data name
name: name,
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -512,7 +526,9 @@ Use `dispatchAction` will trigger this event, but user clicking won't trigger it
// data name
name: name,
// table of all legend selecting states
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
diff --git a/zh/api/events.md b/zh/api/events.md
index 10cff3a..0bd1e39 100644
--- a/zh/api/events.md
+++ b/zh/api/events.md
@@ -118,7 +118,9 @@ chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
// 切换的图例名称
name: string
// 所有图例的选中状态表
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
## legendselected(Event)
@@ -131,7 +133,9 @@ chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
// 选中的图例名称
name: string
// 所有图例的选中状态表
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -147,7 +151,9 @@ chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
// 取消选中的图例名称
name: string
// 所有图例的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -160,7 +166,9 @@ chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
{
type: 'legendselectall',
// 所有图例的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -173,7 +181,9 @@ chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
{
type: 'legendinverseselect',
// 所有图例的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
@@ -460,12 +470,11 @@ chart.on('finished', function () {
// 数据名称
name: name,
// 所有数据的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
-{{ if: ${componentType} !== 'geo' }}
-**注：** 该事件同 ECharts 2 中的 `${componentType}Selected` 事件相同。
-{{ /if }}
## ${componentType}selected(Event)
**ACTION:** [${componentType}Select](~action.${componentType}.${componentType}Select)
@@ -482,14 +491,12 @@ chart.on('finished', function () {
// 数据名称
name: name,
// 所有数据的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
-{{ if: ${componentType} !== 'geo' }}
-**注：** ECharts 2.x 中用户开关图例对应的事件从 `${componentType}selected` 改为 [${componentType}selectchanged](~events.${componentType}selectchanged)。
-{{ /if }}
-
## ${componentType}unselected(Event)
**ACTION:** [${componentType}UnSelect](~action.${componentType}.${componentType}UnSelect)
@@ -505,7 +512,9 @@ chart.on('finished', function () {
// 数据名称
name: name,
// 所有数据的选中状态表。
- selected: Object
+ selected: {
+ [name: string]: boolean
+ }
}
```
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 05/10: doc: add showTip geo.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 4cf74de4754339d48f52a2bb825fb7f6b02c7c33
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 15:21:11 2021 +0800
doc: add showTip geo.
---
en/api/action.md | 50 +++++++++++++++++++++++++++++++++++---------------
zh/api/action.md | 51 ++++++++++++++++++++++++++++++++++++---------------
2 files changed, 71 insertions(+), 30 deletions(-)
diff --git a/en/api/action.md b/en/api/action.md
index 2089381..c34c06a 100644
--- a/en/api/action.md
+++ b/en/api/action.md
@@ -4,21 +4,29 @@
seriesId?: string | string[],
seriesName?: string | string[],{{/target}}
-{{ target: action-data-query }}// data index; could assign by name attribute when not defined
+{{ target: action-data-query-multiple }}// data index; could assign by name attribute when not defined
dataIndex?: number | number[],
// optional; data name; ignored when dataIndex is defined
name?: string | string[],{{/target}}
+{{ target: action-data-query-single }}// data index; could assign by name attribute when not defined
+ dataIndex?: number,
+ // optional; data name; ignored when dataIndex is defined
+ name?: string,{{/target}}
+
{{ target: action-component-query }}// Find ${componentType} by index or id or name.
// Can be an array to find multiple components.
${componentType}Index?: number | number[],
${componentType}Id?: string | string[],
${componentType}Name?: string | string[],{{/target}}
-{{ target: action-component-item-query }}// ${componentItemDesc} in ${componentType} component.
+{{ target: action-component-item-query-multiple }}// ${componentItemDesc} in ${componentType} component.
// Can be an array to specify multiple names.
name?: string | string[],{{/target}}
+{{ target: action-component-item-query-single }}// ${componentItemDesc} name in ${componentType} component.
+ name?: string,{{/target}}
+
{{ target: action }}
@@ -39,7 +47,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
});
// If highlight geo component:
@@ -48,7 +56,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
});
```
@@ -64,7 +72,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
});
// If downplay geo component:
@@ -73,7 +81,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
});
```
@@ -87,7 +95,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -101,7 +109,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -115,7 +123,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -203,7 +211,7 @@ Actions related to [tooltip component](option.html#tooltip), [tooltip component]
Shows tooltip.
-There are two usages as followed.
+There are several usages as followed.
1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.
```js
@@ -219,19 +227,31 @@ dispatchAction({
})
```
-2 Specify graphic element, and display tooltip according to the tooltip configuration item.
+2 Specify graphic element in series, and display tooltip according to the tooltip configuration.
```js
dispatchAction({
type: 'showTip',
// index of series, which is optional when trigger of tooltip is axis
seriesIndex?: number,
- {{ use: action-data-query }},
+ {{ use: action-data-query-single }},
// Position of tooltip. Only works in this action.
// Use tooltip.position in option by default.
position: Array.<number>|string|Function
})
```
+3 Specify graphic element in geo component, and display tooltip according to the tooltip configuration.
+```js
+dispatchAction({
+ type: 'showTip',
+ {{ use: action-component-query(componentType = 'geo') }}
+ {{ use: action-component-item-query-single(componentType = 'geo', componentItemDesc = 'region') }}
+ // Position of tooltip. Only works in this action.
+ // Use tooltip.position in option by default.
+ position: number[] | string | Function
+})
+```
+
Parameter `position` is the same as [tooltip.position](option.html#tooltip.position).
@@ -484,7 +504,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
@@ -499,7 +519,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}unselected](~events.${componentType}unselected)
@@ -513,7 +533,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}selectchanged](~events.${componentType}selectchanged)
diff --git a/zh/api/action.md b/zh/api/action.md
index affc030..17d279e 100644
--- a/zh/api/action.md
+++ b/zh/api/action.md
@@ -4,20 +4,29 @@
seriesId?: string | string[],
seriesName?: string | string[],{{/target}}
-{{ target: action-data-query }}// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+{{ target: action-data-query-multiple }}// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex?: number | number[],
// 可选，数据项名称，在有 dataIndex 的时候忽略
name?: string | string[],{{/target}}
+{{ target: action-data-query-single }}// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+ dataIndex?: number,
+ // 可选，数据项名称，在有 dataIndex 的时候忽略
+ name?: string,{{/target}}
+
{{ target: action-component-query }}// 用 index 或 id 或 name 来指定 ${componentType} 组件。
// 可以用数组指定多个 ${componentType} 组件。
${componentType}Index?: number | number[],
${componentType}Id?: string | string[],
${componentType}Name?: string | string[],{{/target}}
-{{ target: action-component-item-query }}// ${componentType} 组件中 ${componentItemDesc} 名称。可以是一个数组指定多个名称。
+{{ target: action-component-item-query-multiple }}// ${componentType} 组件中 ${componentItemDesc} 名称。
+ // 可以是一个数组指定多个名称。
name?: string | string[],{{/target}}
+{{ target: action-component-item-query-single }}// ${componentType} 组件中 ${componentItemDesc} 名称。
+ name?: string,{{/target}}
+
{{ target: action }}
# action
@@ -37,7 +46,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
});
// 如果要高亮 geo 组件：
@@ -46,7 +55,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
});
```
@@ -61,7 +70,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
// 如果要取消高亮 geo 组件：
@@ -70,7 +79,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
});
```
@@ -84,7 +93,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -98,7 +107,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -112,7 +121,7 @@ dispatchAction({
{{ use: action-series-query }}
- {{ use: action-data-query }}
+ {{ use: action-data-query-multiple }}
})
```
@@ -199,7 +208,7 @@ dispatchAction({
显示提示框。
-有下面两种使用方式。
+有下面几种使用方式。
1 指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效。
```js
@@ -215,19 +224,31 @@ dispatchAction({
})
```
-2 指定数据图形，根据 tooltip 的配置项显示提示框。
+2 指定系列中的数据图形，根据 tooltip 的配置项显示提示框。
```js
dispatchAction({
type: 'showTip',
// 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex?: number,
- {{ use: action-data-query }},
+ {{ use: action-data-query-single }},
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
position: Array.<number>|string|Function,
})
```
+3 指定 geo 组件中的 region 名，根据 tooltip 的配置项显示提示框。
+```js
+dispatchAction({
+ type: 'showTip',
+ {{ use: action-component-query(componentType = 'geo') }}
+ {{ use: action-component-item-query-single(componentType = 'geo', componentItemDesc = 'region') }}
+ // 本次显示 tooltip 的位置。只在本次 action 中生效。
+ // 缺省则使用 option 中定义的 tooltip 位置。
+ position: number[] | string | Function,
+})
+```
+
参数`position`同[tooltip.position](option.html#tooltip.position)相同。
@@ -466,7 +487,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
@@ -481,7 +502,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}unselected](~events.${componentType}unselected)
@@ -495,7 +516,7 @@ dispatchAction({
{{ use: action-component-query(componentType = 'geo') }}
- {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+ {{ use: action-component-item-query-multiple(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}selectchanged](~events.${componentType}selectchanged)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 06/10: doc: add tooltip to geo and geo.regions.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit b128e5176e8c4f62951c576fa5f7084d06a4db4b
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 16:06:59 2021 +0800
doc: add tooltip to geo and geo.regions.
---
en/option/component/geo.md | 12 ++++++++++++
en/option/partial/tooltip-common.md | 32 +++++++++++++++++++++++++++++---
zh/option/component/geo.md | 11 +++++++++++
zh/option/partial/tooltip-common.md | 33 ++++++++++++++++++++++++++++++---
4 files changed, 82 insertions(+), 6 deletions(-)
diff --git a/en/option/component/geo.md b/en/option/component/geo.md
index 4ded4a2..af1bc19 100644
--- a/en/option/component/geo.md
+++ b/en/option/component/geo.md
@@ -96,10 +96,22 @@ Style of selected region.
{{ use: geo-region-state() }}
+{{ use: partial-tooltip-in-coords-item(
+ componentItemDesc: 'region',
+ noAxis: true
+) }}
+
+
+
+
{{ use: partial-silent(
prefix = "#"
) }}
+{{ use: partial-tooltip-in-coords(
+ noAxis = true
+) }}
+
{{ target: geo-region-state }}
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index 0187f89..cbcd0c5 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -29,7 +29,8 @@ tooltip settings in the coordinate system component.
{{ use: partial-tooltip-introduction() }}
{{ use: partial-tooltip-coords-common(
- prefix = '##'
+ prefix = '##',
+ noAxis = ${noAxis}
) }}
{{ use: partial-tooltip-common(
@@ -39,6 +40,24 @@ tooltip settings in the coordinate system component.
+{{ target: partial-tooltip-in-component-item }}
+
+### tooltip(*)
+
+tooltip settings in this ${componentItemDesc}.
+
+{{ use: partial-tooltip-coords-common(
+ prefix = '###',
+ noAxis = ${noAxis}
+) }}
+
+{{ use: partial-tooltip-common(
+ scope = 'coordSysItem',
+ prefix = '###'
+) }}
+
+
+
{{ target: partial-tooltip-in-series }}
## tooltip(*)
@@ -51,7 +70,6 @@ tooltip settings in this series.
) }}
-
{{ target: partial-tooltip-in-series-data }}
### tooltip(*)
@@ -83,8 +101,14 @@ tooltip settings in this series data.
<ExampleUIControlBoolean default="true" />
-Whether to show the tooltip component, including tooltip floating layer and [axisPointer](~tooltip.axisPointer).
+Whether to show the tooltip component.
+{{ if: !${noAxis} }}
+including tooltip floating layer and [axisPointer](~tooltip.axisPointer).
+{{ /if }}
+
+
+{{ if: !${noAxis} }}
#${prefix} trigger(string) = 'item'
<ExampleUIControlEnum options="item,axis,none" default="item" />
@@ -106,6 +130,7 @@ Options:
Trigger nothing.
+
#${prefix} axisPointer(Object)
Configuration item for axisPointer.
@@ -158,6 +183,7 @@ It is valid when [axisPointer.type](~tooltip.axisPointer.type) is `'cross'`.
defaultAnimationDurationUpdate = 200
) }}
+{{ /if }}
{{ target: partial-tooltip-common }}
diff --git a/zh/option/component/geo.md b/zh/option/component/geo.md
index 211dd61..9593a5b 100644
--- a/zh/option/component/geo.md
+++ b/zh/option/component/geo.md
@@ -94,10 +94,21 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
{{ use: geo-region-state() }}
+{{ use: partial-tooltip-in-coords-item(
+ componentItemDesc: 'region',
+ noAxis: true
+) }}
+
+
+
+
{{ use: partial-silent(
prefix = "#"
) }}
+{{ use: partial-tooltip-in-coords(
+ noAxis = true
+) }}
{{ target: geo-region-state }}
diff --git a/zh/option/partial/tooltip-common.md b/zh/option/partial/tooltip-common.md
index bedd5d6..011f63d 100644
--- a/zh/option/partial/tooltip-common.md
+++ b/zh/option/partial/tooltip-common.md
@@ -29,7 +29,8 @@
{{ use: partial-tooltip-introduction() }}
{{ use: partial-tooltip-coords-common(
- prefix = '##'
+ prefix = '##',
+ noAxis = ${noAxis}
) }}
{{ use: partial-tooltip-common(
@@ -39,6 +40,24 @@
+{{ target: partial-tooltip-in-coords-item }}
+
+### tooltip(*)
+
+本 ${componentItemDesc} 中特定的 tooltip 设定。
+
+{{ use: partial-tooltip-coords-common(
+ prefix = '###',
+ noAxis = ${noAxis}
+) }}
+
+{{ use: partial-tooltip-common(
+ scope = 'coordSysItem',
+ prefix = '###'
+) }}
+
+
+
{{ target: partial-tooltip-in-series }}
## tooltip(Object)
@@ -51,7 +70,6 @@
) }}
-
{{ target: partial-tooltip-in-series-data }}
### tooltip(*)
@@ -65,6 +83,7 @@
+
{{ target: partial-tooltip-scope-tip }}
{{ if: ${scope} === 'series' }}
@@ -83,8 +102,13 @@
<ExampleUIControlBoolean default="true" />
-是否显示提示框组件，包括提示框浮层和 [axisPointer](~tooltip.axisPointer)。
+是否显示提示框组件。
+{{ if: !${noAxis} }}
+包括提示框浮层和 [axisPointer](~tooltip.axisPointer)。
+{{ /if }}
+
+{{ if: !${noAxis} }}
#${prefix} trigger(string) = 'item'
<ExampleUIControlEnum options="item,axis,none" default="item" />
@@ -106,6 +130,8 @@
什么都不触发。
+
+
#${prefix} axisPointer(Object)
坐标轴指示器配置项。
@@ -162,6 +188,7 @@
defaultAnimationDurationUpdate = 200
) }}
+{{ /if }}
{{ target: partial-tooltip-common }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 04/10: Merge branch 'master' of
github.com:apache/incubator-echarts-doc
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 837af4709841266b27d7e152e09289145d3ca272
Merge: 678baa0 992af3c
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 15:09:08 2021 +0800
Merge branch 'master' of github.com:apache/incubator-echarts-doc
en/changelog.md | 3 ++-
zh/changelog.md | 9 +++++++++
2 files changed, 11 insertions(+), 1 deletion(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 07/10: doc: add since version.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit f3351bc1e1aeaac2d6a33b8f3f18dd25e8ad41d8
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 16:55:08 2021 +0800
doc: add since version.
---
en/api/action.md | 9 +++++----
en/api/echarts.md | 2 ++
en/api/events.md | 1 +
en/option/component/geo.md | 6 ++++--
en/option/partial/tooltip-common.md | 10 +++++++++-
zh/api/action.md | 9 +++++----
zh/api/echarts.md | 2 ++
zh/api/events.md | 1 +
zh/option/component/geo.md | 6 ++++--
zh/option/partial/tooltip-common.md | 8 ++++++++
10 files changed, 41 insertions(+), 13 deletions(-)
diff --git a/en/api/action.md b/en/api/action.md
index c34c06a..60b310f 100644
--- a/en/api/action.md
+++ b/en/api/action.md
@@ -50,7 +50,7 @@ dispatchAction({
{{ use: action-data-query-multiple }}
});
-// If highlight geo component:
+// If highlight geo component (since v5.1.0):
dispatchAction({
type: 'highlight',
@@ -75,7 +75,7 @@ dispatchAction({
{{ use: action-data-query-multiple }}
});
-// If downplay geo component:
+// If downplay geo component (since v5.1.0):
dispatchAction({
type: 'downplay',
@@ -223,7 +223,7 @@ dispatchAction({
y: number,
// Position of tooltip. Only works in this action.
// Use tooltip.position in option by default.
- position: Array.<number>|string|Function
+ position: number[] | string | Function,
})
```
@@ -236,11 +236,12 @@ dispatchAction({
{{ use: action-data-query-single }},
// Position of tooltip. Only works in this action.
// Use tooltip.position in option by default.
- position: Array.<number>|string|Function
+ position: number[] | string | Function,
})
```
3 Specify graphic element in geo component, and display tooltip according to the tooltip configuration.
+{{ use: partial-version(version: '5.1.0') }}
```js
dispatchAction({
type: 'showTip',
diff --git a/en/api/echarts.md b/en/api/echarts.md
index e6d6580..217911c 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -160,6 +160,8 @@ Please refer to [option.geo](option.html#geo.map) for usage.
+ `svg`
+ > Since `v5.1.0`
+
Optional; Data in SVG format. Can be a SVG string or a parsed SVG DOM object. See more info in SVG_a_a_a_a_a.
+ `specialAreas`
diff --git a/en/api/events.md b/en/api/events.md
index 8449bf1..7d696b5 100644
--- a/en/api/events.md
+++ b/en/api/events.md
@@ -481,6 +481,7 @@ It will be triggered when user clicks to select.
// data name
name: name,
// list for each ${componentType} component.
+ // allSelected is supported since v5.1.0
allSelected: ({
${componentType}Index: number
// selected names of each ${componentType} component.
diff --git a/en/option/component/geo.md b/en/option/component/geo.md
index af1bc19..044bed5 100644
--- a/en/option/component/geo.md
+++ b/en/option/component/geo.md
@@ -98,7 +98,8 @@ Style of selected region.
{{ use: partial-tooltip-in-coords-item(
componentItemDesc: 'region',
- noAxis: true
+ noAxis: true,
+ version = '5.1.0'
) }}
@@ -109,7 +110,8 @@ Style of selected region.
) }}
{{ use: partial-tooltip-in-coords(
- noAxis = true
+ noAxis = true,
+ version = '5.1.0'
) }}
diff --git a/en/option/partial/tooltip-common.md b/en/option/partial/tooltip-common.md
index cbcd0c5..28b7283 100644
--- a/en/option/partial/tooltip-common.md
+++ b/en/option/partial/tooltip-common.md
@@ -22,6 +22,10 @@ tooltip can be configured on different places:
## tooltip(Object)
+{{ if: ${version} }}
+{{ use: partial-version(version: '5.1.0') }}
+{{ /if }}
+
tooltip settings in the coordinate system component.
---
@@ -40,10 +44,14 @@ tooltip settings in the coordinate system component.
-{{ target: partial-tooltip-in-component-item }}
+{{ target: partial-tooltip-in-coords-item }}
### tooltip(*)
+{{ if: ${version} }}
+{{ use: partial-version(version: '5.1.0') }}
+{{ /if }}
+
tooltip settings in this ${componentItemDesc}.
{{ use: partial-tooltip-coords-common(
diff --git a/zh/api/action.md b/zh/api/action.md
index 17d279e..52f50e8 100644
--- a/zh/api/action.md
+++ b/zh/api/action.md
@@ -49,7 +49,7 @@ dispatchAction({
{{ use: action-data-query-multiple }}
});
-// 如果要高亮 geo 组件：
+// 如果要高亮 geo 组件（从 `v5.1.0` 开始支持）：
dispatchAction({
type: 'highlight',
@@ -73,7 +73,7 @@ dispatchAction({
{{ use: action-data-query-multiple }}
})
-// 如果要取消高亮 geo 组件：
+// 如果要取消高亮 geo 组件（从 `v5.1.0` 开始支持）：
dispatchAction({
type: 'downplay',
@@ -220,7 +220,7 @@ dispatchAction({
y: number,
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
- position: Array.<number>|string|Function
+ position: number[] | string | Function,
})
```
@@ -233,11 +233,12 @@ dispatchAction({
{{ use: action-data-query-single }},
// 本次显示 tooltip 的位置。只在本次 action 中生效。
// 缺省则使用 option 中定义的 tooltip 位置。
- position: Array.<number>|string|Function,
+ position: number[] | string | Function,
})
```
3 指定 geo 组件中的 region 名，根据 tooltip 的配置项显示提示框。
+{{ use: partial-version(version: '5.1.0') }}
```js
dispatchAction({
type: 'showTip',
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index 0d2872a..f7dca60 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -159,6 +159,8 @@ echarts.use(
+ `svg`
+ > 从 `v5.1.0` 开始支持
+
可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG_a_a_a_a_a 。
+ `specialAreas`
diff --git a/zh/api/events.md b/zh/api/events.md
index 7b09c29..5bc7b5e 100644
--- a/zh/api/events.md
+++ b/zh/api/events.md
@@ -470,6 +470,7 @@ chart.on('finished', function () {
// 数据名称
name: name,
// 每个 ${componentType} 组件的选中信息列表。
+ // allSelected 从 `v5.1.0` 开始支持
allSelected: ({
${componentType}Index: number
// 每个 ${componentType} 组件上选中的名称列表。
diff --git a/zh/option/component/geo.md b/zh/option/component/geo.md
index 9593a5b..40fa31e 100644
--- a/zh/option/component/geo.md
+++ b/zh/option/component/geo.md
@@ -96,7 +96,8 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
{{ use: partial-tooltip-in-coords-item(
componentItemDesc: 'region',
- noAxis: true
+ noAxis: true,
+ version = '5.1.0'
) }}
@@ -107,7 +108,8 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
) }}
{{ use: partial-tooltip-in-coords(
- noAxis = true
+ noAxis = true,
+ version = '5.1.0'
) }}
diff --git a/zh/option/partial/tooltip-common.md b/zh/option/partial/tooltip-common.md
index 011f63d..cb67ca1 100644
--- a/zh/option/partial/tooltip-common.md
+++ b/zh/option/partial/tooltip-common.md
@@ -22,6 +22,10 @@
## tooltip(Object)
+{{ if: ${version} }}
+{{ use: partial-version(version: '5.1.0') }}
+{{ /if }}
+
本坐标系特定的 tooltip 设定。
---
@@ -44,6 +48,10 @@
### tooltip(*)
+{{ if: ${version} }}
+{{ use: partial-version(version: '5.1.0') }}
+{{ /if }}
+
本 ${componentItemDesc} 中特定的 tooltip 设定。
{{ use: partial-tooltip-coords-common(
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 08/10: doc: add geo focus blur.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 1162441c831da9e98a7b2881b558ebe52dea0741
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 17:31:40 2021 +0800
doc: add geo focus blur.
---
en/option/component/geo-common.md | 13 +++++++++++++
en/option/component/geo.md | 8 ++++++++
en/option/partial/focus-blur-scope.md | 21 ++++++++++++++++++++-
zh/option/component/geo-common.md | 15 +++++++++++++++
zh/option/component/geo.md | 8 +++++++-
zh/option/partial/focus-blur-scope.md | 23 ++++++++++++++++++++++-
6 files changed, 85 insertions(+), 3 deletions(-)
diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md
index 9bb0ab9..0337422 100644
--- a/en/option/component/geo-common.md
+++ b/en/option/component/geo-common.md
@@ -149,6 +149,9 @@ Area filling color.
#${prefix} emphasis(Object)
Map area style in highlighted state.
+{{ if: !${inMap} }}
+{{ use: partial-focus-blur-scope(isGeoCoordSys: true) }}
+{{ /if }}
{{ use: partial-geo-common-state(
prefix = '#' + ${prefix}
@@ -162,6 +165,16 @@ Map area style in selected state.
prefix = '#' + ${prefix}
) }}
+{{ if: !${inMap} }}
+#${prefix} blur(Object)
+{{ use: partial-version(version: '5.1.0') }}
+Map area style in blurred state.
+
+{{ use: partial-geo-common-state(
+ prefix = '#' + ${prefix}
+) }}
+{{ /if }}
+
{{ use: partial-rect-layout(
prefix = ${prefix}
) }}
diff --git a/en/option/component/geo.md b/en/option/component/geo.md
index 044bed5..ed8f654 100644
--- a/en/option/component/geo.md
+++ b/en/option/component/geo.md
@@ -96,6 +96,14 @@ Style of selected region.
{{ use: geo-region-state() }}
+### blur(Object)
+{{ use: partial-version(version: '5.1.0') }}
+Style of blurred region.
+
+{{ use: geo-region-state() }}
+
+
+
{{ use: partial-tooltip-in-coords-item(
componentItemDesc: 'region',
noAxis: true,
diff --git a/en/option/partial/focus-blur-scope.md b/en/option/partial/focus-blur-scope.md
index 02c4e93..5c803cd 100644
--- a/en/option/partial/focus-blur-scope.md
+++ b/en/option/partial/focus-blur-scope.md
@@ -3,15 +3,23 @@
### focus(string) = 'none'
+{{ if: ${isGeoCoordSys} }}
+{{ use: partial-version(
+ version = "5.1.0"
+) }}
+{{ else }}
{{ use: partial-version(
version = "5.0.0"
) }}
+{{ /if }}
When the data is highlighted, whether to fade out of other data to focus the highlighted. The following configurations are supported:
+ `'none'` Do not fade out other data, it's by default.
+ `'self'` Only focus (not fade out) the element of the currently highlighted data.
+{{ if: !${isGeoCoordSys} }}
+ `'series'` Focus on all elements of the series which the currently highlighted data belongs to.
+{{ /if }}
{{ if: ${isGraph} }}
+ `'adjacency'` Focus on the elements of adjacent nodes and edges in the graph.
@@ -23,6 +31,7 @@ When the data is highlighted, whether to fade out of other data to focus the hig
**Example: **
+{{ if: !${isGeoCoordSys} }}
```js
emphasis: {
focus: 'series',
@@ -31,7 +40,17 @@ emphasis: {
```
~[600x400](${galleryViewPath}bar-y-category-stack&reset=1&edit=1)
+{{ else }}
+```js
+emphasis: {
+ focus: 'self'
+}
+```
+
+~[600x400](${galleryViewPath}geo-organ&reset=1&edit=1)
+{{ /if }}
+{{ if: !${isGeoCoordSys} }}
### blurScope(string) = 'coordinateSystem'
{{ use: partial-version(
@@ -43,4 +62,4 @@ The range of fade out when `focus` is enabled. Support the following configurati
+ `'coordinateSystem'`
+ `'series'`
+ `'global'`
-
+{{ /if }}
diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md
index 1ed7532..0bf80e6 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -148,6 +148,10 @@ boundingCoords: [
高亮状态下的多边形和标签样式。
+{{ if: !${inMap} }}
+{{ use: partial-focus-blur-scope(isGeoCoordSys: true) }}
+{{ /if }}
+
{{ use: partial-geo-common-state(
prefix = '#' + ${prefix}
) }}
@@ -160,6 +164,17 @@ boundingCoords: [
prefix = '#' + ${prefix}
) }}
+{{ if: !${inMap} }}
+#${prefix} blur(Object)
+{{ use: partial-version(version: '5.1.0') }}
+淡出状态下的多边形和标签样式。
+
+{{ use: partial-geo-common-state(
+ prefix = '#' + ${prefix}
+) }}
+{{ /if }}
+
+
{{ use: partial-rect-layout(
prefix = ${prefix}
) }}
diff --git a/zh/option/component/geo.md b/zh/option/component/geo.md
index 40fa31e..ba22411 100644
--- a/zh/option/component/geo.md
+++ b/zh/option/component/geo.md
@@ -94,6 +94,13 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
{{ use: geo-region-state() }}
+### blur(Object)
+{{ use: partial-version(version: '5.1.0') }}
+淡出状态的设置。
+
+{{ use: geo-region-state() }}
+
+
{{ use: partial-tooltip-in-coords-item(
componentItemDesc: 'region',
noAxis: true,
@@ -102,7 +109,6 @@ geo 区域的颜色也可以被 map series 所控制，参见 [series-map.geoInd
-
{{ use: partial-silent(
prefix = "#"
) }}
diff --git a/zh/option/partial/focus-blur-scope.md b/zh/option/partial/focus-blur-scope.md
index 8d035d9..216099f 100644
--- a/zh/option/partial/focus-blur-scope.md
+++ b/zh/option/partial/focus-blur-scope.md
@@ -3,15 +3,23 @@
### focus(string) = 'none'
+{{ if: ${isGeoCoordSys} }}
+{{ use: partial-version(
+ version = "5.1.0"
+) }}
+{{ else }}
{{ use: partial-version(
version = "5.0.0"
) }}
+{{ /if }}
在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
+ `'none'` 不淡出其它图形，默认使用该配置。
+ `'self'` 只聚焦（不淡出）当前高亮的数据的图形。
+{{ if: !${isGeoCoordSys} }}
+ `'series'` 聚焦当前高亮的数据所在的系列的所有图形。
+{{ /if }}
{{ if: ${isGraph} }}
+ `'adjacency'` 聚焦关系图中的邻接点和边的图形
@@ -23,6 +31,7 @@
**示例：**
+{{ if: !${isGeoCoordSys} }}
下面代码配置了柱状图在高亮一个图形的时候，淡出当前直角坐标系所有其它的系列。
```js
@@ -33,7 +42,19 @@ emphasis: {
```
~[600x400](${galleryViewPath}bar-y-category-stack&reset=1&edit=1)
+{{ else }}
+下面代码配置了 geo 在高亮一个图形的时候，淡出所有其它的图形。
+```js
+emphasis: {
+ focus: 'self'
+}
+```
+
+~[600x400](${galleryViewPath}geo-organ&reset=1&edit=1)
+{{ /if }}
+
+{{ if: !${isGeoCoordSys} }}
### blurScope(string) = 'coordinateSystem'
{{ use: partial-version(
@@ -45,4 +66,4 @@ emphasis: {
+ `'coordinateSystem'` 淡出范围为坐标系，默认使用该配置。
+ `'series'` 淡出范围为系列。
+ `'global'` 淡出范围为全局。
-
+{{ /if }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 10/10: Merge branch 'master' of
github.com:apache/incubator-echarts-doc
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit ee4f2b302a4a710e35b62440f72db681d94fc253
Merge: 35b0bd3 e759b76
Author: 100pah <su...@gmail.com>
AuthorDate: Sat May 1 03:21:26 2021 +0800
Merge branch 'master' of github.com:apache/incubator-echarts-doc
en/changelog.md | 3 ++-
zh/changelog.md | 1 +
2 files changed, 3 insertions(+), 1 deletion(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 09/10: doc: add geo SVG tutorial.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 35b0bd3065103c971157562c21c4e0b629a0ab1d
Author: 100pah <su...@gmail.com>
AuthorDate: Sat May 1 03:20:31 2021 +0800
doc: add geo SVG tutorial.
---
en/api/echarts.md | 2 +-
en/option/component/geo-common.md | 86 +++++---
en/tutorial/geo-svg.md | 368 +++++++++++++++++++++++++++++++++
en/tutorial/tutorial.md | 1 +
zh/api/echarts.md | 2 +-
zh/option-gl/component/geo3D-common.md | 2 +-
zh/option/component/geo-common.md | 83 +++++---
zh/tutorial/geo-svg.md | 360 ++++++++++++++++++++++++++++++++
zh/tutorial/tutorial.md | 1 +
9 files changed, 851 insertions(+), 54 deletions(-)
diff --git a/en/api/echarts.md b/en/api/echarts.md
index 217911c..24d14f0 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -162,7 +162,7 @@ Please refer to [option.geo](option.html#geo.map) for usage.
> Since `v5.1.0`
- Optional; Data in SVG format. Can be a SVG string or a parsed SVG DOM object. See more info in SVG_a_a_a_a_a.
+ Optional; Data in SVG format. Can be a SVG string or a parsed SVG DOM object. See more info in [SVG Base Map](tutorial.html#SVG%20Base%20Map).
+ `specialAreas`
diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md
index 0337422..78fcc91 100644
--- a/en/option/component/geo-common.md
+++ b/en/option/component/geo-common.md
@@ -3,47 +3,81 @@
#${prefix} map(string) = ''
-Map charts.
+Map name registered in [registerMap](api.html#echarts.registerMap).
-Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on [map download page](http://ecomfe.github.io/echarts-builder-web/map3.html) and then include and register them in ECharts.
-Two formats of map data are provided in ECharts, one of which can be included in `<script>` tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.
-
-
-Here are examples of these two types:
-
-** JavaScript importing example **
-
-```html
-<script src="echarts.js"></script>
-<script src="map/js/china.js"></script>
-<script>
-var chart = echarts.init(document.getElmentById('main'));
-chart.setOption({
- series: [{
- type: 'map',
- map: 'china'
- }]
+{{ if: ${inMap} }}
+**Use geoJSON**
+```js
+$.get('map/china_geo.json', function (geoJson) {
+ echarts.registerMap('china', {geoJSON: geoJson});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ series: [{
+ type: 'map',
+ map: 'china',
+ ...
+ }]
+ });
});
-</script>
```
+See also [USA Population Estimates](${galleryEditorPath}map-usa).
+{{ else }}
+**Use geoJSON**
+```js
+$.get('map/china_geo.json', function (chinaJson) {
+ echarts.registerMap('china', {geoJSON: geoJson});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ geo: [{
+ map: 'china',
+ ...
+ }]
+ });
+});
+```
+See also [geoJSON hexbin](${galleryEditorPath}custom-hexbin).
+{{ /if }}
+
+The demo above shows that ECharts can uses [geoJSON](http://geojson.org/) format as map outline. You can use third-party [geoJSON](http://geojson.org/) data (like [maps](https://github.com/echarts-maps)) and register them into ECharts.
-** JSON importing example **
+{{ if: ${inMap} }}
+**Use SVG**
```js
-$.get('map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
- var chart = echarts.init(document.getElmentById('main'));
+$.get('map/topographic_map.svg', function (svg) {
+ echarts.registerMap('topo', {svg: svg});
+ var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
- map: 'china'
+ map: 'topo',
+ ...
}]
});
});
```
+See also [Beef Cuts](${galleryEditorPath}geo-beef-cuts).
+{{ else }}
+**Use SVG**
+```js
+$.get('map/topographic_map.svg', function (svg) {
+ echarts.registerMap('topo', {svg: svg});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ geo: [{
+ map: 'topo',
+ ...
+ }]
+ });
+});
+```
+See also [Flight Seatmap](${galleryEditorPath}geo-seatmap-flight).
+{{ /if }}
+
+The demo above shows that SVG format can be used in ECharts. See more info in [SVG Base Map](tutorial.html#SVG%20Base%20Map).
+
-ECharts uses [geoJSON](http://geojson.org/) format as map outline. Besides the methods introduced above, you can also get [geoJSON](http://geojson.org/) data through in other methods if you like and register it in ECharts. Reference to [USA Population Estimates](${galleryEditorPath}map-usa) for more information.
#${prefix} roam(boolean|string) = false
diff --git a/en/tutorial/geo-svg.md b/en/tutorial/geo-svg.md
new file mode 100644
index 0000000..acf67aa
--- /dev/null
+++ b/en/tutorial/geo-svg.md
@@ -0,0 +1,368 @@
+{{target: geo-svg}}
+
+# SVG Base Map
+
+Since `v5.1.0`, ECharts support to use SVG as the base map in [geo coordinate system](option.html#geo) and [map series](option.html#series-map), where previously only [GeoJSON](http://geojson.org/) is supported.
+
+This feature enables ECharts to display SVG in either of the render modes (`canvas` render mode and `svg` render mode), and enables features like [zoom](option.html#geo.roam), [pan](option.html#geo.roam), [select](option.html#geo.select), [emphasis](option.html#geo.emphasis), [focus-blur](option.html#geo.emphasis.focus), [label](option.html#geo.label), [labelLayout](option.html#series-map.labelLayout), [tooltip](option.html#geo.tooltip) on SVG with only simple some ECharts options. Serie [...]
+
+There are several examples where SVG base map is used:
+
+[Beef Cuts](${galleryEditorPath}geo-beef-cuts) |
+[Organ Visualization](${galleryEditorPath}geo-organ) |
+[Flight Seatmap](${galleryEditorPath}geo-seatmap-flight) |
+[SVG Map](${galleryEditorPath}geo-svg-map) |
+[SVG Scatter](${galleryEditorPath}geo-svg-scatter-simple) |
+[SVG Lines](${galleryEditorPath}geo-svg-lines) |
+[SVG Traffic](${galleryEditorPath}geo-svg-traffic)
+
+
+## Basic Usage
+
+The usage of SVG base map is the same as the usage of [GeoJSON](http://geojson.org/).
+
+If used in [geo coordinate system](option.html#geo):
+```js
+$.get('map/organ.svg', function (svg) {
+ // Firstly we need to register SVG raw string or parsed SVG DOM
+ // to echarts with a name:
+ echarts.registerMap('organ_diagram', {svg: svg});
+
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ geo: {
+ // Reference it in echarts option.
+ map: 'organ_diagram',
+ ...
+ }
+ });
+});
+```
+
+If used in [map series](option.html#series-map):
+```js
+$.get('map/beef_cuts.svg', function (svg) {
+ // Firstly we need to register SVG raw string or parsed SVG DOM
+ // to echarts with a name:
+ echarts.registerMap('beef_cuts_diagram', {svg: svg});
+
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ series: {
+ type: 'map',
+ // Reference it in echarts option.
+ map: 'beef_cuts_diagram',
+ ...
+ }
+ });
+});
+```
+
+
+## Zoom and Pan
+
+For [Geo coordinate system](option.html#geo)
+```js
+option = {
+ geo: {
+ // Enable zoom and pan.
+ roam: true,
+ ...
+ }
+};
+```
+For [map series](option.html#series-map)
+```js
+option = {
+ series: {
+ type: 'map',
+ // Enable zoom and pan.
+ roam: true,
+ ...
+ }
+};
+```
+
+See [roam](option.html#geo.roam).
+Also see example [SVG Map](${galleryEditorPath}geo-svg-map).
+
+
+## Named Element
+
+If intending to interact with some elements of SVG, we need to mark those elements in SVG firstly. That can be done simply by adding names to the target elements. The interaction related feature like [select](option.html#geo.select), [emphasis](option.html#geo.emphasis), [focus-blur](option.html#geo.emphasis.focus), [label](option.html#geo.label), [labelLayout](option.html#series-map.labelLayout), [tooltip](option.html#geo.tooltip) depend on those named elements.
+
+For example, we add name attribute `name="named_rect"` only to the left SVG `path`.
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve">
+ <path name="named_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" />
+ <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" />
+</svg>
+```
+Then hover on the left rect, it can be highlighted, whereas the right one can not.
+
+~[500x200](${galleryViewPath}doc-example/geo-svg-named-basic&edit=1&reset=1)
+
+Option for some certain named elements can be specified in [geo.regions](option.html#geo.regions), like:
+```js
+option = {
+ geo: {
+ map: 'some_svg',
+ regions: [{
+ name: 'element_name_1',
+ itemStyle: { ... }
+ }, {
+ name: 'element_name_2',
+ itemStyle: { ... }
+ }]
+ }
+};
+```
+
+
+Note:
++ These SVG elements can be named and recognized by ECharts:
+`rect`, `circle`, `line`, `ellipse`, `polygon`, `polyline`, `path`, `text`, `tspan`, `g`.
++ It is supported that multiple elements are named with the same name, will they will be highlighted/selected together.
+
+
+## Style Customization
+
+Although the style (such as color, font, lineWidth, ...) of SVG Elements can be defined directly in SVG file, style of named elements can also be customized in ECharts option, which will be handy in some scenario.
+
+Styles can be specified in [geo.itemStyle](option.html#geo.itemStyle) and [series-map.itemStyle](option.html#series-map.itemStyle) (also includes `emphasis.itemStyle`, `select.itemStyle`, `blur.itemStyle`, `regions[i].itemStyle`, `regions[i].emphasis.itemStyle`, `regions[i].select.itemStyle`, `regions[i].blur.itemStyle`). Some default style of the named elements can also be removed here (e.g., set `emphasis.itemStyle.color: null` to prevent the fill color from changing when mouse hovering.)
+
+Moreover, named elements can also be styled by [visualMap component](option.html#visualMap) if using [series-map](option.html#series-map). See [Beef Cuts](${galleryEditorPath}geo-beef-cuts).
+
+
+Note:
+Only these named elements can be styled in `itemStyle`:
+`rect`, `circle`, `line`, `ellipse`, `polygon`, `polyline`, `path`.
+
+
+## Select
+
+Named elements can adopt "select" feature by setting [geo.selectedMode](option.html#geo.selectedMode) or [series-map.selectedMode](option.html#series-map.selectedMode) as `'single'` or `'multiple'`. The style of element when selected can be specified in [geo.select](option.html#geo.select) or [series-map.select](option.html#series-map.select).
+
+The selected names can be obtained by [geoselectchanged](api.html#event.geoselectchanged) event, like:
+```js
+myChart.on('geoselectchanged', function (params) {
+ var selectedNames = params.allSelected[0].name;
+ console.log('selected', selectedNames);
+});
+```
+
+See [Flight Seatmap](${galleryEditorPath}geo-seatmap-flight) for more details.
+
+
+## Emphasis and Focus-Blur
+
+`emphasis` state (highlight when hovering) can be auto adopted to named elements.
+
+Especially, [geo.emphasis.focus](option.html#geo.emphasis.focus) and be set as `'self'` to enable "focus-blur" feature, where all all of the other elements will be blurred when hovering on an named element.
+
+See [Organ Visualization](${galleryEditorPath}geo-organ) for more details.
+
+
+## Tooltip
+
+Tooltip can be enabled or disabled on named elements.
+```js
+option = {
+ // Need to declare the root tooltip to
+ // enable tooltip feature on ECharts.
+ tooltip: {},
+ geo: {
+ map: 'some_svg',
+ tooltip: {
+ // Use `show` to enable/disable tooltip
+ // on geo coordinate system.
+ show: true
+ },
+ regions: [{
+ name: 'some_name1',
+ // Set named element specified tooltip option if needed.
+ tooltip: {
+ formatter: 'some special tooltip 1'
+ }
+ }, {
+ name: 'some_name2',
+ tooltip: {
+ formatter: 'some special tooltip 2'
+ }
+ }]
+ }
+};
+```
+
+If intending to disable the geo tooltip when hovering a on named elements, just:
+```js
+option = {
+ tooltip: {},
+ geo: {
+ map: 'some_svg',
+ tooltip: {
+ show: false
+ }
+ }
+};
+```
+
+See [SVG Map](${galleryEditorPath}geo-svg-map) for more details.
+
+
+## Label
+
+Although text label can be declared in SVG file directly via `<text>`/`<tspan>`, we can also use ECharts built-in label feature on named elements by specifying [geo.label](option.html#geo.label) or [series-map.label](option.html#series-map.label).
+
+By default the label feature is enabled when hovering on a named element. If intending to disable it, just:
+```js
+option = {
+ geo: {
+ map: 'some_svg',
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ }
+};
+```
+
+When multiple elements need to share one label text, we have two choices:
++ Wrap those elements in a named `<g>` (e.g., `<g name="name_a">`), where a single label will be displayed and located based on the bounding rect of the `<g>`.
++ Name those elements with the same name (e.g., `<path name="name_b"/><path name="name_b"/>`), where multiple labels will be displayed and located based on each elements self.
+
+For example (hover to show the labels):
+~[500x300](${galleryViewPath}doc-example/geo-svg-label-basic&edit=1&reset=1)
+
+Note: Only these named elements can be labeled via `label` option:
+`rect`, `circle`, `line`, `ellipse`, `polygon`, `polyline`, `path`, `g`.
+
+Also see [Organ Visualization](${galleryEditorPath}geo-organ) for the usage of label.
+
+
+## Events
+
+Mouse events or touch events of named elements can be listened simply by:
+```js
+// 'name1' is a name of a SVG element.
+myChart.on('click', { geoIndex: 0, name: 'name1' }, function (params) {
+ console.log(params);
+});
+```
+
+
+## Layout of SVG Base Map
+
+By default ECharts will position the SVG base map in the center of the canvas. If need some adjust, we usually only adjust [layoutCenter](option.html#geo.layoutCenter)/[layoutSize](option.html#geo.layoutSize), and occasionally `<svg viewBox="...">`/[geo.boundingCoords](option.html#geo.boundingCoords) (difference: clip or not). In most cases they are enough.
+
+If need some advanced precise control of the position and zoom, several concepts below can be noticed.
+
+The layout rule and options of [geo coordinate system](option.html#geo) and [map series](option.html#series-map) are the same. So we only demonstrate [geo coordinate system](option.html#geo) below.
+
+~[700x550](${galleryViewPath}doc-example/geo-svg-layout-basic&edit=1&reset=1)
+
+The demo above shows six [geo coordinate system](option.html#geo) with three SVG files in a single ECharts canvas. Each two [geo](option.html#geo) that are in the same column use the same SVG file.
+
+Firstly, what shapes looks like is determined by SVG file itself. That is, in the demo above, determined by the `<circle>` and `viewBox` attribute (`viewBox` cut (clips) the circle). We can noticed that the final shape outlines in each column are the same (despite the difference in position, size and scratch), since they use the same SVG file.
+
+Secondly, users can use either of the two option groups below to determine the location and the size of the `geo view port` of [geo coordinate system](option.html#geo) according to the entire chart canvas.
++ [layoutCenter](option.html#geo.layoutCenter), [layoutSize](option.html#geo.layoutSize) (recommended).
++ [top](option.html#geo.top), [right](option.html#geo.right), [bottom](option.html#geo.bottom), [left](option.html#geo.left) (which is used in the demo above).
+
+In the demo above, the six geo `geo view ports` are displayed as six black squares. `geo view port` is measured in echarts canvas pixel.
+
+Thirdly, a `bounding rect` of the SVG is determined and will be placed into its corresponding `geo view port`:
++ If [layoutCenter](option.html#geo.layoutCenter), [layoutSize](option.html#geo.layoutSize) is used, the `bounding rect` will be placed at the center and as big as possible into the `geo view port` (keep aspect ratio).
++ If [top](option.html#geo.top), [right](option.html#geo.right), [bottom](option.html#geo.bottom), [left](option.html#geo.left) is used, the view rect will be stretched to fill the `geo view port` entirely.
+
+`bounding rect` is measured in SVG file local unit. A `bounding rect` is determined by methods below:
+1. If [geo.boundingCoords](option.html#geo.boundingCoords) is specified, use it as `bounding rect`.
+2. Else if `<svg width="..." height="...">` is specified, use `[0, 0, width, height]` as `bounding rect`. (If only `width` or only `height` is specified, only use `[0, width]` or `[0, height]`).
+3. Else if `svg viewBox="...">` is specified, use `viewBox` as `bounding rect`.
+4. Else use the union bounding rect of all of the SVG elements as the `bounding rect`.
+5. If [geo.center](option.html#geo.center) or [geo.zoom](option.html#geo.zoom) is specified, transform the `bounding rect` determined by `1~4` above.
+
+
+## Place Series on SVG Base Map
+
+Series like [scatter](option.html#series-scatter), [effectScatter](option.html#series-effectScatter), [lines](option.html#series-lines), [custom](option.html#series-custom) that are available on [geo coordinate system](option.html#geo) can also be positioned and displayed on SVG base map.
+
+Note that in this kind of usage the unit of series data value is the SVG file local coords. For example:
+```js
+option = {
+ geo: {
+ map: 'some_svg'
+ },
+ series: {
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ geoIndex: 0,
+ data: [
+ // SVG local coords.
+ [488.2358421078053, 459.70913833075736],
+ [770.3415644319939, 757.9672194986475],
+ [1180.0329284196291, 743.6141808346214],
+ ]
+ }
+};
+```
+
+By the way, there is a simple approach to get SVG local coord:
+```js
+myChart.setOption({
+ geo: {
+ map: 'some_svg'
+ }
+});
+myChart.getZr().on('click', function (params) {
+ var pixelPoint = [params.offsetX, params.offsetY];
+ var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+ // When click, the data in SVG local coords will be printed,
+ // which can be used in `series.data`.
+ console.log(dataPoint);
+});
+```
+
+See also [SVG Scatter](${galleryEditorPath}geo-svg-scatter-simple), [SVG Lines](${galleryEditorPath}geo-svg-lines), [SVG Traffic](${galleryEditorPath}geo-traffic).
+
+
+## Unsupported SVG features
+
+Unfortunately it is difficult to implement a complete SVG parser. While the common SVG features are supported, at least these features listed below are not supported yet:
+
++ Flip and skew (will be supported `v5.1.2`):
+ + Not support `transform: skew(...)` (including `transform: matrix(...)` that includes skew).
+ + Not support `transform: scale(x, y)` that `x`, `y` has different sign while has `rotate` (e.g., `scale: (1, -1), rotate(90)`).
++ Standalone `<style>` tag is not supported.
+ + But inline style is supported (e.g., `<path style="color:red" />`).
++ Unit:
+ + Only `px` is supported. Other unit like `width="231.65mm"` is not supported.
+ + Percentage value like `<svg width="30%" height="40%">` is not supported.
++ `<defs>` tag:
+ + Only `<linearGradient>`, `<radialGradient>` are supported.
+ + other elements (e.g., `<pattern>`, `<path>`, ...) defined in `<defs>` are not supported yet.
++ `<linearGradient>`, `<radialGradient>`:
+ + `fx`, `fy` is not supported.
+ + `gradientTransform` attribute is not supported.
++ `fill:url(...)`, `stroke:utl(...)`:
+ + Only `url(#someId)` is supported.
+ + Other URL patterns are not supported. e.g.,
+ + `url(https://example.com/images/myImg.jpg)`;
+ + `url(data:image/png;base64,iRxVB0…)`;
+ + `url(myFont.woff)`;
++ `<switch>` tag:
+ + All the content inside `<switch>` tag will be displayed. The "switch" feature is not supported.
++ `<text>`:
+ + `textPath` is not supported.
+ + [Addressable character](https://www.w3.org/TR/SVG/text.html#TermAddressableCharacter) is not supported. That is,
+ ```xml
+ <!-- Not supported: -->
+ <tspan x="0 4.94 9.89">abc</tspan>
+ <!-- Supported: -->
+ <tspan x="0">a</tspan>
+ <tspan x="4.94">b</tspan>
+ <tspan x="9.89">c</tspan>
+ ```
+
diff --git a/en/tutorial/tutorial.md b/en/tutorial/tutorial.md
index 2b2501b..6935542 100644
--- a/en/tutorial/tutorial.md
+++ b/en/tutorial/tutorial.md
@@ -20,4 +20,5 @@
{{ import: rich-text }}
{{ import: headless }}
{{ import: renderer }}
+{{ import: geo-svg }}
{{ import: aria }}
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index f7dca60..48c5ddd 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -161,7 +161,7 @@ echarts.use(
> 从 `v5.1.0` 开始支持
- 可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG_a_a_a_a_a 。
+ 可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 [SVG 底图](tutorial.html#SVG%20%E5%BA%95%E5%9B%BE)。
+ `specialAreas`
diff --git a/zh/option-gl/component/geo3D-common.md b/zh/option-gl/component/geo3D-common.md
index f99def0..f95736b 100644
--- a/zh/option-gl/component/geo3D-common.md
+++ b/zh/option-gl/component/geo3D-common.md
@@ -42,7 +42,7 @@ $.get('map/json/china.json', function (chinaJson) {
});
```
-ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮廓。除此之外，你也可以通过其它手段获取地图的 [geoJSON](http://geojson.org/) 格式的数据注册到 ECharts 中。
+ECharts 使用 [GeoJSON](http://geojson.org/) 格式的数据作为地图的轮廓。除此之外，你也可以通过其它手段获取地图的 [GeoJSON](http://geojson.org/) 格式的数据注册到 ECharts 中。
{{ use: partial-box-size-geo3D(
componentType=${componentType},
diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md
index 0bf80e6..953d901 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -3,46 +3,79 @@
#${prefix} map(string) = ''
-地图类型。
+使用 [registerMap](api.html#echarts.registerMap) 注册的地图名称。
-ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在[地图下载界面](http://ecomfe.github.io/echarts-builder-web/map3.html)下载到需要的地图文件引入并注册到 ECharts 中。
-
-ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
-
-下面是两种类型的使用示例：
-
-** JavaScript 引入示例 **
-
-```html
-<script src="echarts.js"></script>
-<script src="map/js/china.js"></script>
-<script>
-var chart = echarts.init(document.getElementById('main'));
-chart.setOption({
- series: [{
- type: 'map',
- map: 'china'
- }]
+{{ if: ${inMap} }}
+**geoJSON 引入示例**
+```js
+$.get('map/china_geo.json', function (geoJson) {
+ echarts.registerMap('china', {geoJSON: geoJson});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ series: [{
+ type: 'map',
+ map: 'china',
+ ...
+ }]
+ });
});
-</script>
```
+也参见示例 [USA Population Estimates](${galleryEditorPath}map-usa)。
+{{ else }}
+**geoJSON 引入示例**
+```js
+$.get('map/china_geo.json', function (chinaJson) {
+ echarts.registerMap('china', {geoJSON: geoJson});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ geo: [{
+ map: 'china',
+ ...
+ }]
+ });
+});
+```
+也参见示例 [geoJSON hexbin](${galleryEditorPath}custom-hexbin)。
+{{ /if }}
-** JSON 引入示例 **
+如上所示，ECharts 可以使用 [GeoJSON](http://geojson.org/) 格式的数据作为地图的轮廓，你可以获取第三方的 [GeoJSON](http://geojson.org/) 数据注册到 ECharts 中。例如第三方资源 [maps](https://github.com/echarts-maps)。
+
+{{ if: ${inMap} }}
+**SVG 引入示例**
```js
-$.get('map/json/china.json', function (chinaJson) {
- echarts.registerMap('china', chinaJson);
+$.get('map/topographic_map.svg', function (svg) {
+ echarts.registerMap('topo', {svg: svg});
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
- map: 'china'
+ map: 'topo',
+ ...
+ }]
+ });
+});
+```
+也参见示例 [Beef Cuts](${galleryEditorPath}geo-beef-cuts)。
+{{ else }}
+**SVG 引入示例**
+```js
+$.get('map/topographic_map.svg', function (svg) {
+ echarts.registerMap('topo', {svg: svg});
+ var chart = echarts.init(document.getElementById('main'));
+ chart.setOption({
+ geo: [{
+ map: 'topo',
+ ...
}]
});
});
```
+也参见示例 [Flight Seatmap](${galleryEditorPath}geo-seatmap-flight)。
+{{ /if }}
+
+如上所示，ECharts 也可以使用 SVG 格式的地图。详情参见：[SVG 底图](tutorial.html#SVG%20%E5%BA%95%E5%9B%BE)。
-ECharts 使用 [geoJSON](http://geojson.org/) 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 [geoJSON](http://geojson.org/) 数据注册到 ECharts 中。参见示例 [USA Population Estimates](${galleryEditorPath}map-usa)
#${prefix} roam(boolean|string) = false
diff --git a/zh/tutorial/geo-svg.md b/zh/tutorial/geo-svg.md
new file mode 100644
index 0000000..1af752c
--- /dev/null
+++ b/zh/tutorial/geo-svg.md
@@ -0,0 +1,360 @@
+{{target: geo-svg}}
+
+# SVG 底图
+
+从 `v5.1.0` 开始，ECharts 支持在 [地理坐标系（geo）](option.html#geo) 和 [地图系列（map series）](option.html#series-map) 中使用 SVG 作为底图。之前只支持 [GeoJSON](http://geojson.org/) 格式的底图。
+
+有了这个功能，ECharts 能在任一种渲染模式（`canvas` 渲染模式和 `svg` 渲染模式）中绘制 SVG 底图，并且能够只用简单的 ECharts 配置项（option）就带来 [放大](option.html#geo.roam)、[平移](option.html#geo.roam)、[点选（select）](option.html#geo.select)、[高亮强调（emphasis）](option.html#geo.roam)、[聚焦-淡出（focus-blur）](option.html#geo.emphasis.focus)、[标签（label）](option.html#geo.label)、[标签布局（labelLayout）](option.html#series-map.labelLayout)、[提示框（tooltip）](option.html#geo.tooltip) 等特性。ECharts 中的所有在 [地理坐标系（geo）](option.html#geo) 中可用系列（如 [散点图（scatter）](option.html#s [...]
+
+这些是使用 SVG 底图的例子：
+
+[庖丁解牛](${galleryEditorPath}geo-beef-cuts) |
+[内脏数据](${galleryEditorPath}geo-organ) |
+[航班选座](${galleryEditorPath}geo-seatmap-flight) |
+[地图](${galleryEditorPath}geo-svg-map) |
+[散点图](${galleryEditorPath}geo-svg-scatter-simple) |
+[路径图](${galleryEditorPath}geo-svg-lines) |
+[交通](${galleryEditorPath}geo-svg-traffic)
+
+
+## 基本用法
+
+SVG 底图的用法与 [GeoJSON](http://geojson.org/) 底图的用法相同。
+
+如果在 [地理坐标系（geo）](option.html#geo) 中使用：
+```js
+$.get('map/organ.svg', function (svg) {
+ // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
+ echarts.registerMap('organ_diagram', {svg: svg});
+
+ var chart = echarts.init(document.getElementById('main'))。
+ chart.setOption({
+ geo: [{
+ // 引用注册过的底图。
+ map: 'organ_diagram',
+ ...
+ }]
+ });
+});
+```
+
+如果在 [地图系列（map series）](option.html#series-map) 中使用：
+```js
+$.get('map/beef_cuts.svg', function (svg) {
+ // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
+ echarts.registerMap('beef_cuts_diagram', {svg: svg})。
+
+ var chart = echarts.init(document.getElementById('main'))。
+ chart.setOption({
+ series: {
+ type: 'map',
+ // 引用注册过的底图。
+ map: 'beef_cuts_diagram',
+ ...
+ }
+ });
+});
+```
+
+
+## 缩放和平移
+
+[地理坐标系（geo）](option.html#geo)
+```js
+option = {
+ geo: {
+ // 启用缩放和平移。
+ roam: true,
+ ...
+ }
+};
+```
+[地图系列（map series）](option.html#series-map)
+```js
+option = {
+ series: {
+ type: 'map',
+ // 启用缩放和平移。
+ roam: true,
+ ...
+ }
+};
+```
+
+参见例子 [roam](option.html#geo.roam)、[SVG 地图](${galleryEditorPath}geo-svg-map)。
+
+
+## 具名元素
+
+如果要控制 SVG 中的某些元素，或者让某些元素能交互，我们首先要在 SVG 中标记这些元素：在这些元素上添加 `name` 属性（下文称此类添加过 `name` 属性的元素为：“具名元素”）。许多功能（如 [select](option.html#geo.select)、[emphasis](option.html#geo.emphasis)、[focus-blur](option.html#geo.emphasis.focus)、[label](option.html#geo.label)、[labelLayout](option.html#series-map.labelLayout) 和 [tooltip](option.html#geo.tooltip) 这类交互相关的功能）都依赖于对元素的命名。
+
+如下例，我们只在左边的 SVG `path` 上添加名称属性 `name="named_rect"`：
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" fill-rule="evenodd" xml:space="preserve">
+ <path name="named_rect" d="M 0,0 L 0,100 100,100 100,0 Z" fill="#765" />
+ <path d="M 150,0 L 150,100 250,100 250,0 Z" fill="#567" />
+</svg>
+```
+这样，鼠标 hover 时能高亮左边的矩形，但是右边的不行。
+
+~[500x200](${galleryViewPath}doc-example/geo-svg-named-basic&edit=1&reset=1)
+
+我们还可以在 [geo.regions](option.html#geo.regions) 中为具名元素指定一些专属配置项：
+```js
+option = {
+ geo: {
+ map: 'some_svg',
+ regions: [{
+ name: 'element_name_1',
+ itemStyle: { ... }
+ }, {
+ name: 'element_name_2',
+ itemStyle: { ... }
+ }]
+ }
+};
+```
+
+注意:
++ 只有这些 SVG 元素可以被命名：
+`rect`、`circle`、`line`、`ellipse`、`polygon`、`polyline`、`path`、`text`、`tspan`、`g`。
++ 支持多个元素以相同的名称命名，这样它们能被同时高亮、选中。
+
+
+## 自定义样式
+
+虽然 SVG 元素的样式（如颜色、字体、线宽等等）都能直接在 SVG 文件中定义，但 ECharts 也支持在 `option` 中为具名元素定制样式，这能提供不少便利。
+
+可以在 [geo.itemStyle](option.html#geo.itemStyle) 或 [series-map.itemStyle](option.html#series-map.itemStyle) 中设置样式（也包括 `emphasis.itemStyle`、`select.itemStyle`、`blur.itemStyle`、`regions[i].itemStyle`、`regions[i].emphasis.itemStyle`、`regions[i].select.itemStyle`、`regions[i].blur.itemStyle`）。也能在这里删除一些具名元素的默认样式（例如，设置 `emphasis.itemStyle.color: null` 后，鼠标 hover 时填充色就不会改变）。
+
+此外，使用 [series-map](option.html#series-map) 时，也可以用 [visualMap 组件](option.html#visualMap) 为具名元素赋予样式。参见例子 [庖丁解牛](${galleryEditorPath}geo-beef-cuts)。
+
+注意：
+只有这些具名元素可以在 `itemStyle` 中设置样式：
+`rect`、`circle`、`line`、`ellipse`、`polygon`、`polyline`、`path`。
+
+
+## 元素的“选中”能力（select）
+
+如果想使具名元素能被“选中”，把 [geo.selectedMode](option.html#geo.selectedMode) 或 [series-map.selectedMode](option.html#series-map.selectedMode) 设置为 `'single'` 或者 `'multiple'` 即可。元素被选中时的样式可以在 [geo.select](option.html#geo.select) 或 [series-map.select](option.html#series-map.select) 中设定。
+
+可以通过 [geoselectchanged](api.html#event.geoselectchanged) 事件获得所有被选中者的名称，例如：
+```js
+myChart.on('geoselectchanged', function (params) {
+ var selectedNames = params.allSelected[0].name;
+ console.log('selected', selectedNames);
+});
+```
+
+参见例子 [航班选座](${galleryEditorPath}geo-seatmap-flight)。
+
+
+## 元素的“高亮强调”（emphasis）和“聚焦-淡出”（focus-blur）
+
+具名元素可以自动在鼠标 hover 时有“高亮强调”（emphasis）的能力。
+
+此外，可以把 [geo.emphasis.focus](option.html#geo.emphasis.focus) 设置为 `'self'` 来启用 “聚焦-淡出”（focus-blur）功能。也就是，当鼠标 hover 在一个具名元素上时，所有其他元素都会被淡出。
+
+参见例子 [Organ Visualization](${galleryEditorPath}geo-organ)。
+
+
+## 提示框（tooltip）
+
+可以在具名元素上启用或禁用提示框（tooltip）功能。
+```js
+option = {
+ // 在 option 根部声明 tooltip 以整体开启 tooltip 功能。
+ tooltip: {},
+ geo: {
+ map: 'some_svg',
+ tooltip: {
+ // 用 `show` 来启用/禁用 geo 上的 tooltip。
+ show: true
+ },
+ regions: [{
+ name: 'some_name1',
+ // 如果需要的话，可以对特定具名元素指定 tooltip 参数。
+ tooltip: {
+ formatter: '一些特殊的提示 1'
+ }
+ }, {
+ name: 'some_name2',
+ tooltip: {
+ formatter: '一些特殊的提示 2'
+ }
+ }]
+ }
+};
+```
+
+如果想单独禁用 geo 上的 tooltip，只需：
+```js
+option = {
+ tooltip: {},
+ geo: {
+ map: 'some_svg',
+ tooltip: {
+ show: false
+ }
+ }
+};
+```
+
+参见例子 [SVG 地图](${galleryEditorPath}geo-svg-map)。
+
+
+## 标签（label）
+
+虽然可以直接在 SVG 中定义 `<text>`/`<tspan>` 来显示文本标签，但 ECharts 也支持用 [geo.label](option.html#geo.label) 或 [series-map.label](option.html#series-map.label) 来设置底图上的标签。
+
+标签功能默认在鼠标 hover 时是启用的。如果想禁用标签，只需：
+```js
+option = {
+ geo: {
+ map: 'some_svg',
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ }
+};
+```
+
+当想要多个元素共享一个标签时，我们有两种选择：
++ 将这些元素包裹在一个具名的 `<g>` 中（如 `<g="name_a">`）中，这样只会显示一个标签，并且基于 `<g>` 的 `boundingRect` 定位。
++ 给这些元素起相同的名字（如 `<path name="name_b"/><path name="name_b"/>`），这样每个元素都会显示一个标签，并且会根据每个元素自身显示和定位。
+
+例如（将鼠标 hover 到元素上能显示标签）：
+~[500x300](${galleryViewPath}doc-example/geo-svg-label-basic&edit=1&reset=1)
+
+注意：只有这些具名元素可以设置 `label`：
+`rect`、`circle`、`line`、`ellipse`、`polygon`、`polyline`、`path`、`g`。
+
+标签的用法也参见示例 [Organ Visualization](${galleryEditorPath}geo-organ)。
+
+
+## 事件
+
+可以用如下方式监听具名元素的鼠标事件或者触摸事件：
+```js
+// 'name1' 是一个 SVG 元素的名字。
+myChart.on('click', { geoIndex: 0, name: 'name1' }, function (params) {
+ console.log(params);
+});
+```
+
+
+## SVG 底图的布局
+
+在默认情况下，ECharts 会将 SVG 底图放置在画布的中心。如果需要调整的话，一般只调整 [layoutCenter](option.html#geo.layoutCenter)/[layoutSize](option.html#geo.layoutSize)，偶尔也可能要调整 `<svg viewBox="...">`/[geo.boundingCoords](option.html#geo.boundingCoords)（它们两个的区别是：是否产生剪裁）。在大多数情况下，用这些已经足够了。
+
+如果要做一些精确的位置定制，那么还得了解下面这些概念。
+
+[地理坐标系（geo）](option.html#geo) 和 [地图系列（map series）](option.html#series-map) 的布局规则和选项都是一样的。所以下面我们只讲 [地理坐标系（geo）](option.html#geo)。
+
+~[700x550](${galleryViewPath}doc-example/geo-svg-layout-basic&edit=1&reset=1)
+
+上面的例子只有一个 ECharts 画布，而三个 SVG 展示在六个 [地理坐标系（geo）](option.html#geo) 中。同一列中的两个 [地理坐标系（geo）](option.html#geo) 使用相同的 SVG。
+
+首先，形状的外观是由 SVG 文件本身决定的。也就是说，在上例中，由 `<circle>` 和 `viewBox` 属性决定（`viewBox` 会切割圆形）。可以注意，每一列的形状轮廓都一样（不管它们的位置、大小是否不同和是否被拉伸），因为它们使用的是同一个 SVG。
+
+其次，用户可以用下面任一组选项，指定 [地理坐标系（geo）](option.html#geo) 的视口（`view port`）的位置和大小。
++ [layoutCenter](option.html#geo.layoutCenter)、[layoutSize](option.html#geo.layoutSize)（推荐）。
++ [top](option.html#geo.top)、[right](option.html#geo.right)、[bottom](option.html#geo.bottom)、[left](option.html#geo.left)（在上例中使用的就是这组）。
+
+在上例中，六个 `geo view port` 用六个黑色方块表示。`geo view port` 的单位是 echarts 画布的像素。
+
+第三，确定 SVG 的 `bounding rect`，并放置到相应的 `geo view port` 里：
++ 如果用的是 [layoutCenter](option.html#geo.layoutCenter)、[layoutSize](option.html#geo.layoutSize)，`bounding rect` 会置于 `geo view port` 的中心，并尽量填满 `geo view port`（保持长宽比）。
++ 如果用的是 [top](option.html#geo.top)、[right](option.html#geo.right)、[bottom](option.html#geo.bottom)、[left](option.html#geo.left)，`bounding rect` 会被拉伸，完全填充 `geo view port`。
+
+`bounding rect` 的单位即 SVG 内部元素的度量单位。`bounding rect` 由以下方法决定：
+1. 如果设定了 [geo.boundingCoords](option.html#geo.boundingCoords)，则用它作 `bounding rect`。
+2. 否则，如果设定了 `<svg width="..." height="...">`，则用 `[0, 0, width, height]` 作为 `bounding rect`。（如果只设定了 `width` 或 `height`，则只使用 `[0, width]` 或 `[0, height]`）。
+3. 否则，如果设定了 `<svg viewBox="...">`，则用 `viewBox` 作 `bounding rect`。
+4. 否则，由整个 SVG 所有元素 `bounding rect` 的并集得到最终 `bounding rect`。
+5. 如果设定了 [geo.center](option.html#geo.center) 或 [geo.zoom](option.html#geo.zoom)，则把上述 `1~4` 得到的 `bounding rect` 进行相应的 `transform`。
+
+
+## 在 SVG 底图上绘制系列
+
+[scatter](option.html#series-scatter)、[effectScatter](option.html#series-effectScatter)、[lines](option.html#series-lines)、[custom](option.html#series-custom) 这些在 [地理坐标系（geo）](option.html#geo) 中可用的系列都可以在 SVG 底图上定位和显示。
+
+注意，在这种用法中，`series.data` 的值的单位即为是 SVG 内部元素的度量单位。比如说：
+```js
+option = {
+ geo: {
+ map: 'some_svg'
+ },
+ series: {
+ type: 'effectScatter',
+ coordinateSystem: 'geo',
+ geoIndex: 0,
+ data: [
+ // SVG local coords.
+ [488.2358421078053, 459.70913833075736],
+ [770.3415644319939, 757.9672194986475],
+ [1180.0329284196291, 743.6141808346214],
+ ]
+ }
+};
+```
+
+另外，有种简便方法可以获得 SVG 的坐标。
+```js
+myChart.setOption({
+ geo: {
+ map: 'some_svg'
+ }
+});
+myChart.getZr().on('click', function (params) {
+ var pixelPoint = [params.offsetX, params.offsetY];
+ var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+ // 在 SVG 上点击时，坐标会被打印。
+ // 这些坐标可以在 `series.data` 里使用。
+ console.log(dataPoint);
+});
+```
+
+参见示例 [SVG Scatter](${galleryEditorPath}geo-svg-scatter-simple)、[SVG Lines](${galleryEditorPath}geo-svg-lines)、[SVG Traffic](${galleryEditorPath}geo-traffic)。
+
+
+## 暂不支持的 SVG 功能
+
+实现一个完整的 SVG 解析器有点困难。虽然已经支持了常用的 SVG 功能，但至少下面列出的这些还没支持：
+
++ 翻转（flip）和倾斜（skew）（将在 `v5.1.2` 支持）：
+ + 不支持 `transform: skew(...)`（包括包含 skew 的 `transform: matrix(...)`）。
+ + 不支持当 `transform: scale(x, y)` 中 `x`/`y` 正负不同且有 `rotate`（例如，`scale: (1, -1), rotate(90)`）。
++ 不支持 `<style>` 标签。
+ + 但内联样式是支持的（例如支持 `<path style="color:red" />`）。
++ 单位：
+ + 只支持 `px`。不支持其他单位如 `width="231.65mm"`。
+ + 不支持百分比值，如不支持 `<svg width="30%" height="40%">`。
++ `<defs>` 标签：
+ + 只支持 `<linearGradient>`、`<radialGradient>`。
+ + 还不支持在 `<defs>` 中定义其他元素（如 `<pattern>`、`<path>`、...）。
++ `<linearGradient>`、`<radialGradient>`：
+ + 不支持 `fx`、`fy`。
+ + 不支持 `gradientTransform`。
++ `fill:url(..)`, `stroke:utl(..)`：
+ + 只支持 `url(#someId)`。
+ + 不支持其他 URL 模式，例如不支持：
+ + `url(https://example.com/images/myImg.jpg)`。
+ + `url(data:image/png;base64,iRxVB0...)`。
+ + `url(myFont.woff)`。
++ `<switch>` 标签：
+ + `<switch>` 标签内的所有内容都会显示。不支持“切换”功能。
++ `<text>`。
+ + 不支持 `textPath`。
+ + 不支持 [Addressable character](https://www.w3.org/TR/SVG/text.html#TermAddressableCharacter)，也就是说：
+ ```xml
+ <!-- 不支持： -->
+ <tspan x="0 4.94 9.89">abc</tspan>。
+ <!-- 支持： -->
+ <tspan x="0">A</tspan>
+ <tspan x="4.94">b</tspan>
+ <tspan x="9.89">C</tspan>
+ ```
diff --git a/zh/tutorial/tutorial.md b/zh/tutorial/tutorial.md
index e0486e4..a06d864 100644
--- a/zh/tutorial/tutorial.md
+++ b/zh/tutorial/tutorial.md
@@ -22,6 +22,7 @@
{{ import: rich-text }}
{{ import: headless }}
{{ import: renderer }}
+{{ import: geo-svg }}
{{ import: aria }}
{{ import: echarts-gl }}
{{ import: weixin-application }}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 02/10: doc: registerMap and geoselectchanged.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 7abd9217fb98df0cdfdc09a33f6422780ca355b8
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 02:24:37 2021 +0800
doc: registerMap and geoselectchanged.
---
en/api/echarts.md | 104 +++++++++++++++++++++++++++++++++++-------------------
en/api/events.md | 10 +++++-
zh/api/echarts.md | 98 ++++++++++++++++++++++++++++++++------------------
zh/api/events.md | 10 +++++-
4 files changed, 149 insertions(+), 73 deletions(-)
diff --git a/en/api/echarts.md b/en/api/echarts.md
index 1f6ede8..e6d6580 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -124,7 +124,24 @@ See [Use ECharts with bundler and NPM](tutorial.html#Use%20ECharts%20with%20bund
## registerMap(Function)
```js
-(mapName: string, geoJson: Object, specialAreas?: Object)
+(
+ mapName: string,
+ opt: {
+ geoJSON: Object | string;
+ specialAreas?: Object;
+ }
+)
+| (
+ mapName: string,
+ opt: {
+ svg: Object | string;
+ }
+)
+| (
+ mapName: string,
+ geoJSON: Object | string,
+ specialAreas?: Object
+)
```
Registers available maps. This can only be used after including [geo](option.html#geo) component or chart series of [map](option.html#series-map).
@@ -135,40 +152,48 @@ Please refer to [option.geo](option.html#geo.map) for usage.
Map name, referring to `map` value set in [geo](option.html#geo) component or [map](option.html#series-map).
-+ `geoJson`
-
- Data in GeoJson format. See [https://geojson.org/](https://geojson.org/) for more format information.
-
-+ `specialAreas`
-
- Optional; zoomed part of a specific area in the map for better visual effect.
-
- **For example [USA Population Estimates](${galleryEditorPath}map-usa): **
- ```js
-echarts.registerMap('USA', usaJson, {
- // Move Alaska to the bottom left of United States
- Alaska: {
- // Upper left longitude
- left: -131,
- // Upper left latitude
- top: 25,
- // Range of longitude
- width: 15
- },
- // Hawaii
- Hawaii: {
- left: -110,
- top: 28,
- width: 5
- },
- // Puerto Rico
- 'Puerto Rico': {
- left: -76,
- top: 26,
- width: 2
- }
-});
- ```
++ `opt`
+
+ + `geoJSON`
+
+ Optional; Data in GeoJson format. See [https://geojson.org/](https://geojson.org/) for more format information. Can be a JSON string or a parsed object. This key can also be `geoJson`.
+
+ + `svg`
+
+ Optional; Data in SVG format. Can be a SVG string or a parsed SVG DOM object. See more info in SVG_a_a_a_a_a.
+
+ + `specialAreas`
+
+ Optional; zoomed part of a specific area in the map for better visual effect.
+
+ Only work for `geoJSON`, not work for `svg`.
+
+ **For example [USA Population Estimates](${galleryEditorPath}map-usa): **
+ ```js
+ echarts.registerMap('USA', usaJson, {
+ // Move Alaska to the bottom left of United States
+ Alaska: {
+ // Upper left longitude
+ left: -131,
+ // Upper left latitude
+ top: 25,
+ // Range of longitude
+ width: 15
+ },
+ // Hawaii
+ Hawaii: {
+ left: -110,
+ top: 28,
+ width: 5
+ },
+ // Puerto Rico
+ 'Puerto Rico': {
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
+ ```
## getMap(Function)
```js
@@ -179,13 +204,18 @@ Get a registered map in the following format:
```js
{
- // geoJson data of the map
- geoJson: Object,
+ // geoJSON data of the map
+ geoJSON: Object,
// special area, see registerMap() for more information
specialAreas: Object
}
```
+Note:
++ `geoJSON` can also be `geoJson`, they have the same reference.
++ SVG registered by `registerMap` can not be obtained by this method yet.
+
+
## registerTheme(Function)
```js
(themeName: string, theme: Object)
diff --git a/en/api/events.md b/en/api/events.md
index e71944b..8449bf1 100644
--- a/en/api/events.md
+++ b/en/api/events.md
@@ -480,7 +480,15 @@ It will be triggered when user clicks to select.
seriesId: string
// data name
name: name,
- // table of all selected data.
+ // list for each ${componentType} component.
+ allSelected: ({
+ ${componentType}Index: number
+ // selected names of each ${componentType} component.
+ name: string[]
+ })[],
+ // (deprecated).
+ // all selected data.
+ // status of different ${componentType} components will be merged.
selected: {
[name: string]: boolean
}
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index 295bae3..0d2872a 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -123,9 +123,26 @@ echarts.use(
## registerMap(Function)
```js
-(mapName: string, geoJson: Object, specialAreas?: Object)
+(
+ mapName: string,
+ opt: {
+ geoJSON: Object | string;
+ specialAreas?: Object;
+ }
+)
+| (
+ mapName: string,
+ opt: {
+ svg: Object | string;
+ }
+)
+| (
+ mapName: string,
+ geoJSON: Object | string,
+ specialAreas?: Object
+)
```
-注册可用的地图，必须在包括 [geo](option.html#geo) 组件或者 [map](option.html#series-map) 图表类型的时候才能使用。
+注册可用的地图，只在 [geo](option.html#geo) 组件或者 [map](option.html#series-map) 图表类型中使用。
使用方法见 [option.geo](option.html#geo.map)。
@@ -134,40 +151,48 @@ echarts.use(
地图名称，在 [geo](option.html#geo) 组件或者 [map](option.html#series-map) 图表类型中设置的 `map` 对应的就是该值。
-+ `geoJson`
++ `opt`
- GeoJson 格式的数据，具体格式见 [https://geojson.org/](https://geojson.org/)。
+ + `geoJSON`
-+ `specialAreas`
+ 可选。GeoJson 格式的数据，具体格式见 [https://geojson.org/](https://geojson.org/)。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 `geoJson`，效果相同。
- 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。
+ + `svg`
- **示例 [USA Population Estimates](${galleryEditorPath}map-usa)：**
- ```js
-echarts.registerMap('USA', usaJson, {
- // 把阿拉斯加移到美国主大陆左下方
- Alaska: {
- // 左上角经度
- left: -131,
- // 左上角纬度
- top: 25,
- // 经度横跨的范围
- width: 15
- },
- // 夏威夷
- Hawaii: {
- left: -110,
- top: 28,
- width: 5
- },
- // 波多黎各
- 'Puerto Rico': {
- left: -76,
- top: 26,
- width: 2
- }
-});
- ```
+ 可选。SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG_a_a_a_a_a 。
+
+ + `specialAreas`
+
+ 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。
+
+ 只在 `geoJSON` 中生效，`svg` 中不生效。
+
+ **示例 [USA Population Estimates](${galleryEditorPath}map-usa)：**
+ ```js
+ echarts.registerMap('USA', usaJson, {
+ // 把阿拉斯加移到美国主大陆左下方
+ Alaska: {
+ // 左上角经度
+ left: -131,
+ // 左上角纬度
+ top: 25,
+ // 经度横跨的范围
+ width: 15
+ },
+ // 夏威夷
+ Hawaii: {
+ left: -110,
+ top: 28,
+ width: 5
+ },
+ // 波多黎各
+ 'Puerto Rico': {
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
+ ```
## getMap(Function)
@@ -178,13 +203,18 @@ echarts.registerMap('USA', usaJson, {
```js
{
- // 地图的 geoJson 数据
- geoJson: Object,
+ // 地图的 geoJSON 数据
+ geoJSON: Object,
// 地图的特殊区域，见 registerMap
specialAreas: Object
}
```
+注：
++ `geoJSON` 也可写为 `geoJson`，二者引用的是相同的内容。
++ 对于 `registerMap` 所注册的 SVG ，暂并不支持从此方法中返回。
+
+
## registerTheme(Function)
```js
(themeName: string, theme: Object)
diff --git a/zh/api/events.md b/zh/api/events.md
index 0bd1e39..7b09c29 100644
--- a/zh/api/events.md
+++ b/zh/api/events.md
@@ -466,10 +466,18 @@ chart.on('finished', function () {
{
type: '${componentType}selectchanged',
// 系列 ID，可以在 option 中传入
- seriesId: string
+ seriesId: string,
// 数据名称
name: name,
+ // 每个 ${componentType} 组件的选中信息列表。
+ allSelected: ({
+ ${componentType}Index: number
+ // 每个 ${componentType} 组件上选中的名称列表。
+ name: string[]
+ })[],
+ // 不推荐使用此属性。
// 所有数据的选中状态表。
+ // 不同 ${componentType} 组件的状态会被合并在一起。
selected: {
[name: string]: boolean
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts-doc] 03/10: doc: add geo highlight downplay and select
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
commit 678baa01917d6993e377a8fe6a29a0d818d019c3
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Apr 27 15:08:45 2021 +0800
doc: add geo highlight downplay and select
---
en/api/action.md | 96 +++++++++++++++++++++++++++++++++++++++-----------------
zh/api/action.md | 91 ++++++++++++++++++++++++++++++++++++-----------------
2 files changed, 130 insertions(+), 57 deletions(-)
diff --git a/en/api/action.md b/en/api/action.md
index d7ef7e3..2089381 100644
--- a/en/api/action.md
+++ b/en/api/action.md
@@ -1,12 +1,24 @@
-{{ target: action-series-query }}// optional; series index; could be an array of multiple series
- seriesIndex?: number|Array,
- // optional; series name; could be an array of multiple series
- seriesName?: string|Array,{{/target}}
+{{ target: action-series-query }}// Find ${componentType} by index or id or name.
+ // Can be an array to find multiple components.
+ seriesIndex?: number | number[],
+ seriesId?: string | string[],
+ seriesName?: string | string[],{{/target}}
{{ target: action-data-query }}// data index; could assign by name attribute when not defined
- dataIndex?: number,
+ dataIndex?: number | number[],
// optional; data name; ignored when dataIndex is defined
- name?: string{{/target}}
+ name?: string | string[],{{/target}}
+
+{{ target: action-component-query }}// Find ${componentType} by index or id or name.
+ // Can be an array to find multiple components.
+ ${componentType}Index?: number | number[],
+ ${componentType}Id?: string | string[],
+ ${componentType}Name?: string | string[],{{/target}}
+
+{{ target: action-component-item-query }}// ${componentItemDesc} in ${componentType} component.
+ // Can be an array to specify multiple names.
+ name?: string | string[],{{/target}}
+
{{ target: action }}
@@ -18,34 +30,51 @@ Chart actions supported by ECharts are triggered through [dispatchAction](~echar
## highlight(Action)
-Highlights specified data.
+Highlights specified data graphics.
-Series is specified through `seriesName` or `seriesIndex`. If another data needs to be specified, then use `dataIndex` or `name`.
```js
+// If highlight series:
dispatchAction({
type: 'highlight',
+
{{ use: action-series-query }}
- // options are index of data
- dataIndex?: number,
- // options are data name
- name?: string
-})
+
+ {{ use: action-data-query }}
+});
+
+// If highlight geo component:
+dispatchAction({
+ type: 'highlight',
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+});
```
+
## downplay(Action)
-Downplay specified data.
+Downplay specified data graphics.
-Series is specified through `seriesName` or `seriesIndex`. If another data needs to be specified, then use `dataIndex` or `name`.
```js
+// If downplay series:
dispatchAction({
type: 'downplay',
+
{{ use: action-series-query }}
- // options are index of data
- dataIndex?: number,
- // options are data name
- name?: string
-})
+
+ {{ use: action-data-query }}
+});
+
+// If downplay geo component:
+dispatchAction({
+ type: 'downplay',
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+});
```
## select(Action)
@@ -55,8 +84,9 @@ Select specified data. Selected data will apply the style of [select](option.htm
```js
dispatchAction({
type: 'select',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -68,8 +98,9 @@ Unselect specified data.
```js
dispatchAction({
type: 'unselect',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -81,8 +112,9 @@ Toggle selected status of specified data.
```js
dispatchAction({
type: 'toggleSelected',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -449,8 +481,10 @@ Selects the specified ${name}.
```js
dispatchAction({
type: '${componentType}Select',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
@@ -462,8 +496,10 @@ Cancels selecting specified ${name}.
```js
dispatchAction({
type: '${componentType}UnSelect',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}unselected](~events.${componentType}unselected)
@@ -474,8 +510,10 @@ Toggles selecting status of specified ${name}.
```js
dispatchAction({
type: '${componentType}ToggleSelect',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}selectchanged](~events.${componentType}selectchanged)
diff --git a/zh/api/action.md b/zh/api/action.md
index 4f1d58b..affc030 100644
--- a/zh/api/action.md
+++ b/zh/api/action.md
@@ -1,12 +1,22 @@
-{{ target: action-series-query }}// 可选，系列 index，可以是一个数组指定多个系列
- seriesIndex?: number|Array,
- // 可选，系列名称，可以是一个数组指定多个系列
- seriesName?: string|Array,{{/target}}
+{{ target: action-series-query }}// 用 index 或 id 或 name 来指定系列。
+ // 可以使用数组指定多个系列。
+ seriesIndex?: number | number[],
+ seriesId?: string | string[],
+ seriesName?: string | string[],{{/target}}
-{{ target: action-data-query }}// 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
- dataIndex?: number,
- // 可选，数据名称，在有 dataIndex 的时候忽略
- name?: string{{/target}}
+{{ target: action-data-query }}// 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
+ dataIndex?: number | number[],
+ // 可选，数据项名称，在有 dataIndex 的时候忽略
+ name?: string | string[],{{/target}}
+
+{{ target: action-component-query }}// 用 index 或 id 或 name 来指定 ${componentType} 组件。
+ // 可以用数组指定多个 ${componentType} 组件。
+ ${componentType}Index?: number | number[],
+ ${componentType}Id?: string | string[],
+ ${componentType}Name?: string | string[],{{/target}}
+
+{{ target: action-component-item-query }}// ${componentType} 组件中 ${componentItemDesc} 名称。可以是一个数组指定多个名称。
+ name?: string | string[],{{/target}}
{{ target: action }}
@@ -20,32 +30,48 @@ ECharts 中支持的图表行为，通过 [dispatchAction](~echartsInstance.disp
高亮指定的数据图形。
-通过`seriesName`或者`seriesIndex`指定系列。如果要再指定某个数据可以再指定`dataIndex`或者`name`。
```js
+// 如果要高亮系列：
dispatchAction({
type: 'highlight',
+
{{ use: action-series-query }}
- // 可选，数据的 index
- dataIndex?: number,
- // 可选，数据的 名称
- name?: string
-})
+
+ {{ use: action-data-query }}
+});
+
+// 如果要高亮 geo 组件：
+dispatchAction({
+ type: 'highlight',
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+});
```
## downplay(Action)
取消高亮指定的数据图形。
-通过`seriesName`或者`seriesIndex`指定系列。如果要指定某个数据可以再指定`dataIndex`或者`name`。
```js
+// 如果要取消高亮系列：
dispatchAction({
type: 'downplay',
+
{{ use: action-series-query }}
- // 可选，数据的 index
- dataIndex?: number,
- // 可选，数据的 名称
- name?: string
+
+ {{ use: action-data-query }}
})
+
+// 如果要取消高亮 geo 组件：
+dispatchAction({
+ type: 'downplay',
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
+});
```
## select(Action)
@@ -55,8 +81,9 @@ dispatchAction({
```js
dispatchAction({
type: 'select',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -68,8 +95,9 @@ dispatchAction({
```js
dispatchAction({
type: 'unselect',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -81,8 +109,9 @@ dispatchAction({
```js
dispatchAction({
type: 'toggleSelected',
- // 图例名称
+
{{ use: action-series-query }}
+
{{ use: action-data-query }}
})
```
@@ -434,8 +463,10 @@ api.dispatchAction({
```js
dispatchAction({
type: '${componentType}Select',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
@@ -447,8 +478,10 @@ dispatchAction({
```js
dispatchAction({
type: '${componentType}UnSelect',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}unselected](~events.${componentType}unselected)
@@ -459,8 +492,10 @@ dispatchAction({
```js
dispatchAction({
type: '${componentType}ToggleSelect',
- {{ use: action-series-query }}
- {{ use: action-data-query }}
+
+ {{ use: action-component-query(componentType = 'geo') }}
+
+ {{ use: action-component-item-query(componentType = 'geo', componentItemDesc = 'region') }}
})
```
**EVENT:** [${componentType}selectchanged](~events.${componentType}selectchanged)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org