Vue3+Echarts: 浏览器缩小后，图表内容发生重叠

一、问题

• Vue3+Echarts项目：浏览器缩小后，图表内容发生重叠。
• 本文将提供几个解决上述问题的思路，后续有新的解决思路将在此处进行补充。

二、解决思路

1、动态调整ECharts配置

• 如果图表容器的尺寸没有随着浏览器窗口的缩小而进行相应地调整，就会导致图表内容无法适应新的屏幕尺寸，从而发生图表内容的重叠。

• 可以使用window的resize事件来监听浏览器窗口的变化，并重新初始化ECharts实例。

• 代码结构：

• 核心代码：

window.addEventListener("resize", () => {
  myChart.resize();
});
1
2
3

2、优化ECharts配置项

可以通过调整ECharts的配置项，来适应不同尺寸的容器。

（1）调整横轴刻度间隔(interval)

通过设置 axisLabel.interval，可以控制刻度标签的显示间隔

xAxis: {  
    type: 'category',  
    data: [...],  
    axisLabel: {  
        interval: 0, // 0 表示自动计算间隔，也可以设置为具体的数字  
    }  
}
1
2
3
4
5
6
7

（2）倾斜横轴标签(rotate)

如果标签内容较长或是标签不太长，但数量很多，可以考虑倾斜标签来节省空间

xAxis: {  
    type: 'category',  
    data: [...],  
    axisLabel: {  
        rotate: 45 // 倾斜角度  
    }  
}
1
2
3
4
5
6
7

（3）增加图表容器的宽度或高度

如果允许，可以增加图表的尺寸从而提供更多的空间来容纳图表内容。

（4）调整字体大小和边距

通过减小刻度标签的字体大小或增加标签之间的边距，在一定程度上也可以缓解重叠问题。

xAxis: {
  name: "x轴名称", //x轴名称
  type: "category",
  boundaryGap: false,
  data: Date.value,
  // 对横轴刻度标签进行处理
  axisLabel: {
    //interval: 0,
    // rotate: 45,
    margin: 10,
    fontSize: "12",
  },
},
1
2
3
4
5
6
7
8
9
10
11
12
13

3、使用ECharts的grid属性

通过调整grid属性，可以控制图表内容在容器中的位置和大小，从而适应不同尺寸的容器。

grid: {  
  left: '3%', // 图表内容距离容器左侧的距离  
  right: '4%', // 图表内容距离容器右侧的距离  
  bottom: '3%', // 图表内容距离容器底部的距离  
  containLabel: true, // 是否包含刻度标签在内  
},
1
2
3
4
5
6