Echarts 响应式网格和图例

Question

我正在寻找一种方法来获取echarts（SVGRenderer）图例项的边界框以获取高度。

我想避免图例和网格项重叠。

Answer 1

如果您希望图例不与图表重叠，您可以为图例指定网格之外的位置：

option = {
    grid: {
        top: '6%',
        ...
    },
    legend: {
        bottom: '96%',
        ...
    },
    ...
}

这样，如果图例变得太大，它就会被推出窗口而不是进入图表。我认为这不是更好的选择，但也许它可以满足您的需求。

我调整了网上的一张echartsexamples来展示效果。您可以通过调整浏览器窗口大小来测试行为。

Answer 2

我找到了一个解决方案来获取图例项的位置和尺寸。 Github 中的相关问题

我使用 LitV2 来包装 WebComponent。完成组件的渲染后，我触发一个测量函数，该函数提取必要的信息并更新底部的网格偏移。

    get legendBoundingBox() {
     const legendModel = this.chart.getModel().getComponent('legend');
     const legendView = this.chart.getViewOfComponentModel(legendModel);
     this.legendHeight = legendView.group.getBoundingRect().height;
     //this.options.grid.bottom = this.legendHeight; // Update chart options
    }