关于 Echarts 关闭全部 legend 后，y轴的Name被遮挡的问题

背景

由于Echarts的grid有一个属性containLabel，设置为true以后，grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。但是，y轴的name不被计算在里面，这就导致了，当把所有的 legend 关闭以后，y轴没有标签，然后name可能被遮挡的问题。

效果对比

解决办法

监听所有的 legend 被关闭时，进行计算，强行设置 grid 的 left 为 name.length。

实际代码

    <EChartsReact
      ref={(e) => {
        // 拖拽图表的核心
        if (e) {
          const myChart = e?.getEchartsInstance?.();

          // 避免y轴坍塌
          function updateChartLayout(chart) {
            const option = chart.getOption();
            const yAxisName = option.yAxis[0].name || '';
            const nameLength = yAxisName.length;
            const nameMargin = nameLength * 8;

            chart.setOption({
              grid: {
                left: Math.max(nameMargin - 16, 16) + 'px',
              },
            });
          }

          // 在 legend 选择变化时调用
          myChart.on('legendselectchanged', (params: any) => {
            setTimeout(() => {
              if (Object.values(params?.selected || {}).every((item) => item === false)) {
                updateChartLayout(myChart);
              } else {
                myChart.setOption(finalOption);
              }
            }, 50);
          });

          if (typeof ref === 'function') {
            return ref(e);
          }
        }
      }}
      theme={globalThemeColor + '-' + globalThemeMode}
      {...props}
      option={finalOption}
    />