温馨提示×

echarts图表自适应屏幕大小

小云
346
2023-09-19 06:58:38
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要使Echarts图表自适应屏幕大小,可以遵循以下步骤:

1. 监听窗口大小改变事件:

window.addEventListener('resize'function({

  // 在这里重新渲染图表

});

2. 获取图表实例:

var chart = echarts.init(document.getElementById('chart-container'));

其中,'chart-container'是包含图表的容器元素的ID。

3. 重新渲染图表:

在窗口大小改变事件的处理程序中,使用chart.resize()方法重新渲染图表。这将根据新的容器大小自动调整图表的尺寸。

window.addEventListener('resize'function({

  chart.resize();

});

完整的示例代码如下:

var chart = echarts.init(document.getElementById('chart-container'));

// 渲染图表

window.addEventListener('resize'function() {

  chart.resize();

});

确保在图表初始化后立即执行一次chart.resize(),以便在加载时自适应初始屏幕大小。

这样,当用户调整浏览器窗口大小时,Echarts图表会自动重新渲染并适应新的屏幕大小。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:echarts自适应大小怎么实现

0