ddkwork commented on issue #20237: URL: https://github.com/apache/echarts/issues/20237#issuecomment-3038898657
> 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 issue 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; > > [echarts/src/component/legend/LegendView.ts](https://github.com/apache/echarts/blob/ef926fa61d41588a663717c4fd1c0412c57474db/src/component/legend/LegendView.ts#L465-L474) > > Lines 465 to 474 in [ef926fa](/apache/echarts/commit/ef926fa61d41588a663717c4fd1c0412c57474db) > > itemGroup.add(new graphic.Text({ > style: createTextStyle(textStyleModel, { > text: content, > x: textX, > y: itemHeight / 2, > fill: textColor, > align: textAlign, > verticalAlign: 'middle' > }, {inheritColor: textColor}) > })); > 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 --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. hello you, are you planning to implement such a widget at a later stage? https://github.com/ddkwork/ux I found the interaction behavior of the right click context menu strange during the implementation of this widget, so I'm looking forward to your implementation of a right click context menu in your way, thanks. -- 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: commits-unsubscr...@echarts.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
