This is an automated email from the ASF dual-hosted git repository. susiwen8 pushed a commit to branch codex/tree-center-orient in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 1931088427ab1764d7316f53e8910097a91075a2 Author: susiwen8 <[email protected]> AuthorDate: Mon May 4 14:00:55 2026 +0800 Show single-root centered tree expansion in the visual case The tree center layout needs a visual case that makes the intended single-root behavior explicit. The existing case now remains as the explicit side example, and a second chart shows one root splitting first-level branches automatically to both sides. Constraint: Keep the evidence in the existing tree HTML test case rather than adding another page. Rejected: Add a second standalone HTML file | one page makes explicit-side and automatic-side behavior easier to compare in the same screenshot. Confidence: high Scope-risk: narrow Reversibility: clean Tested: git diff --check -- test/tree-center.html Tested: npx jest --config test/ut/jest.config.cjs --coverage=false test/ut/spec/series/tree.test.ts --runInBand Tested: npx eslint src/chart/tree/TreeSeries.ts src/chart/tree/treeLayout.ts src/chart/tree/TreeView.ts test/ut/spec/series/tree.test.ts Tested: Chrome headless screenshot saved at .codex-artifacts/tree-center-single-root.png Not-tested: Full visual regression suite --- test/tree-center.html | 91 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 85 insertions(+), 6 deletions(-) diff --git a/test/tree-center.html b/test/tree-center.html index 43bbda446..92b36967f 100644 --- a/test/tree-center.html +++ b/test/tree-center.html @@ -26,23 +26,42 @@ under the License. </head> <body> <style> - html, body, #main { + html, body { width: 100%; - height: 100%; padding: 0; margin: 0; } + body { + font-family: sans-serif; + } + .case-title { + height: 32px; + line-height: 32px; + padding-left: 16px; + font-size: 14px; + color: #555; + box-sizing: border-box; + } + .chart { + width: 100%; + height: 400px; + } </style> - <div id="main"></div> + <div class="case-title">orient: center, root children with explicit side</div> + <div id="main-explicit-side" class="chart"></div> + <div class="case-title">orient: center, single root expands to both sides automatically</div> + <div id="main-auto-side" class="chart"></div> <script> require(['echarts'], function (echarts) { - var chart = echarts.init(document.getElementById('main')); + var explicitSideChart = echarts.init(document.getElementById('main-explicit-side')); + var autoSideChart = echarts.init(document.getElementById('main-auto-side')); window.onresize = function () { - chart.resize(); + explicitSideChart.resize(); + autoSideChart.resize(); }; - chart.setOption({ + explicitSideChart.setOption({ series: [{ type: 'tree', data: [{ @@ -121,6 +140,66 @@ under the License. } }] }); + + autoSideChart.setOption({ + series: [{ + type: 'tree', + data: [{ + name: 'Single Root', + children: [{ + name: 'Discovery', + children: [ + { name: 'Research notes' }, + { name: 'User interviews' }, + { name: 'Problem framing' } + ] + }, { + name: 'Design', + children: [ + { name: 'Information architecture' }, + { name: 'Interaction model' }, + { name: 'Visual system' } + ] + }, { + name: 'Build', + children: [ + { name: 'Layout engine' }, + { name: 'Rendering' }, + { name: 'API surface' } + ] + }, { + name: 'Verify', + children: [ + { name: 'Unit tests' }, + { name: 'HTML case' }, + { name: 'Screenshot review' } + ] + }] + }], + orient: 'center', + expandAndCollapse: false, + initialTreeDepth: -1, + top: 20, + bottom: 20, + left: 220, + right: 220, + symbol: 'circle', + symbolSize: 10, + edgeShape: 'polyline', + itemStyle: { + color: '#1b7ef2' + }, + lineStyle: { + color: '#6aa0e6', + width: 1.5, + curveness: 0.5 + }, + label: { + fontSize: 14, + color: '#222' + } + }] + }); }); </script> </body> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
