Linux 拨号vps windows公众号手机端

echarts自适应大小怎么实现

lewis 7年前 (2018-04-12) 阅读数 9 #程序编程
文章标签 Echarts

要实现Echarts图表的自适应大小,可以遵循以下步骤:

1. 在HTML文件中,创建一个容器元素用于放置Echarts图表。

<divid="chart-container"></div>

2. 在JavaScript中,使用Echarts库初始化图表,并设置宽度和高度为容器元素的宽度和高度。

//获取容器元素

varcontainer=document.getElementById('chart-container');

//创建图表实例

varchart=echarts.init(container);

//设置图表的宽度和高度为容器元素的宽度和高度

chart.resize();

3. 使用CSS样式来控制容器元素的宽度和高度。可以通过设置百分比或者响应式的单位来实现自适应。

#chart-container{

width:100%;

height:100%;

}

4. 监听窗口大小变化事件,在窗口大小改变时重新设置图表的宽度和高度。

window.addEventListener('resize',function(){

chart.resize();

});

通过上述步骤,Echarts图表将会根据容器元素的大小进行自适应调整,并且在窗口大小改变时也能够自动重新调整大小。

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门