bootstrap+echarts实现轮播效果 第二屏显示有错

阿桂我在写一个看板时，遇到这样的一个需求，使用echart和bootstrap的轮播效果展现多个图表，一屏放两个，第二屏放两个；...........................

但问题来了，轮播到第二屏显示就不全了，我试着把第一屏的active去掉，并改到第二屏中，而第二屏的2个此时是正常的，第一屏的2个出现了显示不全

并且报出     Can't get dom width or height   异常

-------------------------------------------------------华丽丽的分割线-----------------------------------------------

究其原因是，active样式会中的display属性问题，当没有active样式时 display为none，
故该层的长宽没有被初始化，而echart在页面加载完时就开始创建图表，此时轮播的第一屏被激活（active）,故正常显示，第二屏没有active，div的长宽没有被初始化，故显示不了；
-------------------------------------------------------华丽丽的分割线-----------------------------------------------

解决方案：
思路：当轮播到第二屏时，即第二屏被active才初始化echart的图，故给轮播的导航按钮即（carousel-control）加个按钮监听器，当被点击时，才触发echart渲染

-------------------------------------------------------华丽丽的分割线（代码如下）-----------------------------------------------

$(function(){
    setInterval(function(){
    	$('#right').click();
    	createChart('chart1',option);
    },5000);
})

由于我的需求是自动轮播，所以写了个定时器，当 轮播的导航按钮（right层）被点击后才调用渲染echart（createChart函数）；

createChart（）封装了echart的图层渲染，具体见echart的demo；