From e2eda8e63a1d1ba55373268cb292338f6d648dfb Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 17 Nov 2025 14:57:14 +0800 Subject: [PATCH 1/2] WIP(chord): doc --- zh/option/option.md | 1 + zh/option/series/chord.md | 232 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 233 insertions(+) create mode 100644 zh/option/series/chord.md diff --git a/zh/option/option.md b/zh/option/option.md index 685adc7b..f62e32c6 100644 --- a/zh/option/option.md +++ b/zh/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/zh/option/series/chord.md b/zh/option/series/chord.md new file mode 100644 index 00000000..9461e7ec --- /dev/null +++ b/zh/option/series/chord.md @@ -0,0 +1,232 @@ + +{{ target: series-chord }} + +# series.chord(Object) + +{{ use: partial-version( + version = "6.0.0" +) }} + +和弦图是一种用于可视化不同实体之间相互关系和流量的数据图表。它通过优美的弧形和弦连接，展示数据流动的方向和比例。 + +**示例：** + +~[600x600](${galleryViewPath}chord-style&edit=1&reset=1) + + + +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 } + ] + } + ] +}; + + +## type(string) = 'chord' + +{{ use: partial-component-id( + prefix = "#" +) }} + +{{ use: partial-series-name() }} + +{{ use: component-circular-layout( + componentName = "和弦图", + defaultRadius = "['70%', '80%']" +) }} + +{{ use: partial-coord-sys( + version = '6.0.0', + seriesType = "chord", + coordSysDefault = "'none'", + calendar = true, + matrix = true, + none = true +) }} + +## data(Array) + +和弦图的节点数据列表。 + +```ts +data: [{ + name: 'A' +}, { + name: 'B', + value: 100 +}, { + name: 'C', + itemStyle: { + color: 'red' + } +}] +``` + +**注意:** 节点的`name`不能重复。 + +### name(string) + +数据项名称。 + +### value(number|Array) + +数据项值。 + +### itemStyle(Object) + +该节点的样式。 + +{{ use: partial-item-style( + prefix = "###", + useColorPalatte = true +) }} + +### label(Object) + +该节点标签的样式。 + +{{ use: partial-label( + prefix = "###", + labelMargin = true +) }} + +### emphasis(Object) + +该节点的高亮状态。 + +{{ use: partial-emphasis-disabled( + prefix = "###" +) }} + +{{ use: graph-node-state( + state = 'emphasis' +) }} + +### blur(Object) + +{{ use: partial-version( + version = "5.0.0" +) }} + +该节点的淡出状态。 + +{{ use: graph-node-state( + state = 'blur' +) }} + +### select(Object) + +{{ use: partial-version( + version = "5.0.0" +) }} + +该节点的选中状态。 + +{{ use: partial-select-disabled( + prefix = "###" +) }} + +{{ use: graph-node-state( + state = 'select' +) }} + +{{ use: partial-tooltip-in-series-data() }} + +## nodes(Array) + +别名，同 [data](~series-graph.data) + +## links(Array) + +节点间的关系数据。示例： +```ts +links: [{ + source: 'n1', + target: 'n2' +}, { + source: 'n2', + target: 'n3' +}] +``` + +### source(string|number) + +边的[源节点名称](~series-graph.data.name)的字符串，也支持使用数字表示源节点的索引。 + +### target(string|number) + +边的[目标节点名称](~series-graph.data.name)的字符串，也支持使用数字表示源节点的索引。 + +### value(number) + +边的数值，可以在力引导布局中用于映射到边的长度。 + +### lineStyle(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' +) }} + + +{{ target: chord-edge-state }} + +#### lineStyle(Object) + +{{ use: partial-line-style( + prefix = "####", + hasInherit = ${state} === 'emphasis' +) }} + +#### label(Object) + +{{ use: partial-label( + prefix = "####", + defaultShow = true +) }} From 70ebf07fee4e46b4633acf3f47857f7fca9b8e93 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 20 Nov 2025 16:34:00 +0800 Subject: [PATCH 2/2] 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(-) create mode 100644 en/option/series/chord.md 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) + + + +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 } + ] + } + ] +}; + + +## 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 + + + +Whether the sectors are arranged clockwise. + +## startAngle(number) = 90 + + + +Starting angle, supported range [0, 360]. + +## minAngle(number) = 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 + + + +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 + + + +饼图的扇区是否是顺时针排布。 + +## startAngle(number) = 90 + + + +起始角度，支持范围[0, 360]。 + +## minAngle(number) = 0 + + + +最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。 + +~[600x600](${galleryViewPath}chord-minAngle&edit=1&reset=1) + +## padAngle(number) = 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() }}