cssjshtml boostrap+echart 轮播报错解决

葫芦的运维日志

下一篇 搜索 上一篇

2019/01/19 12:26


boostrap 轮播组件中的active样式有display属性问题,当没有active样式时 display为none。


故该层的长宽没有被初始化,而echart在页面加载完时就开始创建图表,此时轮播的第一屏被激活(active),故正常显示,第二屏没有active,div的长宽没有被初始化,故显示不了。

 

解决办法:

1.先通过 ajax 将echart所需的数据获取给一个数组变量。

 var weekdata = [];
  $.ajax({
    url: "/test",
    type: 'GET',
    dataType: 'json',
    success: function (res) {
      //获取数据成功
      if (res.result) {
        weekdata = res.data;
      }
    }
  });


2.根据轮播组件中的data-slide-to属性 判断当前是哪个组件被激活,此时通过setInterval 配合click初始化echarts。

 

$('.carousel').carousel({interval:7000});
$(function(){
setInterval(banner,500);
});
function banner(){
      $('#right').click();
      if ($('.active').attr('data-slide-to') == '0') {
        createChart1();
      } else if ($('.active').attr('data-slide-to') == '1') {
        createChart2();
      } else {
        createChart3();
      }
};

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇
© 冰糖葫芦甜(bthlt.com) 2019 王梓 打赏联系方式 陕ICP备17005322号