Echarts图表Legend与图表主体重叠问题咨询

你的legend配置里width: '95%'搭配垂直布局，会让图例占满容器绝大部分宽度，直接挤压图表主体空间，导致两者重叠。可以试试以下几种调整方案：

• 调整图例的宽度与位置
  缩小图例宽度，同时固定它的位置，避免占用图表主体的空间：

  legend={ 
      width: '20%',
      type: 'scroll',
      orient: 'vertical',
      right: '10px' // 把图例固定在右侧边缘
  }
  

• 给图表主体预留空间
  通过配置grid组件的参数，让图表主动避开图例区域：

  grid={
      left: '25%' // 左侧留出足够空间给垂直图例
  }
  

• 按需调整图例上下位置
  如果垂直图例的高度也和图表上下部分重叠，可以设置top或bottom参数固定位置：

  legend={ 
      width: '20%',
      type: 'scroll',
      orient: 'vertical',
      right: '10px',
      top: '10px'
  }
  

图例与图表重叠的示例：

内容的提问来源于stack exchange，提问作者Ethan