echarts系列：echarts中的legend名称最上面被遮挡一部分

在 ECharts 中，遇到 legend 的名称在图表中被遮挡。
被遮挡的原因，通常是因为布局问题，可能涉及到 legend 的位置、尺寸或者是与其他组件的重叠。

通过排查问题，发现以下一些解决 legend 名称被遮挡的方案：

1. 调整 Legend 的位置：

   • 你可以通过改变 legend 的 top, bottom, left, right 属性来调整它的位置，以避免重叠。
   • 例如，如果 legend 在顶部被遮挡，你可以将其位置向下调整：

     legend: {
         top: '10%',
         // 或者使用像素单位
         // top: 50,
     }
     

2. 改变 Legend 的布局方向：

   • 使用 orient 属性来改变 legend 的布局方向，从水平变为垂直，或者相反。

     legend: {
         orient: 'vertical',
     }
     

3. 调整 Legend 的宽度和高度：

   • 通过设置 legend 的 width 和 height 来调整其大小，避免与图表其他部分重叠。

     legend: {
         width: 200,
         height: 100,
     }
     

4. 使用 pageButtonItemGap 和 pageButtonGap：

   • 如果 legend 包含很多项，可以使用这些属性来调整页码按钮之间的间隙，以避免拥挤。

     legend: {
         pageButtonItemGap: 10,
         pageButtonGap: 20,
     }
     

5. 使用 itemGap：

   • 调整 legend 项之间的间隔，以防止重叠。

     legend: {
         itemGap: 20,
     }
     

6. 增加图表的总体尺寸：

   • 如果空间不足，增加图表容器的宽度和高度可能是一个简单的解决方案。

7. 使用 confine：

   • 对于 tooltip 或者其他浮动层，使用 confine: true 来确保它们不会超出图表容器的边界。

     tooltip: {
         confine: true,
     }
     

8. 检查其他组件的配置：

   • 确保其他组件（如 title, toolbox, grid 等）的配置不会与 legend 发生冲突。

通过调整上述属性，能够解决大部分 legend 名称被遮挡的问题。如果问题仍然存在，检查图表的所有配置，确保没有其他布局设置导致重叠。在调整设置时，记得在浏览器中实时查看效果，以便做出适当的调整。