当前我遇到的场景是页面侧边导航栏会产生展开和收缩的变化,其变化会挤压拉伸页面区域,如果echarts图表布局在这些区域,会影响到显示效果;并且当页面缩放时,图表也应当进行自适应变化。
这是导航菜单展开的效果

这是导航菜单收缩的效果

这是浏览器侧边栏打开的效果

这是浏览器缩放后的效果


实现代码如下:
我这里涉及到的是宽度的变化,因此需要在图表组件处将width设置为100%,如果高度也要自适应,跟宽度一样的原理
html
<div ref="chart" style="width: 100%;height: 200px; "></div>
还需要将图表在echarts的配置代码中调整好合适的位置
javascript
grid: {
top: "12%",
left: "2%",
right: "2%",
bottom: "3%",
containLabel: true,
},
随后在mounted()函数中添加使用ResizeObserver API(用于监听DOM节点变化的API,实现自适应的关键点)
javascript
mounted() {
this.$nextTick(() => {
this.initChart();
const resizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
const chartInstance = echarts.getInstanceByDom(entry.target);
if (chartInstance) {
chartInstance.resize();
}
}
});
resizeObserver.observe(this.$refs.chart);
});
},