diff --git a/README.md b/README.md
index 6c8c9835..62eb35bc 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ module.exports = {
```
-## Tips About Writing Doc
+## Tips for Writing Doc
### "Since Version"
"Since Version" is necessary in doc.
diff --git a/en/api/echarts.md b/en/api/echarts.md
index e430abe8..06cb9ddc 100644
--- a/en/api/echarts.md
+++ b/en/api/echarts.md
@@ -159,49 +159,86 @@ Registers available maps. This can only be used after including [geo](option.htm
Please refer to [option.geo](option.html#geo.map) for usage.
-**Parameters**
-+ `mapName`
+**Parameters:**
++ **@param `mapName`:**
Map name, referring to `map` value set in [geo](option.html#geo) component or [map](option.html#series-map).
-+ `opt`
++ **@param `opt.geoJSON`:**
- + `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`.
+ 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 Base Map](tutorial.html#SVG%20Base%20Map%20in%20Geo%20Coords%20and%20Map%20SeriesSVG%20Base%20Map). Introduced in v5.1.0
+ For example, A minimal geoJSON:
+ ```ts
+ const geoJSONSample = {
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [[200, 3000], [500, 3000], [500, 5000], [200, 5000]]
+ ]
+ },
+ "properties": {
+ "name": "Some Place",
+ "cp": [220, 2100]
+ }
+ }
+ ]
+ };
+ echarts.registerMap('my_geo_sample', {geoJSON: geoJSONSample});
+ ```
+ Note:
+ + `features[i].properties.name` in GeoJSON is required by ECharts to query the corresponding region, or display the label. Property `name` is used by default, but can also be other properties, see [geo.nameProperty](option.html#geo.nameProperty).
+ + `features[i].properties.cp` is an optional property that ECharts can recoganize. It provides coordinates on which the label can be displayed. If not provided, the label will be displayed at the center of the region.
- + `specialAreas` Optional. zoomed part of a specific area in the map for better visual effect. Only work for `geoJSON`.
++ **@param `opt.svg`:**
-**For example [USA Population Estimates](${galleryEditorPath}map-usa): **
-```ts
-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
- }
-});
-```
+ 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%20in%20Geo%20Coords%20and%20Map%20SeriesSVG%20Base%20Map). Introduced in `v5.1.0`.
-Note:
+ For example, A minimal SVG:
+ ```ts
+ const mySVG = `
+ `;
+ echarts.registerMap('my_geo_sample', {svg: mySVG});
+ ```
+
++ **@param `opt.specialAreas`:**
+
+ Optional. zoomed part of a specific area in the map for better visual effect. Only work for `geoJSON`.
+
+ **[An example of specialAreas](${galleryEditorPath}map-usa): **
+ ```ts
+ 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
+ }
+ });
+ ```
-If you only import the required components in your project, starting from v5.3.0 `registerMap` has to be used after the `MapChart` or `GeoComponent` is imported.
+Note: If you only import the required components in your project, starting from v5.3.0 `registerMap` cannot be called unless `MapChart` or `GeoComponent` is imported (ES module import).
## getMap(Function)
```ts
diff --git a/en/option/component/axis-common.md b/en/option/component/axis-common.md
index 41482796..8642911f 100644
--- a/en/option/component/axis-common.md
+++ b/en/option/component/axis-common.md
@@ -654,6 +654,8 @@ The content displayed at the end of the text after truncation.
{{ if: ${componentType} === 'xAxis' || ${componentType} === 'yAxis' }}
#${prefix} nameMoveOverlap(boolean) = true
+
+
{{ use: partial-version(version = "6.0.0") }}
Whether to move axis name to avoid overlap with axis labels.
diff --git a/en/option/component/geo-common.md b/en/option/component/geo-common.md
index 3cc37e71..5337e181 100644
--- a/en/option/component/geo-common.md
+++ b/en/option/component/geo-common.md
@@ -3,10 +3,12 @@
{{ if: ${inMap} }}
{{ var: componentNameInLink = 'series-map' }}
+{{ var: componentNameReadable = 'map series' }}
{{ var: componentMainType = 'series' }}
{{ var: componentSubType = 'map' }}
{{ else }}
{{ var: componentNameInLink = 'geo' }}
+{{ var: componentNameReadable = 'geo component' }}
{{ var: componentMainType = 'geo' }}
{{ var: componentSubType = null }}
{{ /if }}
@@ -165,7 +167,8 @@ Note: `stream` is not required in the `projection`.
{{ use: partial-view-coord-sys-common(
prefix = ${prefix},
componentMainType = ${componentMainType},
- componentSubType = ${componentSubType}
+ componentSubType = ${componentSubType},
+ supportClip = true
) }}
@@ -297,15 +300,17 @@ Map area style in blurred state.
) }}
{{ /if }}
-{{ use: partial-rect-layout(
- prefix = ${prefix}
+{{ use: partial-rect-layout-width-height(
+ prefix = ${prefix},
+ hostName = ${componentNameReadable},
+ hintPreserveAspect = true,
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix} layoutCenter(Array) = null
-`layoutCenter` and `layoutSize` provides layout strategy other than `left/right/top/bottom/width/height`.
-
-When using `left/right/top/bottom/width/height`, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, `layoutCenter` attribute can be used to define the center position of map, and `layoutSize` can be used to define the size of map. For example:
+`layoutCenter` and `layoutSize` can specify the rectangular area allocated to ${componentNameReadable}, where `layoutCenter` defines the center position of the area, and `layoutSize` defines the size of the area. For example:
```ts
layoutCenter: ['30%', '30%'],
@@ -317,10 +322,40 @@ layoutSize: 100
After setting these two values, `left/right/top/bottom/width/height` becomes invalid.
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix} layoutSize(number|string)
-Size of map, see `layoutCenter` for more information. Percentage relative to screen width, and absolute pixel values are supported.
+Size of map, see [layoutCenter](${componentNameInLink}.layoutCenter) for more information. Percentage relative to container width/height, and absolute pixel values are supported.
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-preserve-aspect(
+ prefix = ${prefix},
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+#${prefix} clip(boolean) = false
+
+{{ use: partial-version(version = "6.0.0") }}
+
+{{ use: partial-view-coord-sys-allocated-rect-desc(
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink},
+ isGeoOrMap = true
+) }}
+
+`clip` specifies whether to hide the outside part of the map with respect to the allocated rect.
+**See example:** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
{{ target: partial-geo-common-state }}
diff --git a/en/option/partial/coord-sys.md b/en/option/partial/coord-sys.md
index 3b4eebbc..4efbf8d7 100644
--- a/en/option/partial/coord-sys.md
+++ b/en/option/partial/coord-sys.md
@@ -276,7 +276,7 @@ When `geoIndex` or `geoId` is specified, [series-map.map](~series-map.map) other
## geoId(number) = undefined
{{ if: ${version} }}
-{{ use: partial-version(version = ${version}) }}
+{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }}
{{ /if }}
The id of the [geographic coordinate system](~geo) to base on. When mutiple `geographic` exist within an ECharts instance, use this to specify the corresponding `geographic`.
diff --git a/en/option/partial/rect-layout-width-height.md b/en/option/partial/rect-layout-width-height.md
index bdc8ff1c..be3b9f42 100644
--- a/en/option/partial/rect-layout-width-height.md
+++ b/en/option/partial/rect-layout-width-height.md
@@ -15,7 +15,10 @@
defaultLeft = ${defaultLeft},
defaultTop = ${defaultTop},
defaultRight = ${defaultRight},
- defaultBottom = ${defaultBottom}
+ defaultBottom = ${defaultBottom},
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix|default("#")} width(string|number) = ${defaultWidth|default("'auto'")}
@@ -26,6 +29,14 @@
Width of ${hostNameStr}. {{ if: !${defaultWidth} }}Adaptive by default.{{ /if }}
+`width` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`.
+
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
#${prefix|default("#")} height(string|number) = ${defaultHeight|default("'auto'")}
{{ if: ${version} }}
@@ -34,3 +45,10 @@ Width of ${hostNameStr}. {{ if: !${defaultWidth} }}Adaptive by default.{{ /if }}
Height of ${hostNameStr}. {{ if: !${defaultHeight} }}Adaptive by default.{{ /if }}
+`height` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`.
+
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
diff --git a/en/option/partial/rect-layout.md b/en/option/partial/rect-layout.md
index 986fa56b..3c1e977d 100644
--- a/en/option/partial/rect-layout.md
+++ b/en/option/partial/rect-layout.md
@@ -23,10 +23,21 @@
Distance between ${hostNameStr} and the left side of the container.
-`left` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
+`left` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`; and it can also be `'left'`, `'center'`, or `'right'`.
If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the component will be aligned automatically based on position.
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} top(string|number) = ${defaultTop|default("'auto'")}
{{ if: ${version} }}
@@ -35,10 +46,21 @@ If the `left` value is set to be `'left'`, `'center'`, or `'right'`, then the co
Distance between ${hostNameStr} and the top side of the container.
-`top` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
+`top` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`; and it can also be `'top'`, `'middle'`, or `'bottom'`.
If the `top` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the component will be aligned automatically based on position.
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} right(string|number) = ${defaultRight|default("'auto'")}
{{ if: ${version} }}
@@ -47,10 +69,21 @@ If the `top` value is set to be `'top'`, `'middle'`, or `'bottom'`, then the com
Distance between ${hostNameStr} and the right side of the container.
-`right` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
+`right` can be a pixel value like `20`; it can also be a percentage value relative to the container width like `'20%'`.
{{ if: !${defaultRight} }}Adaptive by default.{{ /if }}
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} bottom(string|number) = ${defaultBottom|default("'auto'")}
{{ if: ${version} }}
@@ -59,7 +92,34 @@ Distance between ${hostNameStr} and the right side of the container.
Distance between ${hostNameStr} and the bottom side of the container.
-`bottom` can be a pixel value like `20`; it can also be a percentage value relative to container width like `'20%'`.
+`bottom` can be a pixel value like `20`; it can also be a percentage value relative to the container height like `'20%'`.
{{ if: !${defaultBottom} }}Adaptive by default.{{ /if }}
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
+
+{{ target: partial-preserve-aspect-hint }}
+
+{{ if: ${hintPreserveAspect} && ${componentNameInLink} }}
+> Note: If the graphic elements are unexpectedly distorted, see [preserveAspect](~${componentNameInLink}.preserveAspect).
+{{ /if }}
+
+
+
+{{ target: partial-geo-rect-layout-approaches-hint }}
+
+{{ if: ${hintGeoRectLayoutApproaches} && ${componentNameInLink} }}
+> Note: There are two rectangular layout approaches for ${componentNameInLink}. You can use either one:
+> - [${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height)
+> - [${componentNameInLink}.layoutCenter](~${componentNameInLink}.layoutCenter) / [.layoutSize](~${componentNameInLink}.layoutSize)
+{{ /if }}
diff --git a/en/option/partial/roam.md b/en/option/partial/roam.md
index 6f1c31fc..e0c92e3a 100644
--- a/en/option/partial/roam.md
+++ b/en/option/partial/roam.md
@@ -1,13 +1,17 @@
-{{ target: partial-roam }}
+{{ target: partial-roam-desc }}
-Whether to enable mouse zooming and translating. `false` by default. If either zooming or translating is wanted, it can be set to `'scale'` or `'move'`. Otherwise, set it to be `true` to enable both.
+Whether to enable mouse or touch roam (move and zoom). Optional values are:
++ `false`: roam is disabled.
++ `'scale'` or `'zoom'`: zoom only.
++ `'move'` or `'pan'`: move (translation) only.
++ `true`: both zoom and move (translation) are available.
-{{ target: partial-scale-limit }}
+{{ target: partial-scale-limit-desc }}
{{ if: ${version} }}
{{ use: partial-version(
@@ -15,13 +19,20 @@ Whether to enable mouse zooming and translating. `false` by default. If either z
) }}
{{ /if }}
-Limit of scaling, with `min` and `max`.
+Limit of [zooming](~${componentNameInLink}.roam), with `min` and `max`.
+
+{{ use: partial-zoom-value-desc }}
#${prefix} min(number)
-Minimum scaling
+Minimum zoom
#${prefix} max(number)
-Maximum scaling
+Maximum zoom
+
+
+{{ target: partial-zoom-value-desc }}
+
+The value less than `1` indicates zooming out, while the value greater than `1` indicates zooming in.
diff --git a/en/option/partial/view-coord-sys.md b/en/option/partial/view-coord-sys.md
index 6d4ad76f..99bdbf50 100644
--- a/en/option/partial/view-coord-sys.md
+++ b/en/option/partial/view-coord-sys.md
@@ -19,13 +19,17 @@
#${prefix} center(Array)
{{ if: ${componentNameInLink} === 'series-graph' || ${componentNameInLink} === 'series-sankey' }}
-
+
{{ /if }}
`center` specifies which point on the ${sourceName} should be placed at the center of the viewport (i.e., typically, the center of the canvas).
+`center` is typically used in control or fetch the position of ${sourceName} when [roamming](~${componentNameInLink}.roam) is performed. When roaming, the values in `center` and [zoom](~${componentNameInLink}.zoom) will be modified correspondingly.
+
+Notice: the values in `center` are based on the original layout coordinates, rather than the viewport (canvas) coordinates. If you intend to adjust the position and size of ${sourceName} by viewport coordinates, use [${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height) {{ if: ${isGeoOrMap} }} or [${componentNameInLink}.layoutCenter](~${componentNameInLink}.layoutCenter) / [layoutSize](~${componentNameInLink}.layoutSize){{ /if }}.
+
{{ if: ${isGeoOrMap} }}
-It is in longitude and latitude by default. Use the projected coordinates if [proejction](~${componentNameInLink}.projection) is set.
+`center` is in longitude and latitude by default. Use the projected coordinates if [proejction](~${componentNameInLink}.projection) is set.
Example:
@@ -40,20 +44,48 @@ projection: {
},
center: project([115.97, 29.71])
```
+{{ elif: ${componentNameInLink} === 'series-graph' }}
+If using absolute numbers in `center`:
+- If [${componentNameInLink}.layout](~${componentNameInLink}.layout) is `'none'`, you need to provide coordinates for each node explicitly in [${componentNameInLink}.data.x](~${componentNameInLink}.data.x), [${componentNameInLink}.data.y](~${componentNameInLink}.data.y). In this case, `center` can be absolute numbers as that kind of coordinates. For example,
+ ```ts
+ option = {
+ series: {
+ type: 'graph',
+ center: [0, 10],
+ data: [
+ {x: 100, y: 3000},
+ {x: 150, y: 3500},
+ {x: 200, y: 4000},
+ ],
+ }
+ }
+ // The bounding rect of the graph is determined by series.data.x/series.data.y:
+ // minX: 100, maxX: 200,
+ // minY: 3000, maxY: 4000,
+ // `center: [0, 10]` indicates that the point `[0, 10]` should be placed in
+ // the center of the viewport (typically, canvas).
+ // Consequently, the graph will be displayed at the right side of the viewport,
+ // and probably overflow.
+ ```
+- Otherwise, when specifying an auto-layout strategy in [${componentNameInLink}.layout](~${componentNameInLink}.layout), the coordinates are not user-determinable, so using absolute numbers in `center` is unfeasible.
+{{ else }}
+Using absolute numbers in `center` is unfeasible, as the absolute numbers typically represent the original coordinates, which is calculated by auto-layout strategy and is not user-determinable.
{{ /if }}
-Center can also be a percentage string, like `'30%'`, based on the ${sourceName} bounding rect width/height {{ if: ${isGeoOrMap} }}(by min/max latitude/longitude, or min/max projected coordinates if [proejction](~${componentNameInLink}.projection) is set){{ /if }}. You can use `'0%'` to place the top or left of ${sourceName} to the center of the viewport (canvas), or use `'100%'` to place the right or bottom to the center of the viewport (canvas).
+A percentage string can also be used in `center`, like `'30%'`, based on the bounding rect{{ if: ${isGeoOrMap} }}(determined min/max latitude/longitude, or min/max projected coordinates if [proejction](~${componentNameInLink}.projection) is set){{ /if }}. You can use `'0%'` to place the top or left of bounding rect to the center of the viewport (typically, canvas), or use `'100%'` to place the right or bottom to the center of the viewport, or use `'50%'` to place the entire ${sourceName} at the the center of the viewport.
For example:
```ts
-center: [115.97, '30%']
+center: [115, '30%']
// Place the top of ${sourceName} to the center of the viewport (canvas)
-center: [115.97, '0%']
+center: [115, '0%']
// Place the left of ${sourceName} to the center of the viewport (canvas)
center: ['0%', 13]
// Place the bottom of ${sourceName} to the center of the viewport (canvas)
-center: [115.97, '100%']
+center: [115, '100%']
// Place the right of ${sourceName} to the center of the viewport (canvas)
center: ['100%', 13]
+// Place ${sourceName} at center of the viewport (canvas)
+center: ['50%', '50%']
```
> The percentage string is introduced since `v5.3.3`. It is initially based on canvas width/height. But that is not reasonable, and then changed to be based on the bounding rect since `v6.0.0`.
@@ -67,12 +99,103 @@ center: ['100%', 13]
Zoom rate of current viewport.
+{{ use: partial-zoom-value-desc() }}
+
+When [roaming](~${componentNameInLink}.roam), the values in [center](~${componentNameInLink}.center) and `zoom` will be modified correspondingly.
+
#${prefix} scaleLimit(Object)
-{{ use: partial-scale-limit(
- prefix = "#" + ${prefix}
+{{ use: partial-scale-limit-desc(
+ prefix = "#" + ${prefix},
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix} roam(boolean|string) = false
-{{ use: partial-roam() }}
+{{ use: partial-roam-desc() }}
+
+When roaming, the values in [center](~${componentNameInLink}.center) and [zoom](~${componentNameInLink}.zoom) will be modified correspondingly.
+
+#${prefix} roamTrigger(string) = ${roamTriggerDefault|default("'selfRect'")}
+
+{{ use: partial-version(version = "6.0.0") }}
+
+[Roaming](~${componentNameInLink}.roam) can be triggered by mouse dragging or mouse wheel.
+
+Options:
+- `'selfRect'`:
+
+ The roaming can only be triggered on the bounding rect of the graphic elements.
+
+- `'global'`:
+
+ {{ if: ${supportClip} }}If `clip: true`, the roaming can only be triggered at any position within the clipped area. Otherwise it can be triggered in canvas globally.{{ else }}The roaming can be triggered in canvas globally.{{ /if }}
+
+{{ if: ${isGeoOrMap} }}
+**See example:** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ /if }}
+
+{{ target: partial-preserve-aspect }}
+
+#${prefix} preserveAspect(boolean|string) = ${preserveAspectDefault|default(false)}
+
+{{ if: ${componentNameInLink} === 'geo' || ${componentNameInLink} === 'series-map' }}
+{{ var: isGeoOrMap = true }}
+{{ /if }}
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+`aspect ratio` here refers to `width / height`.
+
+"preserve aspect" refers whether to preserve the `aspect ratio` of the original bounding rect of the content to be rendered.
+
+{{ use: partial-view-coord-sys-allocated-rect-desc(
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink},
+ isGeoOrMap = ${isGeoOrMap}
+) }}
+
+But the `aspect ratio` of this rectangle may not match that of the content's original bounding rect, which may cause distortion.
+
+Options of `preserveAspect`:
+- `null`/`undefined`/`false` (default): The original `aspect ratio` of the content will not be preserved, but stretched to fill the `${componentNameReadable} rectangular area`, which may cause distortion.
+- `'contain'`/`true`: The original `aspect ratio` of the content is preserved; the bounding rect of the content are fully contained by the `${componentNameReadable} rectangular area`, and scaled up as much as possible to meet the `${componentNameReadable} rectangular area`. [preserveAspectAlign](~${componentNameInLink}.preserveAspectAlign) and [preserveAspectVerticalAlign](~${componentNameInLink}.preserveAspectVerticalAlign) can be used to adjust the position in this case.
+- `'cover'`: The original `aspect ratio` of the content is preserved; the bounding rect of the content covers the `${componentNameReadable} rectangular area`, and scaled down as much as possible to meet the `${componentNameReadable} rectangular area`. [preserveAspectAlign](~${componentNameInLink}.preserveAspectAlign) and [preserveAspectVerticalAlign](~${componentNameInLink}.preserveAspectVerticalAlign) can be used to adjust the position in this case.
+
+{{ if: ${isGeoOrMap} }}
+Notice: When using [layoutCenter](~${componentNameInLink}.layoutCenter) and [layoutSize](~${componentNameInLink}.layoutSize), the `aspect radio` is always preserved, regardless of this `preserveAspect`.
+
+**See example:** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ /if }}
+
+#${prefix} preserveAspectAlign(string) = 'center'
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Options: `'left'` | `'right'` | `'center'`.
+
+See [preserveAspect](~${componentNameInLink}.preserveAspect).
+
+See example [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+
+#${prefix} preserveAspectVerticalAlign(string) = 'middle'
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Options: `'top'` | `'bottom'` | `'middle'`.
+
+See [preserveAspect](~${componentNameInLink}.preserveAspect).
+
+See example [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+
+
+
+{{ target: partial-view-coord-sys-allocated-rect-desc }}
+
+A `rectangular area` allocated to `${componentNameReadable}` is determined by [${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height){{ if: ${isGeoOrMap} }} / [.aspectScale](~${componentNameInLink}.aspectScale){{ /if }}.
\ No newline at end of file
diff --git a/en/option/series/graph.md b/en/option/series/graph.md
index 49c1877a..430233f8 100644
--- a/en/option/series/graph.md
+++ b/en/option/series/graph.md
@@ -582,7 +582,15 @@ Alias of [links](~series-graph.links)
defaultLeft = "'center'",
defaultTop = "'middle'",
defaultWidth = 'auto',
- defaultHeight = 'auto'
+ defaultHeight = 'auto',
+ hintPreserveAspect = true,
+ componentNameInLink = 'series-graph'
+) }}
+
+{{ use: partial-preserve-aspect(
+ prefix = '#',
+ componentNameReadable = 'graph series',
+ componentNameInLink = 'series-graph'
) }}
{{ use: partial-silent(
diff --git a/en/option/series/map.md b/en/option/series/map.md
index 1bbb8ac3..e281651c 100644
--- a/en/option/series/map.md
+++ b/en/option/series/map.md
@@ -46,9 +46,6 @@ Supported statistical methods:
Show the symbol in related area (dot of series symbol). Available when [legend](~legend) component exists.
-## roam(boolean|string) = false
-
-{{ use: partial-roam() }}
{{ use: partial-seriesLayoutBy() }}
diff --git a/en/option/series/sankey.md b/en/option/series/sankey.md
index 399c898e..16d0b10b 100644
--- a/en/option/series/sankey.md
+++ b/en/option/series/sankey.md
@@ -95,7 +95,8 @@ The drag-and-drop interaction of the node, which is enabled by default. After op
{{ use: partial-view-coord-sys-common(
prefix = '#',
componentMainType = 'series',
- componentSubType = 'sankey'
+ componentSubType = 'sankey',
+ roamTriggerDefault = "'global'",
) }}
diff --git a/en/option/series/tree.md b/en/option/series/tree.md
index 06856bdf..83c5fde1 100644
--- a/en/option/series/tree.md
+++ b/en/option/series/tree.md
@@ -48,7 +48,8 @@ The tree diagram is mainly used to visualize the tree data structure, which is a
{{ use: partial-view-coord-sys-common(
prefix = '#',
componentMainType = 'series',
- componentSubType = 'tree'
+ componentSubType = 'tree',
+ roamTriggerDefault = "'global'"
) }}
diff --git a/en/option/series/treemap.md b/en/option/series/treemap.md
index 5516ada3..465ed63a 100644
--- a/en/option/series/treemap.md
+++ b/en/option/series/treemap.md
@@ -95,18 +95,14 @@ Marker when the node is able to be drilled down.
## roam(boolean|string) = true
-Whether to enable dragging roam (move and zoom). Optional values are:
-
-+ `false`: roam is disabled.
-+ `'scale'` or `'zoom'`: zoom only.
-+ `'move'` or `'pan'`: move (translation) only.
-+ `true`: both zoom and move (translation) are available.
+{{ use: partial-roam-desc() }}
## scaleLimit(Object)
-{{ use: partial-scale-limit(
+{{ use: partial-scale-limit-desc(
prefix = "##",
- version = "5.5.1"
+ version = "5.5.1",
+ componentNameInLink = 'series-treemap'
) }}
## nodeClick(boolean|string) = 'zoomToNode'
diff --git a/src/controls/ControlPercentVector.vue b/src/controls/ControlPercentVector.vue
index 2a2123d6..010d5d77 100644
--- a/src/controls/ControlPercentVector.vue
+++ b/src/controls/ControlPercentVector.vue
@@ -35,7 +35,9 @@ export default {
computed: {
dimsArr() {
- return this.dims.split(',').map(dim => dim.trim());
+ return this.dims
+ ? this.dims.split(',').map(dim => dim.trim())
+ : this.value.split(',').map(_ => '');
}
},
diff --git a/src/controls/ControlVector.vue b/src/controls/ControlVector.vue
index b4950af6..007c72b1 100644
--- a/src/controls/ControlVector.vue
+++ b/src/controls/ControlVector.vue
@@ -48,7 +48,7 @@ export default {
}
},
- watch: {
+ watch: {
value(newVal) {
this.innerValueArr = this.value.split(',').map(val => +val.trim());
}
diff --git a/zh/api/echarts.md b/zh/api/echarts.md
index 6aafeb7b..e08cf795 100644
--- a/zh/api/echarts.md
+++ b/zh/api/echarts.md
@@ -158,47 +158,87 @@ echarts.use(
使用方法见 [option.geo](option.html#geo.map)。
**参数：**
-+ `mapName`
++ **@param `mapName`:**
地图名称，在 [geo](option.html#geo) 组件或者 [map](option.html#series-map) 图表类型中设置的 `map` 对应的就是该值。
-+ `opt`
- + `geoJSON` 可选。GeoJson 格式的数据，具体格式见 [https://geojson.org/](https://geojson.org/)。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 `geoJson`，效果相同。
++ **@param `opt.geoJSON`:**
- + `svg` 可选。从 `v5.1.0` 开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 [SVG 底图](tutorial.html#%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB%E5%92%8C%E5%9C%B0%E5%9B%BE%E7%B3%BB%E5%88%97%E7%9A%84%20SVG%20%E5%BA%95%E5%9B%BE)。
+ 可选。GeoJSON 格式的数据，具体格式见 [https://geojson.org/](https://geojson.org/)。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 `geoJson`，效果相同。
- + `specialAreas` 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 `geoJSON` 中生效，`svg` 中不生效。
+ 例如，一个极小的 GeoJSON：
+ ```ts
+ const geoJSONSample = {
+ "type": "FeatureCollection",
+ "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Polygon",
+ "coordinates": [
+ [[2000, 2000], [5000, 2000], [5000, 5000], [2000, 5000]]
+ ]
+ },
+ "properties": {
+ "name": "Some Place",
+ "cp": [220, 2100]
+ }
+ }
+ ]
+ };
+ echarts.registerMap('my_geo_sample', geoJSONSample);
+ ```
+ 注：
+ + GeoJSON 中的 `features[i].properties.name` 被 ECharts 默认使用来索引这个区域，或者显示图标文字。也可以使用其他属性名，参见 [geo.nameProperty](option.html#geo.nameProperty)。
+ Note:
+ + GeoJSON 中的 `features[i].properties.cp` 是个 ECharts 可识别的可选属性。它提供了标签的位置坐标。如果没有提供，标签自动放置在相应区域的中心。
-示例 [USA Population Estimates](${galleryEditorPath}map-usa)：
++ **@param `opt.svg`:**
-```ts
-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
- }
-});
-```
+ 可选。从 `v5.1.0` 开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 [SVG 底图](tutorial.html#%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB%E5%92%8C%E5%9C%B0%E5%9B%BE%E7%B3%BB%E5%88%97%E7%9A%84%20SVG%20%E5%BA%95%E5%9B%BE)。
+
+ 例如，一个极小的 SVG：
+ ```ts
+ const mySVG = `
+ `;
+ echarts.registerMap('my_geo_sample', {svg: mySVG});
+ ```
+
++ **@param `opt.specialAreas`:**
+
+ 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 `geoJSON` 中生效，`svg` 中不生效。
+
+ [specialAreas 示例](${galleryEditorPath}map-usa)：
+ ```ts
+ 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
+ }
+ });
+ ```
-注：如果你在项目中使用了按需引入，从 v5.3.0 开始`registerMap`必须要在引入地图组件后才能使用。
+注：如果你在项目中使用了按需引入，从 v5.3.0 开始 `registerMap` 必须要在`MapChart` 或 `GeoComponent` 被 `import`（ES module import）后才能使用。
## getMap(Function)
```ts
diff --git a/zh/option/component/axis-common.md b/zh/option/component/axis-common.md
index d17e064d..a1904f0f 100644
--- a/zh/option/component/axis-common.md
+++ b/zh/option/component/axis-common.md
@@ -650,6 +650,8 @@ splitLine: {
{{ if: ${componentType} === 'xAxis' || ${componentType} === 'yAxis' }}
#${prefix} nameMoveOverlap(boolean) = true
+
+
{{ use: partial-version(version = "6.0.0") }}
当 axis name 和 axis label 重叠时，是否自动移动 axis name 来避免重叠。
diff --git a/zh/option/component/geo-common.md b/zh/option/component/geo-common.md
index bc4e92e8..67cb49a8 100644
--- a/zh/option/component/geo-common.md
+++ b/zh/option/component/geo-common.md
@@ -3,10 +3,12 @@
{{ if: ${inMap} }}
{{ var: componentNameInLink = 'series-map' }}
+{{ var: componentNameReadable = '地图系列' }}
{{ var: componentMainType = 'series' }}
{{ var: componentSubType = 'map' }}
{{ else }}
{{ var: componentNameInLink = 'geo' }}
+{{ var: componentNameReadable = 'geo 组件' }}
{{ var: componentMainType = 'geo' }}
{{ var: componentSubType = null }}
{{ /if }}
@@ -163,7 +165,8 @@ series: {
{{ use: partial-view-coord-sys-common(
prefix = ${prefix},
componentMainType = ${componentMainType},
- componentSubType = ${componentSubType}
+ componentSubType = ${componentSubType},
+ supportClip = true
) }}
@@ -293,15 +296,17 @@ boundingCoords: [
) }}
{{ /if }}
-{{ use: partial-rect-layout(
- prefix = ${prefix}
+{{ use: partial-rect-layout-width-height(
+ prefix = ${prefix},
+ hostName = ${componentNameReadable},
+ hintPreserveAspect = true,
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix} layoutCenter(Array) = null
-`layoutCenter` 和 `layoutSize` 提供了除了 `left/right/top/bottom/width/height` 之外的布局手段。
-
-在使用 `left/right/top/bottom/width/height` 的时候，可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间，并且保证不超出盒形的范围。此时可以通过 `layoutCenter` 属性定义地图中心在屏幕中的位置，`layoutSize` 定义地图的大小。如下示例
+`layoutCenter` 和 `layoutSize` 用于定义 ${componentNameReadable} 所拥有的矩形区域，其中`layoutCenter` 定义了区域中心在容器中的位置，`layoutSize` 定义了区域的大小。如下示例：
```ts
layoutCenter: ['30%', '30%'],
@@ -311,10 +316,40 @@ layoutSize: 100
设置这两个值后 `left/right/top/bottom/width/height` 无效。
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix} layoutSize(number|string)
-地图的大小，见 `layoutCenter`。支持相对于屏幕宽高的百分比或者绝对的像素大小。
+地图的大小，见 [layoutCenter](${componentNameInLink}.layoutCenter)。支持相对于容器宽高的百分比或者绝对的像素大小。
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = true,
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-preserve-aspect(
+ prefix = ${prefix},
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+#${prefix} clip(boolean) = false
+
+{{ use: partial-version(version = "6.0.0") }}
+
+{{ use: partial-view-coord-sys-allocated-rect-desc(
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink},
+ isGeoOrMap = true
+) }}
+
+当地图超出这个分配的矩形区域时，`clip` 决定了是否剪裁超出部分。
+**参见示例：** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
{{ target: partial-geo-common-state }}
diff --git a/zh/option/partial/coord-sys.md b/zh/option/partial/coord-sys.md
index ea32c5c7..c050e006 100644
--- a/zh/option/partial/coord-sys.md
+++ b/zh/option/partial/coord-sys.md
@@ -279,7 +279,7 @@
## geoId(number) = undefined
{{ if: ${version} }}
-{{ use: partial-version(version = ${version}) }}
+{{ use: partial-version(version = ${version|minVersion('6.0.0')}) }}
{{ /if }}
布局时所基于的 [地理坐标系](~geo) 的 id。当一个 ECharts 实例中存在多个地理坐标系时，用其指定所使用的坐标系。
diff --git a/zh/option/partial/rect-layout-width-height.md b/zh/option/partial/rect-layout-width-height.md
index 1594075f..392485b4 100644
--- a/zh/option/partial/rect-layout-width-height.md
+++ b/zh/option/partial/rect-layout-width-height.md
@@ -15,7 +15,10 @@
defaultLeft = ${defaultLeft},
defaultTop = ${defaultTop},
defaultRight = ${defaultRight},
- defaultBottom = ${defaultBottom}
+ defaultBottom = ${defaultBottom},
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix|default("#")} width(string|number) = ${defaultWidth|default("'auto'")}
@@ -28,6 +31,14 @@
${hostNameStr}的宽度。{{ if: !${defaultWidth} }}默认自适应。{{ /if }}
+`width` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器宽度的百分比。
+
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
#${prefix|default("#")} height(string|number) = ${defaultHeight|default("'auto'")}
@@ -38,3 +49,10 @@ ${hostNameStr}的宽度。{{ if: !${defaultWidth} }}默认自适应。{{ /if }}
${hostNameStr}的高度。{{ if: !${defaultHeight} }}默认自适应。{{ /if }}
+`height` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高度的百分比。
+
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
diff --git a/zh/option/partial/rect-layout.md b/zh/option/partial/rect-layout.md
index 987473d1..f73f85b0 100644
--- a/zh/option/partial/rect-layout.md
+++ b/zh/option/partial/rect-layout.md
@@ -25,10 +25,21 @@
${hostNameStr}离容器左侧的距离。
-`left` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'left'`, `'center'`, `'right'`。
+`left` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器宽度的百分比，也可以是 `'left'`, `'center'`, `'right'`。
如果 `left` 的值为 `'left'`, `'center'`, `'right'`，组件会根据相应的位置自动对齐。
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} top(string|number) = ${defaultTop|default("'auto'")}
@@ -39,10 +50,21 @@ ${hostNameStr}离容器左侧的距离。
${hostNameStr}离容器上侧的距离。
-`top` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'top'`, `'middle'`, `'bottom'`。
+`top` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高度的百分比，也可以是 `'top'`, `'middle'`, `'bottom'`。
如果 `top` 的值为 `'top'`, `'middle'`, `'bottom'`，组件会根据相应的位置自动对齐。
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} right(string|number) = ${defaultRight|default("'auto'")}
@@ -53,10 +75,21 @@ ${hostNameStr}离容器上侧的距离。
${hostNameStr}离容器右侧的距离。
-`right` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
+`right` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器宽度的百分比。
{{ if: !${defaultRight} }}默认自适应。{{ /if }}
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
#${prefix|default("#")} bottom(string|number) = ${defaultBottom|default("'auto'")}
@@ -67,7 +100,34 @@ ${hostNameStr}离容器右侧的距离。
${hostNameStr}离容器下侧的距离。
-bottom 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
+bottom 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高度的百分比。
{{ if: !${defaultBottom} }}默认自适应。{{ /if }}
+{{ use: partial-preserve-aspect-hint(
+ hintPreserveAspect = ${hintPreserveAspect},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+{{ use: partial-geo-rect-layout-approaches-hint(
+ hintGeoRectLayoutApproaches = ${hintGeoRectLayoutApproaches},
+ componentNameInLink = ${componentNameInLink}
+) }}
+
+
+
+{{ target: partial-preserve-aspect-hint }}
+
+{{ if: ${hintPreserveAspect} && ${componentNameInLink} }}
+> 注：如果发现图形被拉伸了不符合预期，参见 [preserveAspect](~${componentNameInLink}.preserveAspect)。
+{{ /if }}
+
+
+
+{{ target: partial-geo-rect-layout-approaches-hint }}
+
+{{ if: ${hintGeoRectLayoutApproaches} && ${componentNameInLink} }}
+> 注：${componentNameInLink} 有两种盒布局方式。你可以使用任一种：
+> - [${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height)
+> - [${componentNameInLink}.layoutCenter](~${componentNameInLink}.layoutCenter) / [.layoutSize](~${componentNameInLink}.layoutSize)
+{{ /if }}
diff --git a/zh/option/partial/roam.md b/zh/option/partial/roam.md
index 749f184f..e85821ee 100644
--- a/zh/option/partial/roam.md
+++ b/zh/option/partial/roam.md
@@ -1,13 +1,17 @@
-{{ target: partial-roam }}
+{{ target: partial-roam-desc }}
-是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 `'scale'` 或者 `'move'`。设置成 `true` 为都开启
+是否开启使用鼠标或触摸进行漫游（移动和缩放）。可取值有：
++ `false`：关闭。
++ `'scale'` 或 `'zoom'`：只能够缩放。
++ `'move'` 或 `'pan'`：只能够平移。
++ `true`：缩放和平移均可。
-{{ target: partial-scale-limit }}
+{{ target: partial-scale-limit-desc }}
{{ if: ${version} }}
{{ use: partial-version(
@@ -15,7 +19,9 @@
) }}
{{ /if }}
-滚轮缩放的极限控制，通过 `min` 和 `max` 限制最小和最大的缩放值。
+[缩放](~${componentNameInLink}.roam) 的极限控制，通过 `min` 和 `max` 限制最小和最大的缩放值。
+
+{{ use: partial-zoom-value-desc }}
#${prefix} min(number)
@@ -25,3 +31,7 @@
最大的缩放值
+
+{{ target: partial-zoom-value-desc }}
+
+值小于 `1` 时表示缩小，大于 `1` 时表示放大。
diff --git a/zh/option/partial/view-coord-sys.md b/zh/option/partial/view-coord-sys.md
index 1c8b685c..0788a6a9 100644
--- a/zh/option/partial/view-coord-sys.md
+++ b/zh/option/partial/view-coord-sys.md
@@ -23,8 +23,14 @@
`center` 指定了把${sourceName}上的哪个点放在可视区的中心。
+`center` 一般用于控制或获取 [平移缩放（roam）](~${componentNameInLink}.roam) 时${sourceName}的位置。当平移缩放时，`center` 和 [zoom](~${componentNameInLink}.zoom) 的值会被相应改变。
+
+注意：`center` 的值基于的是对象布局的原始坐标系而非画布的坐标。
+如果想使用画布坐标调整绘制对象的位置和大小，使用：[${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height) {{ if: ${isGeoOrMap} }}或者 [${componentNameInLink}.layoutCenter](~${componentNameInLink}.layoutCenter) / [layoutSize](~${componentNameInLink}.layoutSize){{ /if }}。
+
+
{{ if: ${isGeoOrMap} }}
-默认使用原始坐标（经纬度）。如果设置了 [proejction](~${componentNameInLink}.projection) 则用投影后的坐标。
+`center` 默认使用原始坐标（经纬度）。如果设置了 [proejction](~${componentNameInLink}.projection) 则用投影后的坐标。
示例：
```ts
@@ -38,21 +44,47 @@ projection: {
},
center: project([115.97, 29.71])
```
+{{ elif: ${componentNameInLink} === 'series-graph' }}
+如果 `center` 中使用绝对数值：
+- 如果 [${componentNameInLink}.layout](~${componentNameInLink}.layout) 为 `'none'`，你需要在 [${componentNameInLink}.data.x](~${componentNameInLink}.data.x), [${componentNameInLink}.data.y](~${componentNameInLink}.data.y) 里提供每个节点的坐标。这时 `center` 中可使用绝对数值表示这种坐标。例如，
+ ```ts
+ option = {
+ series: {
+ type: 'graph',
+ center: [0, 10],
+ data: [
+ {x: 100, y: 3000},
+ {x: 150, y: 3500},
+ {x: 200, y: 4000},
+ ],
+ }
+ }
+ // 这个关系图的包围盒（bounding rect）由 series.data.x/series.data.y 决定:
+ // minX: 100, maxX: 200,
+ // minY: 3000, maxY: 4000,
+ // `center: [0, 10]` 指定了 `[0, 10]` 这个点应被放置于视口（一般为画布）中心。
+ // 结果，这个关系图会被显示到很右边的位置，甚至超出画布。
+ ```
+- 否则，如果在 [${componentNameInLink}.layout](~${componentNameInLink}.layout) 中设定了自动布局，坐标是自动计算的不可提前预知，于是也无法用绝对数值在 `center` 中设定合适的坐标。
+{{ else }}
+`center` 中使用绝对数值一般无意义，因为`center` 中的绝对数值一般用于表示布局的原始坐标，而坐标是自动计算的不可预知。
{{ /if }}
-`center` 也可以是一个百分比字符串，例如 `'30%'`，分母是${sourceName}的包围盒高宽{{ if: ${isGeoOrMap} }}（由经纬度的最大最小值决定；或者，在设置了 [projection](~${componentNameInLink}.projection) 时，由投影后得到的最大最小坐标决定）{{ /if }}。你可以使用 `'0%'` 将${sourceName}的顶部或左侧对齐到视口（画布）中心，或使用 `'100%'` 将右侧或底部对齐到视口中心。
+百分比（字符串）值也可被用在 `center` 中，例如 `'30%'`，基于包围盒{{ if: ${isGeoOrMap} }}（由经纬度的最大最小值决定；或者，在设置了 [projection](~${componentNameInLink}.projection) 时，由投影后得到的最大最小坐标决定）{{ /if }}。你可以使用 `'0%'` 将包围盒的顶部或左侧对齐到视口（画布）中心，或使用 `'100%'` 将右侧或底部对齐到视口中心，或使用 `'50%'` 表示把整个图放于视口中心。
例如：
```ts
-center: [115.97, '30%']
+center: [115, '30%']
// 将${sourceName}的顶部放置到视口（画布）中心
-center: [115.97, '0%']
+center: [115, '0%']
// 将${sourceName}的最左侧放置到视口（画布）中心
center: ['0%', 13]
// 将${sourceName}的底部放置到视口（画布）中心
-center: [115.97, '100%']
+center: [115, '100%']
// 将${sourceName}的最右侧放置到视口（画布）中心
center: ['100%', 13]
+// 将${sourceName}放置到视口（画布）中心
+center: ['50%', '50%']
```
> 百分比字符串从 `v5.3.3` 开始引入。最初是分母是画布的宽高，但这种方式并不合理，因此从 `v6.0.0` 起改为基于包围盒。
@@ -66,12 +98,107 @@ center: ['100%', 13]
当前视角的缩放比例。
+{{ use: partial-zoom-value-desc() }}
+
+当 [平移缩放（roam）](~${componentNameInLink}.roam) 时，[center](~${componentNameInLink}.center) 和 `zoom` 的值会被相应改变。
+
#${prefix} scaleLimit(Object)
-{{ use: partial-scale-limit(
- prefix = "#" + ${prefix}
+{{ use: partial-scale-limit-desc(
+ prefix = "#" + ${prefix},
+ componentNameInLink = ${componentNameInLink}
) }}
#${prefix} roam(boolean|string) = false
-{{ use: partial-roam() }}
+{{ use: partial-roam-desc() }}
+
+当缩放和平移时，[center](~${componentNameInLink}.center) 和 [zoom](~${componentNameInLink}.zoom) 的值会被相应改变。
+
+#${prefix} roamTrigger(string) = ${roamTriggerDefault|default("'selfRect'")}
+
+{{ use: partial-version(version = "6.0.0") }}
+
+[缩放和平移（roam）](~${componentNameInLink}.roam) 可被鼠标触发。
+
+Options:
+- `'selfRect'`:
+
+ 缩放和平移的触发点只能是图形元素形成的包围盒中。
+
+- `'global'`:
+
+ {{ if: ${supportClip} }}如果 `clip: true`，缩放和平移的触发点是剪裁矩形中的任何地方；否则，触发点是画布中的任何地方。{{ else }}缩放和平移的触发点是画布中的任何地方。{{ /if }}
+
+{{ if: ${isGeoOrMap} }}
+参见示例 [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ /if }}
+
+
+{{ target: partial-geo-preserve-aspect }}
+
+{{ target: partial-preserve-aspect }}
+
+#${prefix} preserveAspect(boolean|string) = ${preserveAspectDefault|default(false)}
+
+{{ if: ${componentNameInLink} === 'geo' || ${componentNameInLink} === 'series-map' }}
+{{ var: isGeoOrMap = true }}
+{{ /if }}
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+`aspect ratio` 指 `width / height`。
+
+"preserve aspect" 指是否要保持被渲染的内容的原始包围盒的 `aspect ratio`。
+
+{{ use: partial-view-coord-sys-allocated-rect-desc(
+ componentNameReadable = ${componentNameReadable},
+ componentNameInLink = ${componentNameInLink},
+ isGeoOrMap = ${isGeoOrMap}
+) }}
+
+但是这个矩形的 `aspect ratio` 不一定和内容的原始 `aspect ratio` 一致，从而可能导致内容被拉伸而失真。
+
+`preserveAspect` 的不同选项有如下效果：
+- `null` / `undefined` / `false`（默认）：不会保持内容的原始 `aspect ratio`，而是拉伸内容以填满 `${componentNameReadable}矩形区域`。拉伸有可能导致图形失真。
+- `'contain'` / `true`：保持内容的 `aspect ratio`。内容的包围盒被完整地包含在 `${componentNameReadable}矩形区域` 中，并尽可能放大以触达边界。此时可使用 [preserveAspectAlign](~${componentNameInLink}.preserveAspectAlign) 和 [preserveAspectVerticalAlign](~${componentNameInLink}.preserveAspectVerticalAlign) 调整位置。
+- `'cover'`：保持内容的原始 `aspect ratio`。内容的包围盒会覆盖整个 `${componentNameReadable}矩形区域`，并尽可能缩小以触达边界。此时可使用 [preserveAspectAlign](~${componentNameInLink}.preserveAspectAlign) 和 [preserveAspectVerticalAlign](~${componentNameInLink}.preserveAspectVerticalAlign) 调整位置。
+
+{{ if: ${isGeoOrMap} }}
+注意：当使用 [layoutCenter](~${componentNameInLink}.layoutCenter) 和 [layoutSize](~${componentNameInLink}.layoutSize) 时，始终会保留宽高比，无论 `preserveAspect` 配置为何值。
+
+**参见示例：** [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+{{ /if }}
+
+#${prefix} preserveAspectAlign(string) = 'center'
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+可选项：`'left'` | `'right'` | `'center'`。
+
+参见 [preserveAspect](~${componentNameInLink}.preserveAspect)。
+
+参见示例 [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+
+#${prefix} preserveAspectVerticalAlign(string) = 'middle'
+
+
+
+{{ use: partial-version(version = "6.0.0") }}
+
+Options: `'top'` | `'bottom'` | `'middle'`。
+
+参见 [preserveAspect](~${componentNameInLink}.preserveAspect)。
+
+参见示例 [geo roam indicator](${galleryEditorPath}doc-example/geo-roam-indicator&edit=1&reset=1).
+
+
+
+{{ target: partial-view-coord-sys-allocated-rect-desc }}
+
+为 ${componentNameReadable} 分配的 `矩形区域` 是通过以下配置决定的：
+[${componentNameInLink}.left](~${componentNameInLink}.left) / [.right](~${componentNameInLink}.right) / [.top](~${componentNameInLink}.top) / [.bottom](~${componentNameInLink}.bottom) / [.width](~${componentNameInLink}.width) / [.height](~${componentNameInLink}.height){{ if: ${isGeoOrMap} }} / [.aspectScale](~${componentNameInLink}.aspectScale){{ /if }}。
diff --git a/zh/option/series/graph.md b/zh/option/series/graph.md
index ba3a7bfb..e5a0fa4a 100644
--- a/zh/option/series/graph.md
+++ b/zh/option/series/graph.md
@@ -11,7 +11,7 @@
~[600x400](${galleryViewPath}graph&reset=1&edit=1)
-
+
const option = {"title":{"text":"Les Miserables","subtext":"Default layout","top":"bottom","left":"right"},"tooltip":{},"legend":[{"data":["类目0","类目1","类目2","类目3","类目4","类目5","类目6","类目7","类目8"]}],"animationDuration":1500,"animationEasingUpdate":"quinticInOut","series":[{"name":"Les Miserables","type":"graph","layout":"none","data":[{"id":"0","name":"Myriel","symbolSize":19.12381,"x":-266.82776,"y":299.6904,"value":28.685715,"category":0},{"id":"1","name":"Napoleon","symbolSize":2.6666666666666665,"x":-418.08344,"y":446.8853,"value":4,"category":0},{"id":"2","name":"MlleBaptistine","symbolSize":6.323809333333333,"x":-212.76357,"y":245.29176,"value":9.485714,"category":1},{"id":"3","name":"MmeMagloire","symbolSize":6.323809333333333,"x":-242.82404,"y":235.26283,"value":9.485714,"category":1},{"id":"4","name":"CountessDeLo","symbolSize":2.6666666666666665,"x":-379.30386,"y":429.06424,"value":4,"category":0},{"id":"5","name":"Geborand","symbolSize":2.6666666666666665,"x":-417.26337,"y":406.03506,"value":4,"category":0},{"id":"6","name":"Champtercier","symbolSize":2.6666666666666665,"x":-332.6012,"y":485.16974,"value":4,"category":0},{"id":"7","name":"Cravatte","symbolSize":2.6666666666666665,"x":-382.69568,"y":475.09113,"value":4,"category":0},{"id":"8","name":"Count","symbolSize":2.6666666666666665,"x":-320.384,"y":387.17325,"value":4,"category":0},{"id":"9","name":"OldMan","symbolSize":2.6666666666666665,"x":-344.39832,"y":451.16772,"value":4,"category":0},{"id":"10","name":"Labarre","symbolSize":2.6666666666666665,"x":-89.34107,"y":234.56128,"value":4,"category":1},{"id":"11","name":"Valjean","symbolSize":66.66666666666667,"x":-87.93029,"y":-6.8120565,"value":100,"category":1},{"id":"12","name":"Marguerite","symbolSize":4.495239333333333,"x":-339.77908,"y":-184.69139,"value":6.742859,"category":1},{"id":"13","name":"MmeDeR","symbolSize":2.6666666666666665,"x":-194.31313,"y":178.55301,"value":4,"category":1},{"id":"14","name":"Isabeau","symbolSize":2.6666666666666665,"x":-158.05168,"y":201.99768,"value":4,"category":1},{"id":"15","name":"Gervais","symbolSize":2.6666666666666665,"x":-127.701546,"y":242.55057,"value":4,"category":1},{"id":"16","name":"Tholomyes","symbolSize":17.295237333333333,"x":-385.2226,"y":-393.5572,"value":25.942856,"category":2},{"id":"17","name":"Listolier","symbolSize":13.638097333333334,"x":-516.55884,"y":-393.98975,"value":20.457146,"category":2},{"id":"18","name":"Fameuil","symbolSize":13.638097333333334,"x":-464.79382,"y":-493.57944,"value":20.457146,"category":2},{"id":"19","name":"Blacheville","symbolSize":13.638097333333334,"x":-515.1624,"y":-456.9891,"value":20.457146,"category":2},{"id":"20","name":"Favourite","symbolSize":13.638097333333334,"x":-408.12122,"y":-464.5048,"value":20.457146,"category":2},{"id":"21","name":"Dahlia","symbolSize":13.638097333333334,"x":-456.44113,"y":-425.13303,"value":20.457146,"category":2},{"id":"22","name":"Zephine","symbolSize":13.638097333333334,"x":-459.1107,"y":-362.5133,"value":20.457146,"category":2},{"id":"23","name":"Fantine","symbolSize":28.266666666666666,"x":-313.42786,"y":-289.44803,"value":42.4,"category":2},{"id":"24","name":"MmeThenardier","symbolSize":20.95238266666667,"x":4.6313396,"y":-273.8517,"value":31.428574,"category":7},{"id":"25","name":"Thenardier","symbolSize":30.095235333333335,"x":82.80825,"y":-203.1144,"value":45.142853,"category":7},{"id":"26","name":"Cosette","symbolSize":20.95238266666667,"x":78.64646,"y":-31.512747,"value":31.428574,"category":6},{"id":"27","name":"Javert","symbolSize":31.923806666666668,"x":-81.46074,"y":-204.20204,"value":47.88571,"category":7},{"id":"28","name":"Fauchelevent","symbolSize":8.152382000000001,"x":-225.73984,"y":82.41631,"value":12.228573,"category":4},{"id":"29","name":"Bamatabois","symbolSize":15.466666666666667,"x":-385.6842,"y":-20.206686,"value":23.2,"category":3},{"id":"30","name":"Perpetue","symbolSize":4.495239333333333,"x":-403.92447,"y":-197.69823,"value":6.742859,"category":2},{"id":"31","name":"Simplice","symbolSize":8.152382000000001,"x":-281.4253,"y":-158.45137,"value":12.228573,"category":2},{"id":"32","name":"Scaufflaire","symbolSize":2.6666666666666665,"x":-122.41348,"y":210.37503,"value":4,"category":1},{"id":"33","name":"Woman1","symbolSize":4.495239333333333,"x":-234.6001,"y":-113.15067,"value":6.742859,"category":1},{"id":"34","name":"Judge","symbolSize":11.809524666666666,"x":-387.84915,"y":58.7059,"value":17.714287,"category":3},{"id":"35","name":"Champmathieu","symbolSize":11.809524666666666,"x":-338.2307,"y":87.48405,"value":17.714287,"category":3},{"id":"36","name":"Brevet","symbolSize":11.809524666666666,"x":-453.26874,"y":58.94648,"value":17.714287,"category":3},{"id":"37","name":"Chenildieu","symbolSize":11.809524666666666,"x":-386.44904,"y":140.05937,"value":17.714287,"category":3},{"id":"38","name":"Cochepaille","symbolSize":11.809524666666666,"x":-446.7876,"y":123.38005,"value":17.714287,"category":3},{"id":"39","name":"Pontmercy","symbolSize":6.323809333333333,"x":336.49738,"y":-269.55914,"value":9.485714,"category":6},{"id":"40","name":"Boulatruelle","symbolSize":2.6666666666666665,"x":29.187843,"y":-460.13132,"value":4,"category":7},{"id":"41","name":"Eponine","symbolSize":20.95238266666667,"x":238.36697,"y":-210.00926,"value":31.428574,"category":7},{"id":"42","name":"Anzelma","symbolSize":6.323809333333333,"x":189.69513,"y":-346.50662,"value":9.485714,"category":7},{"id":"43","name":"Woman2","symbolSize":6.323809333333333,"x":-187.00418,"y":-145.02663,"value":9.485714,"category":6},{"id":"44","name":"MotherInnocent","symbolSize":4.495239333333333,"x":-252.99521,"y":129.87549,"value":6.742859,"category":4},{"id":"45","name":"Gribier","symbolSize":2.6666666666666665,"x":-296.07935,"y":163.11964,"value":4,"category":4},{"id":"46","name":"Jondrette","symbolSize":2.6666666666666665,"x":550.3201,"y":522.4031,"value":4,"category":5},{"id":"47","name":"MmeBurgon","symbolSize":4.495239333333333,"x":488.13535,"y":356.8573,"value":6.742859,"category":5},{"id":"48","name":"Gavroche","symbolSize":41.06667066666667,"x":387.89572,"y":110.462326,"value":61.600006,"category":8},{"id":"49","name":"Gillenormand","symbolSize":13.638097333333334,"x":126.4831,"y":68.10622,"value":20.457146,"category":6},{"id":"50","name":"Magnon","symbolSize":4.495239333333333,"x":127.07365,"y":-113.05923,"value":6.742859,"category":6},{"id":"51","name":"MlleGillenormand","symbolSize":13.638097333333334,"x":162.63559,"y":117.6565,"value":20.457146,"category":6},{"id":"52","name":"MmePontmercy","symbolSize":4.495239333333333,"x":353.66415,"y":-205.89165,"value":6.742859,"category":6},{"id":"53","name":"MlleVaubois","symbolSize":2.6666666666666665,"x":165.43939,"y":339.7736,"value":4,"category":6},{"id":"54","name":"LtGillenormand","symbolSize":8.152382000000001,"x":137.69348,"y":196.1069,"value":12.228573,"category":6},{"id":"55","name":"Marius","symbolSize":35.58095333333333,"x":206.44687,"y":-13.805411,"value":53.37143,"category":6},{"id":"56","name":"BaronessT","symbolSize":4.495239333333333,"x":194.82993,"y":224.78036,"value":6.742859,"category":6},{"id":"57","name":"Mabeuf","symbolSize":20.95238266666667,"x":597.6618,"y":135.18481,"value":31.428574,"category":8},{"id":"58","name":"Enjolras","symbolSize":28.266666666666666,"x":355.78366,"y":-74.882454,"value":42.4,"category":8},{"id":"59","name":"Combeferre","symbolSize":20.95238266666667,"x":515.2961,"y":-46.167564,"value":31.428574,"category":8},{"id":"60","name":"Prouvaire","symbolSize":17.295237333333333,"x":614.29285,"y":-69.3104,"value":25.942856,"category":8},{"id":"61","name":"Feuilly","symbolSize":20.95238266666667,"x":550.1917,"y":-128.17537,"value":31.428574,"category":8},{"id":"62","name":"Courfeyrac","symbolSize":24.609526666666667,"x":436.17184,"y":-12.7286825,"value":36.91429,"category":8},{"id":"63","name":"Bahorel","symbolSize":22.780953333333333,"x":602.55225,"y":16.421427,"value":34.17143,"category":8},{"id":"64","name":"Bossuet","symbolSize":24.609526666666667,"x":455.81955,"y":-115.45826,"value":36.91429,"category":8},{"id":"65","name":"Joly","symbolSize":22.780953333333333,"x":516.40784,"y":47.242233,"value":34.17143,"category":8},{"id":"66","name":"Grantaire","symbolSize":19.12381,"x":646.4313,"y":-151.06331,"value":28.685715,"category":8},{"id":"67","name":"MotherPlutarch","symbolSize":2.6666666666666665,"x":668.9568,"y":204.65488,"value":4,"category":8},{"id":"68","name":"Gueulemer","symbolSize":19.12381,"x":78.4799,"y":-347.15146,"value":28.685715,"category":7},{"id":"69","name":"Babet","symbolSize":19.12381,"x":150.35959,"y":-298.50797,"value":28.685715,"category":7},{"id":"70","name":"Claquesous","symbolSize":19.12381,"x":137.3717,"y":-410.2809,"value":28.685715,"category":7},{"id":"71","name":"Montparnasse","symbolSize":17.295237333333333,"x":234.87747,"y":-400.85983,"value":25.942856,"category":7},{"id":"72","name":"Toussaint","symbolSize":6.323809333333333,"x":40.942253,"y":113.78272,"value":9.485714,"category":1},{"id":"73","name":"Child1","symbolSize":4.495239333333333,"x":437.939,"y":291.58234,"value":6.742859,"category":8},{"id":"74","name":"Child2","symbolSize":4.495239333333333,"x":466.04922,"y":283.3606,"value":6.742859,"category":8},{"id":"75","name":"Brujon","symbolSize":13.638097333333334,"x":238.79364,"y":-314.06345,"value":20.457146,"category":7},{"id":"76","name":"MmeHucheloup","symbolSize":13.638097333333334,"x":712.18353,"y":4.8131495,"value":20.457146,"category":8}],"links":[{"id":"0","source":"1","target":"0"},{"id":"1","source":"2","target":"0"},{"id":"2","source":"3","target":"0"},{"id":"3","source":"3","target":"2"},{"id":"4","source":"4","target":"0"},{"id":"5","source":"5","target":"0"},{"id":"6","source":"6","target":"0"},{"id":"7","source":"7","target":"0"},{"id":"8","source":"8","target":"0"},{"id":"9","source":"9","target":"0"},{"id":"13","source":"11","target":"0"},{"id":null,"source":"11","target":"2"},{"id":"11","source":"11","target":"3"},{"id":"10","source":"11","target":"10"},{"id":"14","source":"12","target":"11"},{"id":"15","source":"13","target":"11"},{"id":"16","source":"14","target":"11"},{"id":"17","source":"15","target":"11"},{"id":"18","source":"17","target":"16"},{"id":"19","source":"18","target":"16"},{"id":"20","source":"18","target":"17"},{"id":"21","source":"19","target":"16"},{"id":"22","source":"19","target":"17"},{"id":"23","source":"19","target":"18"},{"id":"24","source":"20","target":"16"},{"id":"25","source":"20","target":"17"},{"id":"26","source":"20","target":"18"},{"id":"27","source":"20","target":"19"},{"id":"28","source":"21","target":"16"},{"id":"29","source":"21","target":"17"},{"id":"30","source":"21","target":"18"},{"id":"31","source":"21","target":"19"},{"id":"32","source":"21","target":"20"},{"id":"33","source":"22","target":"16"},{"id":"34","source":"22","target":"17"},{"id":"35","source":"22","target":"18"},{"id":"36","source":"22","target":"19"},{"id":"37","source":"22","target":"20"},{"id":"38","source":"22","target":"21"},{"id":"47","source":"23","target":"11"},{"id":"46","source":"23","target":"12"},{"id":"39","source":"23","target":"16"},{"id":"40","source":"23","target":"17"},{"id":"41","source":"23","target":"18"},{"id":"42","source":"23","target":"19"},{"id":"43","source":"23","target":"20"},{"id":"44","source":"23","target":"21"},{"id":"45","source":"23","target":"22"},{"id":null,"source":"24","target":"11"},{"id":"48","source":"24","target":"23"},{"id":"52","source":"25","target":"11"},{"id":"51","source":"25","target":"23"},{"id":"50","source":"25","target":"24"},{"id":null,"source":"26","target":"11"},{"id":null,"source":"26","target":"16"},{"id":"53","source":"26","target":"24"},{"id":"56","source":"26","target":"25"},{"id":"57","source":"27","target":"11"},{"id":"58","source":"27","target":"23"},{"id":null,"source":"27","target":"24"},{"id":"59","source":"27","target":"25"},{"id":"61","source":"27","target":"26"},{"id":"62","source":"28","target":"11"},{"id":"63","source":"28","target":"27"},{"id":"66","source":"29","target":"11"},{"id":"64","source":"29","target":"23"},{"id":"65","source":"29","target":"27"},{"id":"67","source":"30","target":"23"},{"id":null,"source":"31","target":"11"},{"id":null,"source":"31","target":"23"},{"id":null,"source":"31","target":"27"},{"id":"68","source":"31","target":"30"},{"id":"72","source":"32","target":"11"},{"id":"73","source":"33","target":"11"},{"id":"74","source":"33","target":"27"},{"id":"75","source":"34","target":"11"},{"id":"76","source":"34","target":"29"},{"id":"77","source":"35","target":"11"},{"id":null,"source":"35","target":"29"},{"id":"78","source":"35","target":"34"},{"id":"82","source":"36","target":"11"},{"id":"83","source":"36","target":"29"},{"id":"80","source":"36","target":"34"},{"id":"81","source":"36","target":"35"},{"id":"87","source":"37","target":"11"},{"id":"88","source":"37","target":"29"},{"id":"84","source":"37","target":"34"},{"id":"85","source":"37","target":"35"},{"id":"86","source":"37","target":"36"},{"id":"93","source":"38","target":"11"},{"id":"94","source":"38","target":"29"},{"id":"89","source":"38","target":"34"},{"id":"90","source":"38","target":"35"},{"id":"91","source":"38","target":"36"},{"id":"92","source":"38","target":"37"},{"id":"95","source":"39","target":"25"},{"id":"96","source":"40","target":"25"},{"id":"97","source":"41","target":"24"},{"id":"98","source":"41","target":"25"},{"id":"101","source":"42","target":"24"},{"id":"100","source":"42","target":"25"},{"id":"99","source":"42","target":"41"},{"id":"102","source":"43","target":"11"},{"id":"103","source":"43","target":"26"},{"id":"104","source":"43","target":"27"},{"id":null,"source":"44","target":"11"},{"id":"105","source":"44","target":"28"},{"id":"107","source":"45","target":"28"},{"id":"108","source":"47","target":"46"},{"id":"112","source":"48","target":"11"},{"id":"110","source":"48","target":"25"},{"id":"111","source":"48","target":"27"},{"id":"109","source":"48","target":"47"},{"id":null,"source":"49","target":"11"},{"id":"113","source":"49","target":"26"},{"id":null,"source":"50","target":"24"},{"id":"115","source":"50","target":"49"},{"id":"119","source":"51","target":"11"},{"id":"118","source":"51","target":"26"},{"id":"117","source":"51","target":"49"},{"id":null,"source":"52","target":"39"},{"id":"120","source":"52","target":"51"},{"id":"122","source":"53","target":"51"},{"id":"125","source":"54","target":"26"},{"id":"124","source":"54","target":"49"},{"id":"123","source":"54","target":"51"},{"id":"131","source":"55","target":"11"},{"id":"132","source":"55","target":"16"},{"id":"133","source":"55","target":"25"},{"id":null,"source":"55","target":"26"},{"id":"128","source":"55","target":"39"},{"id":"134","source":"55","target":"41"},{"id":"135","source":"55","target":"48"},{"id":"127","source":"55","target":"49"},{"id":"126","source":"55","target":"51"},{"id":"129","source":"55","target":"54"},{"id":"136","source":"56","target":"49"},{"id":"137","source":"56","target":"55"},{"id":null,"source":"57","target":"41"},{"id":null,"source":"57","target":"48"},{"id":"138","source":"57","target":"55"},{"id":"145","source":"58","target":"11"},{"id":null,"source":"58","target":"27"},{"id":"142","source":"58","target":"48"},{"id":"141","source":"58","target":"55"},{"id":"144","source":"58","target":"57"},{"id":"148","source":"59","target":"48"},{"id":"147","source":"59","target":"55"},{"id":null,"source":"59","target":"57"},{"id":"146","source":"59","target":"58"},{"id":"150","source":"60","target":"48"},{"id":"151","source":"60","target":"58"},{"id":"152","source":"60","target":"59"},{"id":"153","source":"61","target":"48"},{"id":"158","source":"61","target":"55"},{"id":"157","source":"61","target":"57"},{"id":"154","source":"61","target":"58"},{"id":"156","source":"61","target":"59"},{"id":"155","source":"61","target":"60"},{"id":"164","source":"62","target":"41"},{"id":"162","source":"62","target":"48"},{"id":"159","source":"62","target":"55"},{"id":null,"source":"62","target":"57"},{"id":"160","source":"62","target":"58"},{"id":"161","source":"62","target":"59"},{"id":null,"source":"62","target":"60"},{"id":"165","source":"62","target":"61"},{"id":null,"source":"63","target":"48"},{"id":"174","source":"63","target":"55"},{"id":null,"source":"63","target":"57"},{"id":null,"source":"63","target":"58"},{"id":"167","source":"63","target":"59"},{"id":null,"source":"63","target":"60"},{"id":"172","source":"63","target":"61"},{"id":"169","source":"63","target":"62"},{"id":"184","source":"64","target":"11"},{"id":null,"source":"64","target":"48"},{"id":"175","source":"64","target":"55"},{"id":"183","source":"64","target":"57"},{"id":"179","source":"64","target":"58"},{"id":"182","source":"64","target":"59"},{"id":"181","source":"64","target":"60"},{"id":"180","source":"64","target":"61"},{"id":"176","source":"64","target":"62"},{"id":"178","source":"64","target":"63"},{"id":"187","source":"65","target":"48"},{"id":"194","source":"65","target":"55"},{"id":"193","source":"65","target":"57"},{"id":null,"source":"65","target":"58"},{"id":"192","source":"65","target":"59"},{"id":null,"source":"65","target":"60"},{"id":"190","source":"65","target":"61"},{"id":"188","source":"65","target":"62"},{"id":"185","source":"65","target":"63"},{"id":"186","source":"65","target":"64"},{"id":"200","source":"66","target":"48"},{"id":"196","source":"66","target":"58"},{"id":"197","source":"66","target":"59"},{"id":"203","source":"66","target":"60"},{"id":"202","source":"66","target":"61"},{"id":"198","source":"66","target":"62"},{"id":"201","source":"66","target":"63"},{"id":"195","source":"66","target":"64"},{"id":"199","source":"66","target":"65"},{"id":"204","source":"67","target":"57"},{"id":null,"source":"68","target":"11"},{"id":null,"source":"68","target":"24"},{"id":"205","source":"68","target":"25"},{"id":"208","source":"68","target":"27"},{"id":null,"source":"68","target":"41"},{"id":"209","source":"68","target":"48"},{"id":"213","source":"69","target":"11"},{"id":"214","source":"69","target":"24"},{"id":"211","source":"69","target":"25"},{"id":null,"source":"69","target":"27"},{"id":"217","source":"69","target":"41"},{"id":"216","source":"69","target":"48"},{"id":"212","source":"69","target":"68"},{"id":"221","source":"70","target":"11"},{"id":"222","source":"70","target":"24"},{"id":"218","source":"70","target":"25"},{"id":"223","source":"70","target":"27"},{"id":"224","source":"70","target":"41"},{"id":"225","source":"70","target":"58"},{"id":"220","source":"70","target":"68"},{"id":"219","source":"70","target":"69"},{"id":"230","source":"71","target":"11"},{"id":"233","source":"71","target":"25"},{"id":"226","source":"71","target":"27"},{"id":"232","source":"71","target":"41"},{"id":null,"source":"71","target":"48"},{"id":"228","source":"71","target":"68"},{"id":"227","source":"71","target":"69"},{"id":"229","source":"71","target":"70"},{"id":"236","source":"72","target":"11"},{"id":"234","source":"72","target":"26"},{"id":"235","source":"72","target":"27"},{"id":"237","source":"73","target":"48"},{"id":"238","source":"74","target":"48"},{"id":"239","source":"74","target":"73"},{"id":"242","source":"75","target":"25"},{"id":"244","source":"75","target":"41"},{"id":null,"source":"75","target":"48"},{"id":"241","source":"75","target":"68"},{"id":"240","source":"75","target":"69"},{"id":"245","source":"75","target":"70"},{"id":"246","source":"75","target":"71"},{"id":"252","source":"76","target":"48"},{"id":"253","source":"76","target":"58"},{"id":"251","source":"76","target":"62"},{"id":"250","source":"76","target":"63"},{"id":"247","source":"76","target":"64"},{"id":"248","source":"76","target":"65"},{"id":"249","source":"76","target":"66"}],"categories":[{"name":"类目0"},{"name":"类目1"},{"name":"类目2"},{"name":"类目3"},{"name":"类目4"},{"name":"类目5"},{"name":"类目6"},{"name":"类目7"},{"name":"类目8"}]}]}
option.series[0].data.forEach(function (item) {
@@ -20,6 +20,35 @@ option.series[0].data.forEach(function (item) {
});
+
+const option = {
+ tooltip: {},
+ series: {
+ type: "graph",
+ id: "graph0",
+ symbolSize: 35,
+ label: {show: true},
+ edgeSymbol: ["circle", "arrow"],
+ edgeSymbolSize: [4, 15],
+ lineStyle: {opacity: 1, width: 2,},
+ data: [
+ {name: "node_1", x: 300, y: 300},
+ {name: "node_2", x: 800, y: 300},
+ {name: "node_3", x: 550, y: 100},
+ {name: "node_4", x: 550, y: 500},
+ ],
+ edges: [
+ {source: 0, target: 1, lineStyle: {width: 5, curveness: 0.2}},
+ {source: "node_2", target: "node_1", lineStyle: {curveness: 0.2}},
+ {source: "node_1", target: "node_3"},
+ {source: "node_2", target: "node_3"},
+ {source: "node_2", target: "node_4"},
+ {source: "node_1", target: "node_4"},
+ ],
+ },
+};
+
+
## type(string) = 'graph'
{{ use: partial-component-id(
@@ -590,7 +619,15 @@ links: [{
defaultLeft = "'center'",
defaultTop = "'middle'",
defaultWidth = '自适应',
- defaultHeight = '自适应'
+ defaultHeight = '自适应',
+ hintPreserveAspect = true,
+ componentNameInLink = 'series-graph'
+) }}
+
+{{ use: partial-preserve-aspect(
+ prefix = '#',
+ componentNameReadable = 'graph 系列',
+ componentNameInLink = 'series-graph'
) }}
{{ use: partial-silent(
diff --git a/zh/option/series/map.md b/zh/option/series/map.md
index 33ee0079..035649ed 100644
--- a/zh/option/series/map.md
+++ b/zh/option/series/map.md
@@ -33,16 +33,6 @@
geo = true
) }}
-## center(Array)
-
-当前视角的中心点。可以是包含两个 `number` 类型（表示像素值）或 `string` 类型（表示相对容器的百分比）的数组。
-从 `5.3.3` 版本开始支持 `string` 类型。
-
-例如：
-```ts
-center: [115.97, '30%']
-```
-
## geoIndex(number) = null
默认情况下，map series 会自己生成内部专用的 `geo` 组件。但是也可以用这个 `geoIndex` 指定一个 [geo](~geo) 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 [geo](~geo) 组件了。并且，[geo](~geo) 组件的颜色也可以被这个 map series 控制，从而用 [visualMap](~visualMap) 来更改。
@@ -62,9 +52,6 @@ center: [115.97, '30%']
在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 [legend](~legend) 组件时生效。
-## roam(boolean|string) = false
-
-{{ use: partial-roam() }}
{{ use: partial-seriesLayoutBy() }}
diff --git a/zh/option/series/sankey.md b/zh/option/series/sankey.md
index ed6da977..01632a44 100644
--- a/zh/option/series/sankey.md
+++ b/zh/option/series/sankey.md
@@ -98,7 +98,8 @@ const option = {"tooltip":{"trigger":"item","triggerOn":"mousemove"},"series":[{
{{ use: partial-view-coord-sys-common(
prefix = '#',
componentMainType = 'series',
- componentSubType = 'sankey'
+ componentSubType = 'sankey',
+ roamTriggerDefault = "'global'"
) }}
diff --git a/zh/option/series/tree.md b/zh/option/series/tree.md
index f0f77155..5777251c 100644
--- a/zh/option/series/tree.md
+++ b/zh/option/series/tree.md
@@ -91,7 +91,8 @@ const option = {
{{ use: partial-view-coord-sys-common(
prefix = '#',
componentMainType = 'series',
- componentSubType = 'tree'
+ componentSubType = 'tree',
+ roamTriggerDefault = "'global'"
) }}
diff --git a/zh/option/series/treemap.md b/zh/option/series/treemap.md
index 97201428..1344490a 100644
--- a/zh/option/series/treemap.md
+++ b/zh/option/series/treemap.md
@@ -250,20 +250,14 @@ const option = {
## roam(boolean|string) = true
-
-
-是否开启拖拽漫游（移动和缩放）。可取值有：
-
-+ `false`：关闭。
-+ `'scale'` 或 `'zoom'`：只能够缩放。
-+ `'move'` 或 `'pan'`：只能够平移。
-+ `true`：缩放和平移均可。
+{{ use: partial-roam-desc() }}
## scaleLimit(Object)
-{{ use: partial-scale-limit(
+{{ use: partial-scale-limit-desc(
prefix = "##",
- version = "5.5.1"
+ version = "5.5.1",
+ componentNameInLink = 'series-treemap'
) }}
## nodeClick(boolean|string) = 'zoomToNode'