fix(charts): migrate ECharts 6 containLabel and hide redundant pie legend

- Replace `containLabel: true` with `outerBoundsMode: 'same'` in
  EChartLine, EChartBar, EChartHeatmap to suppress the ECharts 6
  deprecation warning; `outerBoundsMode: 'same'` is the semantic
  equivalent (outer boundary equals the grid rect, labels fit inside)
- In EChartPie, auto-hide the right-side legend when outer labels
  (indicator lines + text) are already visible, and center the chart
  accordingly to avoid redundant information

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
diguaandClaude Sonnet 4.6 committed 2026-06-10 00:15:25 +08:00
1 parent 842866aff3
commit 7239589146
4 files changed
+10 -5

No files matched your search

+1 -1
View File
@@ -68,7 +68,7 @@ const option = computed<EChartsOption>(() => {
right: 16,
top: 20,
bottom: isHorizontal ? 20 : labelCount > 8 ? 48 : 30,
containLabel: true,
outerBoundsMode: 'same',
},
xAxis: isHorizontal
? {
+1 -1
View File
@@ -68,7 +68,7 @@ const option = computed<EChartsOption>(() => {
right: 20,
top: isCompact ? 12 : 24,
bottom: isCompact ? 52 : 70,
containLabel: true,
outerBoundsMode: 'same',
},
xAxis: {
type: 'category',
+1 -1
View File
@@ -110,7 +110,7 @@ const option = computed<EChartsOption>(() => {
right: 20,
top: hasSeries ? (isCompact ? 44 : 56) : 20,
bottom: useDataZoom ? 66 : 34,
containLabel: true,
outerBoundsMode: 'same',
},
legend: hasSeries
? {
+7 -2
View File
@@ -81,6 +81,7 @@ const option = computed<EChartsOption>(() => {
},
}
const showOuterLabel = !isCompact && !isDense
const effectiveShowLegend = props.showLegend && !showOuterLabel
return {
color: colors,
@@ -95,12 +96,16 @@ const option = computed<EChartsOption>(() => {
color: '#fff',
},
},
legend: props.showLegend ? legendPlacement : undefined,
legend: effectiveShowLegend ? legendPlacement : undefined,
series: [
{
type: 'pie',
radius: props.doughnut ? [props.innerRadius, isCompact ? '58%' : '68%'] : isCompact ? '58%' : '68%',
center: props.showLegend ? (isCompact ? ['50%', '42%'] : ['38%', '50%']) : ['50%', isCompact ? '46%' : '50%'],
center: effectiveShowLegend
? isCompact
? ['50%', '42%']
: ['38%', '50%']
: ['50%', isCompact ? '46%' : '50%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: 4,