From 5d4a3ef016e74af5c8c368477e2a14ed1f2644f6 Mon Sep 17 00:00:00 2001
From: Quinn Su <quinns@nvidia.com>
Date: Wed, 9 Jul 2025 17:29:36 +0800
Subject: [PATCH] scale legend when set height

---
 src/component/legend/LegendView.ts |  58 ++++++-
 test/legend-height-formats.html    | 244 +++++++++++++++++++++++++++++
 2 files changed, 299 insertions(+), 3 deletions(-)
 create mode 100644 test/legend-height-formats.html

diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index 2dc195fcae..66ccb9ad0c 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -26,6 +26,7 @@ import { enableHoverEmphasis } from '../../util/states';
 import {setLabelStyle, createTextStyle} from '../../label/labelStyle';
 import {makeBackground} from '../helper/listComponent';
 import * as layoutUtil from '../../util/layout';
+import { parsePercent } from '../../util/number';
 import ComponentView from '../../view/Component';
 import LegendModel, {
     LegendItemStyleOption,
@@ -141,7 +142,26 @@ class LegendView extends ComponentView {
 
         const maxSize = layoutUtil.getLayoutRect(positionInfo, refContainer, padding);
 
-        const mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition);
+        const userHeight = legendModel.get('height');
+        let heightThreshold: number | null = null;
+
+        if (userHeight != null) {
+            if (typeof userHeight === 'string') {
+                const parsed = parsePercent(userHeight, refContainer.height);
+                if (!isNaN(parsed) && isFinite(parsed) && parsed > 0) {
+                    heightThreshold = parsed;
+                }
+            }
+            else if (typeof userHeight === 'number') {
+                if (!isNaN(userHeight) && isFinite(userHeight) && userHeight > 0) {
+                    heightThreshold = userHeight;
+                }
+            }
+        }
+
+        const mainRect = this.layoutInner(
+            legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition, heightThreshold
+        );
 
         // Place mainGroup, based on the calculated `mainRect`.
         const layoutRect = layoutUtil.getLayoutRect(
@@ -522,7 +542,8 @@ class LegendView extends ComponentView {
         maxSize: { width: number, height: number },
         isFirstRender: boolean,
         selector: LegendOption['selector'],
-        selectorPosition: LegendOption['selectorPosition']
+        selectorPosition: LegendOption['selectorPosition'],
+        heightThreshold: number | null
     ): ZRRectLike {
         const contentGroup = this.getContentGroup();
         const selectorGroup = this.getSelectorGroup();
@@ -536,7 +557,38 @@ class LegendView extends ComponentView {
             maxSize.height
         );
 
-        const contentRect = contentGroup.getBoundingRect();
+        let contentRect = contentGroup.getBoundingRect();
+
+        if (heightThreshold != null) {
+            if (contentRect.height > heightThreshold) {
+                const exceedRatio = (contentRect.height - heightThreshold) / heightThreshold;
+                const scale = Math.max(1 / (1 + exceedRatio), 0.5);
+
+                const adjustedMaxSize = {
+                    width: maxSize.width / scale,
+                    height: maxSize.height / scale,
+                };
+
+                layoutUtil.box(
+                    legendModel.get('orient'),
+                    contentGroup,
+                    legendModel.get('itemGap'),
+                    adjustedMaxSize.width,
+                    adjustedMaxSize.height
+                );
+                contentGroup.scaleX = scale;
+                contentGroup.scaleY = scale;
+                contentRect = contentGroup.getBoundingRect();
+            }
+            else {
+                if (contentGroup.scaleX !== 1 || contentGroup.scaleY !== 1) {
+                    contentGroup.scaleX = 1;
+                    contentGroup.scaleY = 1;
+                    contentRect = contentGroup.getBoundingRect();
+                }
+            }
+        }
+
         const contentPos = [-contentRect.x, -contentRect.y];
 
         selectorGroup.markRedraw();
diff --git a/test/legend-height-formats.html b/test/legend-height-formats.html
new file mode 100644
index 0000000000..8b0876dc9a
--- /dev/null
+++ b/test/legend-height-formats.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="lib/simpleRequire.js"></script>
+    <script src="lib/config.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/facePrint.js"></script>
+    <script src="lib/testHelper.js"></script>
+    <!-- <script src="ut/lib/canteen.js"></script> -->
+    <link rel="stylesheet" href="lib/reset.css" />
+</head>
+
+<body>
+    <style>
+    </style>
+
+
+
+    <div id="main0"></div>
+    <div id="main1"></div>
+    <div id="main2"></div>
+    <div id="main3"></div>
+    <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+            const fruits = [
+                "Apple", "Banana", "Grapes", "Orange", "Strawberry", "Pineapple", "Watermelon", "Kiwi", "Peach", "Blueberry", 
+                "Cherry", "Mango", "Papaya", "Apricot", "Coconut", "Raspberry", "Blackberry", "Lemon", "Lime", "Avocado", 
+                "Fig", "Date", "Pomegranate", "Cantaloupe", "Honeydew", "Plum", "Tangerine", "Nectarine", "Passionfruit","OTHER_LONG_NAME_ITEM1","OTHER_LONG_NAME_ITEM2","OTHER_LONG_NAME_ITEM3","OTHER_LONG_NAME_ITEM4","OTHER_LONG_NAME_ITEM5","OTHER_LONG_NAME_ITEM6","OTHER_LONG_NAME_ITEM7","OTHER_LONG_NAME_ITEM8","OTHER_LONG_NAME_ITEM9","OTHER_LONG_NAME_ITEM10"
+            ];
+            option = {
+                title: {
+                    text: 'Auto Scale Legend Test',
+                    subtext: 'When count of legend items is dynamic, or when user resize the window, \nlegend will be scaled automatically.',
+                    top: 10,
+                    left: 10
+                },
+                tooltip: {
+                    trigger: 'item',
+                    backgroundColor: 'rgba(0,0,250,0.2)'
+                },
+                legend: {
+                    type: 'plain',
+                    bottom: 10,
+                    data: fruits,
+                    height: 80
+                },
+                visualMap: {
+                    top: 'middle',
+                    right: 10,
+                    color: ['red', 'yellow'],
+                    calculable: true
+                },
+                radar: {
+                    indicator: [
+                        { text: 'VC', max: 400 },
+                        { text: 'Fiber', max: 400 },
+                        { text: 'Sugar', max: 400 },
+                        { text: 'Water', max: 400 },
+                        { text: 'Antioxidant', max: 400 }
+                    ]
+                },
+                series: (function () {
+                    var series = [];
+                    for (var i = 0; i < fruits.length; i++) {
+                        series.push({
+                            name: fruits[i],
+                            type: 'radar',
+                            symbol: 'none',
+                            lineStyle: {
+                                width: 1
+                            },
+                            emphasis: {
+                                areaStyle: {
+                                    color: 'rgba(0,250,0,0.3)'
+                                }
+                            },
+                            data: [
+                                {
+                                    value: [
+                                        (40 - i) * 10,
+                                        (38 - i) * 4 + 60,
+                                        i * 5 + 10,
+                                        i * 9,
+                                        i * i / 2  
+                                    ],
+                                    name: fruits[i]
+                                }
+                            ]
+                        });
+                    }
+                    return series;
+                })()
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Legend Auto Scale Test - Plain Type - You can resize the window to see the effect',
+                    'horizontal legend **height: 80**'
+                ],
+                option: option
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+
+            var chart1 = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Legend Auto Scale Test - Plain Type - You can resize the window to see the effect',
+                    'horizontal legend **height Not Set**'
+
+                ],
+                option: {
+                    ...option,
+                    legend: {
+                        ...option.legend,
+                        height: undefined
+                    }
+                }
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+
+         
+            var option1 = {
+                title: {
+                    text: '',
+                    top: 0,
+                    left: 10
+                },
+                legend: {
+                    data: [
+                        "Apple", "Banana", "Grapes", "Orange", "Strawberry", "Pineapple", "Watermelon", "Kiwi", "Peach", "Blueberry", 
+                        "Cherry", "Mango", "Papaya", "Apricot", "Coconut", "Raspberry", "Blackberry", "Lemon", "Lime", "Avocado", 
+                        "Fig", "Date", "Pomegranate", "Cantaloupe", "Honeydew", "Plum", "Tangerine", "Nectarine", "Passionfruit","OTHER_LONG_NAME_ITEM1","OTHER_LONG_NAME_ITEM2","OTHER_LONG_NAME_ITEM3","OTHER_LONG_NAME_ITEM4","OTHER_LONG_NAME_ITEM5","OTHER_LONG_NAME_ITEM6","OTHER_LONG_NAME_ITEM7","OTHER_LONG_NAME_ITEM8","OTHER_LONG_NAME_ITEM9","OTHER_LONG_NAME_ITEM10"
+                    ],
+                    type: 'plain',
+                    top: 0,
+                    width: '100%'
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+                }],
+                yAxis: [{
+                    type: 'value',
+                    name: 'Production (tons)'
+                }],
+                grid: {
+                    top: '30%'
+                },
+                series: (function() {
+                    var fruits = [
+                        "Apple", "Banana", "Grapes", "Orange", "Strawberry", "Pineapple", "Watermelon", "Kiwi", "Peach", "Blueberry", 
+                        "Cherry", "Mango", "Papaya", "Apricot", "Coconut", "Raspberry", "Blackberry", "Lemon", "Lime", "Avocado", 
+                        "Fig", "Date", "Pomegranate", "Cantaloupe", "Honeydew", "Plum", "Tangerine", "Nectarine", "Passionfruit","OTHER_LONG_NAME_ITEM1","OTHER_LONG_NAME_ITEM2","OTHER_LONG_NAME_ITEM3","OTHER_LONG_NAME_ITEM4","OTHER_LONG_NAME_ITEM5","OTHER_LONG_NAME_ITEM6","OTHER_LONG_NAME_ITEM7","OTHER_LONG_NAME_ITEM8","OTHER_LONG_NAME_ITEM9","OTHER_LONG_NAME_ITEM10"
+                    ];
+                    var series = [];
+                    for (var i = 0; i < fruits.length; i++) {
+                        series.push({
+                            name: fruits[i],
+                            type: 'line',
+                            stack: 'total',
+                            areaStyle: {},
+                            emphasis: {
+                                focus: 'series'
+                            },
+                            data: [
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10),
+                                Math.floor(Math.random() * 100 + 10)
+                            ]
+                        });
+                    }
+                    return series;
+                })()
+            };
+            var chart2 = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Legend Auto Scale Test - Stack Area Chart ',
+                    'horizontal legend **not set height**',
+                ],
+                option: option1,
+                width: 640,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+            chart2.setOption(option1);
+
+
+            var chart3 = testHelper.create(echarts, 'main3', {
+                title: [
+                    'Legend Auto Scale Test - Stack Area Chart ',
+                    'horizontal legend **height: "30%"**',
+                ],
+                option: {...option1,
+                    legend: {
+                        ...option1.legend,
+                        height: '30%'
+                    }
+                },
+                width: 640,
+                // buttons: [{text: 'btn-txt', onclick: function () {}}],
+                // recordCanvas: true,
+            });
+            chart3.setOption(option1);
+        });
+    </script>
+
+
+</body>
+
+</html>
\ No newline at end of file