如何避免Apache ECharts中图表标题与图例重叠？

要实现标题与图例垂直堆叠且不重叠，核心是通过配置项分别控制标题、图例和图表区域的位置，以下是几种可靠的实现方式：

1. 精准控制各组件的垂直位置（最常用） #

通过设置title、legend和grid的top属性，让三者在垂直方向上依次排布：

• 给标题设置合适的顶部偏移，避免紧贴页面顶部
• 让图例的顶部偏移略大于标题的高度，刚好落在标题下方
• 调整图表网格的顶部偏移，避开标题和图例区域

示例代码：

option = {
  title: {
    text: '月度销售数据统计',
    top: 10, // 标题顶部距离容器顶部10px
    left: 'center'
  },
  legend: {
    data: ['线上渠道', '线下门店', '合作伙伴'],
    top: 50, // 图例顶部距离容器顶部50px，刚好在标题下方
    left: 'center',
    orient: 'horizontal' // 水平排列，保持与标题居中对齐
  },
  grid: {
    top: 80, // 图表区域顶部距离容器顶部80px，避开标题和图例
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    { name: '线上渠道', type: 'bar', data: [120, 200, 150, 180, 220] },
    { name: '线下门店', type: 'bar', data: [80, 150, 100, 130, 160] },
    { name: '合作伙伴', type: 'bar', data: [50, 90, 70, 100, 120] }
  ]
};

2. 使用百分比适配响应式场景 #

如果图表需要适配不同尺寸的容器，建议用百分比替代固定像素值，确保布局在各种屏幕下都保持垂直堆叠：

option = {
  title: {
    text: '年度用户增长趋势',
    top: '3%',
    left: 'center'
  },
  legend: {
    data: ['新用户', '活跃用户', '留存用户'],
    top: '10%',
    left: 'center'
  },
  grid: {
    top: '18%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  // 其他配置...
};

3. 调整图例的布局间距（辅助优化） #

如果图例项较多导致横向溢出，可通过legend.itemGap调整项间距，或设置legend.width限制宽度，避免图例换行后与标题重叠：

legend: {
  data: ['系列1', '系列2', '系列3', '系列4', '系列5'],
  top: 50,
  left: 'center',
  itemGap: 20, // 增大图例项之间的间距
  width: '80%' // 限制图例最大宽度，超出自动换行
}

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