echarts 动态增加图例被遮挡

在 Echarts 中动态增加图例时，如果图例的数量增加到一定程度，可能会导致图例被遮挡的问题。这是因为 Echarts 默认会将图例放置在容器的下方，当图例数量过多时，就会超出容器的显示范围，从而被遮挡。

解决这个问题的常用方法是将图例放置在容器的右侧，并使用滚动条来控制图例的显示范围。可以使用 Echarts 的 `grid` 和 `legend` 配置项来实现这个功能。具体操作步骤如下：

1. 在 `grid` 配置项中设置 `containLabel` 为 `true`，以保证图表区域能够完整显示图例。示例代码如下：

grid: {
  containLabel: true
},

2. 在 `legend` 配置项中设置 `type` 为 `scroll`，并设置 `orient` 为 `vertical`，将图例放置在容器的右侧，并使用滚动条来控制图例的显示范围。示例代码如下：

legend: {
  type: 'scroll',
  orient: 'vertical',
  right: 10,
  top: 10,
  bottom: 10
},

在上面的代码中，我们将图例的类型设置为 `scroll`，并将图例放置在容器的右侧，距离容器的右侧边界为 `10`，距离容器的上下边界均为 `10`。这样就可以实现动态增加图例时不被遮挡的效果。

需要注意的是，如果图例的高度过高，仍然可能会超出容器的显示范围，此时需要调整容器的高度或者使用滚动条来控制图例的显示范围。