对于 Echarts 图表跟随屏幕缩放适配,我们可以通过监听窗口大小变化事件,动态调整图表的大小来实现。下面是一个简单的实现方式:jsCopy
const chart = echarts.init(document.getElementById('chart'));
// 初始化图表选项
const option = {
// ...
};
chart.setOption(option);
// 监听窗口大小变化事件
window.addEventListener('resize', () => {
chart.resize();
});
在上面的代码中,我们首先使用 echarts.init
方法初始化图表,并设置图表的选项。然后,我们在窗口大小变化时调用 chart.resize()
方法,以动态调整图表的大小。
如果需要在图表容器大小发生变化时自动调整图表的大小,我们可以使用 ResizeObserver
API 监听容器大小变化事件,然后调用 chart.resize()
方法。以下是一个简单的实现方式:jsCopy
const chart = echarts.init(document.getElementById('chart'));
// 初始化图表选项
const option = {
// ...
};
chart.setOption(option);
// 监听容器大小变化事件
const resizeObserver = new ResizeObserver(() => {
chart.resize();
});
resizeObserver.observe(document.getElementById('chart'));
在上面的代码中,我们使用 ResizeObserver
API 监听容器大小变化事件,并调用 chart.resize()
方法。注意,ResizeObserver
API 目前仅在现代浏览器中可用,如果需要支持旧版浏览器,可以使用 polyfill 库。
总的来说,通过监听窗口或容器大小变化事件,我们可以动态调整 Echarts 图表的大小,从而实现图表跟随屏幕缩放适配的效果。