SchnWalter commented on issue #20237: URL: https://github.com/apache/echarts/issues/20237#issuecomment-2863686280
The problem is visible on many scenarios where the legend container width is defined and the legend items are long. Here are some hints for whom may want to address the root cause: The issues seems to be in `LegendView._createItem()`, it's rendering the legend item text at the full width, regardless of the legend container width or the legend icon+spacing; https://github.com/apache/echarts/blob/ef926fa61d41588a663717c4fd1c0412c57474db/src/component/legend/LegendView.ts#L465-L474 It should have a defined max-width passed down from `render()` to the `_createItem()` method, here's a partial patch applied directly on the built package: ```diff diff --git a/node_modules/echarts/lib/component/legend/LegendView.js b/node_modules/echarts/lib/component/legend/LegendView.js index ffaaa42..5070daf 100644 --- a/node_modules/echarts/lib/component/legend/LegendView.js +++ b/node_modules/echarts/lib/component/legend/LegendView.js @@ -102,7 +102,6 @@ var LegendView = /** @class */function (_super) { if (selector && (!selectorPosition || selectorPosition === 'auto')) { selectorPosition = orient === 'horizontal' ? 'end' : 'start'; } - this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition); // Perform layout. var positionInfo = legendModel.getBoxLayoutParams(); var viewportSize = { @@ -111,6 +110,7 @@ var LegendView = /** @class */function (_super) { }; var padding = legendModel.get('padding'); var maxSize = layoutUtil.getLayoutRect(positionInfo, viewportSize, padding); + this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition, maxSize); var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition); // Place mainGroup, based on the calculated `mainRect`. var layoutRect = layoutUtil.getLayoutRect(zrUtil.defaults({ @@ -255,7 +255,7 @@ var LegendView = /** @class */function (_super) { enableHoverEmphasis(labelText); }); }; - LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) { + LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api, maxSize) { var drawType = seriesModel.visualDrawType; var itemWidth = legendModel.get('itemWidth'); var itemHeight = legendModel.get('itemHeight'); @@ -308,7 +308,8 @@ var LegendView = /** @class */function (_super) { y: itemHeight / 2, fill: textColor, align: textAlign, - verticalAlign: 'middle' + verticalAlign: 'middle', + width: maxSize.width - textX, }, { inheritColor: textColor }) ``` And then there's also `hitRect`, which needs to be dealt with, I've just patched it away for testing purposes. And the same is probably true for the scrollable legend view. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
