hailin
/
dv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: title and legend auto-avoid overlap 

Legend moves below title when both are at top. Grid top adjusts
dynamically based on title/legend presence to prevent overlap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hailin 2026-04-05 03:09:29 -07:00
parent f203904aa8
commit 541440be8a
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/adapters/gateways/EChartsOptionBuilder/barOptionBuilder.ts
View File

@ -20,10 +20,21 @@ function applyCommonStyle(option: Record<string, any>, style: StyleConfig): void
} }
if (style.legend.visible) { if (style.legend.visible) {
// When title is visible and legend is at top, push legend below the title
const hasTitle = style.title.visible && style.title.text;
let legendTop: string | number = 'top';
if (style.legend.position === 'top') {
legendTop = hasTitle ? 35 : 'top';
} else if (style.legend.position === 'bottom') {
legendTop = 'bottom';
} else {
legendTop = 'middle';
}
option.legend = { option.legend = {
show: true, show: true,
orient: style.legend.orient, orient: style.legend.orient,
top: style.legend.position === 'top' ? 'top' : style.legend.position === 'bottom' ? 'bottom' : 'middle', top: legendTop,
left: style.legend.position === 'left' ? 'left' : style.legend.position === 'right' ? 'right' : 'center', left: style.legend.position === 'left' ? 'left' : style.legend.position === 'right' ? 'right' : 'center',
textStyle: { textStyle: {
fontSize: style.legend.fontSize, fontSize: style.legend.fontSize,
@ -51,9 +62,16 @@ function applyCommonStyle(option: Record<string, any>, style: StyleConfig): void
option.animation = false; option.animation = false;
} }
// Dynamic grid top: title(30) + legend(25) + padding
const hasTitle = style.title.visible && style.title.text;
const hasLegend = style.legend.visible && style.legend.position === 'top';
let gridTop = 20;
if (hasTitle) gridTop += 30;
if (hasLegend) gridTop += 25;
option.grid = { option.grid = {
containLabel: true, containLabel: true,
top: 60, top: gridTop,
right: 30, right: 30,
bottom: 30, bottom: 30,
left: 30, left: 30,