对于 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 图表的大小,从而实现图表跟随屏幕缩放适配的效果。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注