This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat-chord
in repository https://gitbox.apache.org/repos/asf/echarts-doc.git
The following commit(s) were added to refs/heads/feat-chord by this push:
new 70ebf07f doc: complete doc for chord
70ebf07f is described below
commit 70ebf07fee4e46b4633acf3f47857f7fca9b8e93
Author: Ovilia <[email protected]>
AuthorDate: Thu Nov 20 16:34:00 2025 +0800
doc: complete doc for chord
---
en/option/option.md | 1 +
en/option/series/chord.md | 251 ++++++++++++++++++++++++++++++++++++++++++++++
zh/option/series/chord.md | 126 +++++++++++++----------
3 files changed, 325 insertions(+), 53 deletions(-)
diff --git a/en/option/option.md b/en/option/option.md
index f90b7fd2..e9c8a5c6 100644
--- a/en/option/option.md
+++ b/en/option/option.md
@@ -50,6 +50,7 @@
{{import: series-gauge}}
{{import: series-pictorialBar}}
{{import: series-themeRiver}}
+{{import: series-chord}}
{{import: series-custom}}
# darkMode(boolean)
diff --git a/en/option/series/chord.md b/en/option/series/chord.md
new file mode 100644
index 00000000..a78158df
--- /dev/null
+++ b/en/option/series/chord.md
@@ -0,0 +1,251 @@
+{{ target: series-chord }}
+
+# series.chord(Object)
+
+{{ use: partial-version(
+ version = "6.0.0"
+) }}
+
+A chord diagram is a chart used to visualize relationships and flows between
different entities. It displays the direction and proportion of data flows with
elegant arcs and chords.
+
+**Example:**
+
+~[600x600](${galleryViewPath}chord-style&edit=1&reset=1)
+
+
+<ExampleBaseOption name="chord" title="Basic Chord" title-en="Basic Chord">
+const option = {
+ tooltip: {},
+ legend: {},
+ series: [
+ {
+ type: 'chord',
+ clockwise: false,
+ label: { show: true },
+ lineStyle: { color: 'target' },
+ data: [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }],
+ links: [
+ { source: 'A', target: 'B', value: 40 },
+ { source: 'A', target: 'C', value: 20 },
+ { source: 'B', target: 'D', value: 20 }
+ ]
+ }
+ ]
+};
+</ExampleBaseOption>
+
+## type(string) = 'chord'
+
+{{ use: partial-component-id(
+ prefix = "#"
+) }}
+
+{{ use: partial-series-name() }}
+
+{{ use: component-circular-layout(
+ componentName = "Chord Diagram",
+ defaultRadius = "['70%', '80%']"
+) }}
+
+## clockwise(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
+Whether the sectors are arranged clockwise.
+
+## startAngle(number) = 90
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="90" />
+
+Starting angle, supported range [0, 360].
+
+## minAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
+Minimum sector angle (0 ~ 360), used to prevent very small values from
producing sectors that are too small and affect interaction.
+
+~[600x600](${galleryViewPath}chord-minAngle&edit=1&reset=1)
+
+## padAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
+The gap angle between sectors (0 ~ 360).
+
+{{ use: partial-coord-sys(
+ version = '6.0.0',
+ seriesType = "chord",
+ coordSysDefault = "'none'",
+ calendar = true,
+ matrix = true,
+ none = true
+) }}
+
+## itemStyle(Object)
+
+{{ use: partial-item-style-desc() }}
+
+{{ use: partial-item-style(
+ prefix = "##",
+ useColorPalatte = true,
+ hasCallback = true,
+ useDecal = true
+) }}
+
+{{ use: partial-sector-border-radius(
+ prefix = '##',
+ type = "Chord Diagram"
+) }}
+
+## lineStyle(Object)
+
+### color(string) = 'source'
+
+The color of the edge in Chord charts.
+
++ `'source'`: use source node color.
++ `'target'`: use target node color.
++ `'gradient'`: gradient color between source node and target node.
+
+~[900x500](${galleryViewPath}chord-lineStyle-color&edit=1&reset=1)
+
+### opacity(number) = ${defaultOpacity|default(0.2)}
+
+Opacity of the edges.
+
+{{ use: partial-style-shadow(
+ prefix = '##'
+) }}
+
+## data(Array)
+
+List of node data for the chord diagram.
+
+```ts
+data: [{
+ name: 'A'
+}, {
+ name: 'B',
+ value: 100
+}, {
+ name: 'C',
+ itemStyle: {
+ color: 'red'
+ }
+}]
+```
+
+Note: The node `name` must be unique.
+
+### name(string)
+
+Name of the data item.
+
+### value(number|Array)
+
+Value of the data item.
+
+### itemStyle(Object)
+
+Style of this node.
+
+{{ use: partial-item-style(
+ prefix = "###",
+ useColorPalatte = true
+) }}
+
+### label(Object)
+
+Label style for this node.
+
+{{ use: partial-label(
+ prefix = "###",
+ labelMargin = true,
+ noPosition = true
+) }}
+
+#### position(string)
+
+Position of the label. Supports `'inside'` or `'outside'`.
+
+### emphasis(Object)
+
+Style when the node is emphasized.
+
+{{ use: partial-emphasis-disabled(
+ prefix = "###"
+) }}
+
+{{ use: graph-node-state(
+ state = 'emphasis'
+) }}
+
+### blur(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+The blur (faded) state of the node.
+
+{{ use: graph-node-state(
+ state = 'blur'
+) }}
+
+### select(Object)
+
+{{ use: partial-version(
+ version = "5.0.0"
+) }}
+
+The selected state of the node.
+
+{{ use: partial-select-disabled(
+ prefix = "###"
+) }}
+
+{{ use: graph-node-state(
+ state = 'select'
+) }}
+
+{{ use: partial-tooltip-in-series-data() }}
+
+## nodes(Array)
+
+Alias, same as [data](~series-graph.data)
+
+## links(Array)
+
+Relationship data between nodes. Example:
+```ts
+links: [{
+ source: 'n1',
+ target: 'n2'
+}, {
+ source: 'n2',
+ target: 'n3'
+}]
+```
+
+### source(string|number)
+
+The source node name ([data.name](~series-graph.data.name)) as a string, or
the index of the source node as a number.
+
+### target(string|number)
+
+The target node name ([data.name](~series-graph.data.name)) as a string, or
the index of the target node as a number.
+
+### value(number)
+
+Value of the edge.
+
+## emphasis(Object)
+
+Styles for emphasized sectors and labels.
+
+{{ use: partial-emphasis-disabled(
+ prefix = "##"
+) }}
+
+{{ use: partial-focus-blur-scope() }}
diff --git a/zh/option/series/chord.md b/zh/option/series/chord.md
index 9461e7ec..c28cbae2 100644
--- a/zh/option/series/chord.md
+++ b/zh/option/series/chord.md
@@ -48,6 +48,32 @@ const option = {
defaultRadius = "['70%', '80%']"
) }}
+## clockwise(boolean) = true
+
+<ExampleUIControlBoolean default="true" />
+
+饼图的扇区是否是顺时针排布。
+
+## startAngle(number) = 90
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="90" />
+
+起始角度，支持范围[0, 360]。
+
+## minAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
+最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
+
+~[600x600](${galleryViewPath}chord-minAngle&edit=1&reset=1)
+
+## padAngle(number) = 0
+
+<ExampleUIControlAngle step="1" min="0" max="360" default="0" />
+
+扇区之间的间隔角度（0 ~ 360）。
+
{{ use: partial-coord-sys(
version = '6.0.0',
seriesType = "chord",
@@ -57,6 +83,42 @@ const option = {
none = true
) }}
+## itemStyle(Object)
+
+{{ use: partial-item-style-desc() }}
+
+{{ use: partial-item-style(
+ prefix = "##",
+ useColorPalatte = true,
+ hasCallback = true,
+ useDecal = true
+) }}
+
+{{ use: partial-sector-border-radius(
+ prefix = '##',
+ type = "和弦图"
+) }}
+
+## lineStyle(Object)
+
+### color(string) = 'source'
+
+边的颜色。
+
++ `'source'`: 使用源节点颜色。
++ `'target'`: 使用目标节点颜色。
++ `'gradient'`: 以源节点和目标节点的颜色做一个渐变过渡色。
+
+~[900x500](${galleryViewPath}chord-lineStyle-color&edit=1&reset=1)
+
+### opacity(number) = ${defaultOpacity|default(0.2)}
+
+边的透明度。
+
+{{ use: partial-style-shadow(
+ prefix = '##'
+) }}
+
## data(Array)
和弦图的节点数据列表。
@@ -100,9 +162,14 @@ data: [{
{{ use: partial-label(
prefix = "###",
- labelMargin = true
+ labelMargin = true,
+ noPosition = true
) }}
+#### position(string)
+
+标签的位置。支持 `'inside'` 或 `'outside'`。
+
### emphasis(Object)
该节点的高亮状态。
@@ -172,61 +239,14 @@ links: [{
### value(number)
-边的数值，可以在力引导布局中用于映射到边的长度。
+边的数值。
-### lineStyle(Object)
+## emphasis(Object)
-关系边的线条样式。
-
-{{ use: partial-line-style(
- prefix = "###"
-) }}
-
-### emphasis(Object)
-
-该关系边的高亮状态。
+高亮状态的扇区和标签样式。
{{ use: partial-emphasis-disabled(
- prefix = "###"
-) }}
-
-{{ use: chord-edge-state(
- state = 'emphasis'
-) }}
-
-### blur(Object)
-
-该关系边的淡出状态。
-
-{{ use: chord-edge-state(
- state = 'blur'
-) }}
-
-### select(Object)
-
-该关系边的选中状态。
-
-{{ use: partial-select-disabled(
- prefix = "###"
-) }}
-
-{{ use: chord-edge-state(
- state = 'select'
+ prefix = "##"
) }}
-
-{{ target: chord-edge-state }}
-
-#### lineStyle(Object)
-
-{{ use: partial-line-style(
- prefix = "####",
- hasInherit = ${state} === 'emphasis'
-) }}
-
-#### label(Object)
-
-{{ use: partial-label(
- prefix = "####",
- defaultShow = true
-) }}
+{{ use: partial-focus-blur-scope() }}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
