echarts容器高度根据数据数量自适应

echarts容器高度根据数据数量自适应

在echarts中,需要设置固定高度,当柱状图数据过多时会出现数据相互挤压,给用户的体验十分糟糕,可以通过给容器设置自适应高度,然后通过getDom()的方法解决此问题。

image

1
2
3
4
5
6
7
8
9
<div id="chart1" style="width: 90%; min-height:400px;"></div>

//省略其他。。
myChart.setOption(option);

//解决高度不能自适应问题,counst.length为柱状图的条数,即数据长度。
var autoHeight = yAxisList.length * 50 + 50;
myChart.getDom().style.height = autoHeight + "px";
myChart.resize();

参考文档:
https://www.echartsjs.com/zh/api.html#echartsInstance.getDom
https://www.520mwx.com/view/24331

-------------已经触及底线 感谢您的阅读-------------

本文标题:echarts容器高度根据数据数量自适应

文章作者:趙小傑~~

发布时间:2019年12月09日 - 17:57:29

最后更新:2020年03月01日 - 19:50:39

原始链接:https://cnsyear.com/posts/358d6462.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%