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
commit e2eda8e63a1d1ba55373268cb292338f6d648dfb Author: Ovilia <[email protected]> AuthorDate: Mon Nov 17 14:57:14 2025 +0800 WIP(chord): doc --- zh/option/option.md | 1 + zh/option/series/chord.md | 232 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 233 insertions(+) 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) + + +<ExampleBaseOption name="chord" title="基础和弦图" 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 = "和弦图", + 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 +) }} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
