Bootstrap联合来玩echarts连串(二)——echarts图表自适应难题

便尝试通过jsDOM操作,强行令canvas的宽窄为百分百,however too young too
simple

echart图表本身是提供了2个resize的函数的。

那般之后照旧留存难点:页面初阶的宽度是有点,canvas宽度便是有点,之后不会再变动

到echart官网看了Example,发现官网的实例都有着响应式功能,确实不是单独的上升幅度改变,是历次调整后图表是重复绘制。猜度echart源码里应该有resize本条API,打开调节和测试器,打开echart源码,Ctrl+F,果然找到了。

Bootstrap,调动浏览器宽度发现,canvas画布的增长幅度是随即变化的,不过画布里面包车型客车图形内容却像被挤压在同步的馅饼,模糊扭曲了。

再细致查看官方文书档案:

接下来难题就来了,因UI选择了Bootstrap响应式框架,所以除了图表之外任何都是响应式。当窗口收缩后,就会发生很难堪的出界事件。

—over—

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

如图:
Bootstrap 2

为了直观查看集团服务器各类进度占用的内部存款和储蓄器动态情形,笔者使用echarts进行多少可视化,具体的落到实处进度按下不表。

到那里细心的同室能够发现,echart图表一旦绘制成功,内容就不会再变动。所以对于echart图表,其”响应式”应该是能够随着窗口调整不断被重复绘制,不是大致的调动宽高。

Bootstrap 3

Bootstrap 4

Bootstrap 5

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

针对那么些难点,刚开端的消除思路及方式:把echart容器的小幅设置为百分百;

于是当浏览器爆发resize事件的时候,让其触发echart的resize事件,重绘canvas。(也足以透过其余交事务件触发)

Bootstrap 6

相关文章