cssjshtml boostrap+echart 轮播报错解决

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

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

解决办法：

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

代码语言：javascript复制

 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。

代码语言：javascript复制

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

ajax click display echarts setinterval

0 人点赞