cssjshtml boostrap+echart 轮播报错解决

葫芦

发布于 2019-04-17 16:07:05

5750

发布于 2019-04-17 16:07:05

文章被收录于专栏：葫芦葫芦

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();
      }
};

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019/01/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax