Bootstrap联手来玩echarts系列(二)——echarts图表自适应问题

为直观查看企业服务器各个进程占用的内存动态情况,我使用echarts进行数量可视化,具体的落实过程按下不表。

最终实现的效果使图:
Bootstrap 1

接下来问题不怕来了,因UI采用了Bootstrap响应式框架,所以除了图表之外任何都是响应式。当窗口缩小后,就会出大尴尬的出界事件。

如图:
Bootstrap 2

对这个问题,刚开之缓解思路及方法:把echart容器的宽窄设置也100%;

<div class="col-sm-12 row" id="logic1_node" style="width:100%;height:700px"></div>

然之后仍然存在问题:页面初始的宽是有点,canvas宽度就是有点,之后休会见再次转

纵然尝试通过jsDOM操作,强行让canvas的升幅为100%,however too young too
simple

调动浏览器宽度发现,canvas画布的宽度是就转移之,然而画布里的图内容倒如被挤压以协同的馅饼,模糊扭曲了。

Bootstrap 3

顶此细心的同桌可以窥见,echart图表一旦绘制成,内容就是不见面再也转变。所以对echart图表,其”响应式”应该是好随着窗口调整不断给再度绘制,不是概括的调宽高。

交echart官网看了Example,发现官网的实例都兼备响应式功能,确实不是独自的增幅改变,是历次调整后图表是再次绘制。猜想echart源码里该有resize此API,打开调试器,打开echart源码,Ctrl+F,果然找到了。

Bootstrap 4

又精心翻看官方文档:

Bootstrap 5

echart图表本身是供了一个resize的函数Bootstrap的。

遂当浏览器发生resize事件之时光,让该触发echart的resize事件,重绘canvas。(也足以经另外事件触发)

Bootstrap 6

—over—

相关文章