一、问题
- Vue3+Echarts项目：浏览器缩小后，图表内容发生重叠。
- 本文将提供几个解决上述问题的思路，后续有新的解决思路将在此处进行补充。
二、解决思路
1、动态调整ECharts配置
-
如果图表容器的尺寸没有随着浏览器窗口的缩小而进行相应地调整，就会导致图表内容无法适应新的屏幕尺寸，从而发生图表内容的重叠。
-
可以使用window的resize事件来监听浏览器窗口的变化，并重新初始化ECharts实例。
-
代码结构：
- 核心代码：
window.addEventListener("resize", () => {myChart.resize();
});
2、优化ECharts配置项
可以通过调整ECharts的配置项，来适应不同尺寸的容器。
（1）调整横轴刻度间隔(interval)
通过设置 axisLabel.interval，可以控制刻度标签的显示间隔
xAxis: { type: 'category', data: [...], axisLabel: { interval: 0, // 0 表示自动计算间隔，也可以设置为具体的数字 }
}
（2）倾斜横轴标签(rotate)
如果标签内容较长或是标签不太长，但数量很多，可以考虑倾斜标签来节省空间
xAxis: { type: 'category', data: [...], axisLabel: { rotate: 45 // 倾斜角度 }
}
（3）增加图表容器的宽度或高度
如果允许，可以增加图表的尺寸从而提供更多的空间来容纳图表内容。
（4）调整字体大小和边距
通过减小刻度标签的字体大小或增加标签之间的边距，在一定程度上也可以缓解重叠问题。
xAxis: {name: "x轴名称", //x轴名称type: "category",boundaryGap: false,data: Date.value,// 对横轴刻度标签进行处理axisLabel: {//interval: 0,// rotate: 45,margin: 10,fontSize: "12",},
},
3、使用ECharts的grid属性
通过调整grid属性，可以控制图表内容在容器中的位置和大小，从而适应不同尺寸的容器。
grid: { left: '3%', // 图表内容距离容器左侧的距离 right: '4%', // 图表内容距离容器右侧的距离 bottom: '3%', // 图表内容距离容器底部的距离 containLabel: true, // 是否包含刻度标签在内
},
