Bootstrap标签页插件切换echarts不显示怎么办

这篇文章将为大家详细讲解有关Bootstrap标签页插件切换echarts不显示怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的舒城网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

问题:

1.  在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。

2.  echarts自适应怎么实现?

解决办法:

//解决tab切换不显示问题 在加载窗口后重新渲染。
 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 }); //data-toggle="pill还是data-toggle="tab" 根据前面所用标签页的不同来选择
//echarts自适应
 var charts = [];
 var chart1 = echarts.init(document.getElementById("left1"));
 var chart2 = echarts.init(document.getElementById("left2"));
 var chart3 = echarts.init(document.getElementById("right11"));
 var chart4 = echarts.init(document.getElementById("right12"));
 var chart5 = echarts.init(document.getElementById("right21"));
 var chart6 = echarts.init(document.getElementById("right22"));
 chart1.setOption(option1);
 chart2.setOption(option1);
 chart3.setOption(option2);
 chart4.setOption(option2);
 chart5.setOption(option1);
 chart6.setOption(option1);
 charts.push(chart1);
 charts.push(chart2);
 charts.push(chart3);
 charts.push(chart4);
 charts.push(chart5);
 charts.push(chart6);
 $(window).resize(function() {
 for(var i = 0; i < charts.length; i++) {
 charts[i].resize();
 }
 })

下面看一个实现的demo:

            demo 完成内容:

                                      1. bootstrap实现响应式布局

                                      2. echats实现自适应

                                      3. 标签页切换、缩放正常显示



 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
  
     
 
             1      
  •   2   
  •   
  •   3   
  •   
  •   4   
  •   
  •   5   
  •      
                                                               var charts = [];  var chart1 = echarts.init(document.getElementById("left1"));  var chart2 = echarts.init(document.getElementById("left2"));  var chart3 = echarts.init(document.getElementById("right11"));  var chart4 = echarts.init(document.getElementById("right12"));  var chart5 = echarts.init(document.getElementById("right21"));  var chart6 = echarts.init(document.getElementById("right22"));  chart1.setOption(option1);  chart2.setOption(option1);  chart3.setOption(option2);  chart4.setOption(option2);  chart5.setOption(option1);  chart6.setOption(option1);  charts.push(chart1);  charts.push(chart2);  charts.push(chart3);  charts.push(chart4);  charts.push(chart5);  charts.push(chart6);  $(window).resize(function() {  for(var i = 0; i < charts.length; i++) {  charts[i].resize();  }  });  //解决tab切换不显示问题 在加载窗口后重新渲染。  $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) {  for(var i = 0; i < charts.length; i++) {  charts[i].resize();  }  });
    .css_height{
     height: 400px;
     margin-top: 30px;
    }
    .css_height1{
     height: 400px;
     margin-top: 72px;
    }
    .right_title{
     width: 90%;
     margin-left: 10%;
    }
    .nav>li>a{
     padding: 5px 18px;
     margin-top: 10px;
    }
    body{
     background-color:#009688;
    }
    .container{
     background-color:#dcedf5;
     margin-top: 25px;
     border-radius: 15px;
    }
    option1= {
     title: {
      text: '未来一周气温变化',
      subtext: '纯属虚构'
     },
     tooltip: {
      trigger: 'axis'
     },
     xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一','周二','周三','周四','周五','周六','周日']
     },
     yAxis: {
      type: 'value',
      axisLabel: {
       formatter: '{value} °C'
      }
     },
     series: [  {   name:'最高气温',   type:'line',   data:[11, 11, 15, 13, 12, 13, 10],
       markPoint: {
        data: [
         {type: 'max', name: '最大值'},
         {type: 'min', name: '最小值'}
        ]
       },
       markLine: {
        data: [
         {type: 'average', name: '平均值'}
        ]
       }
      },
      {
       name:'最低气温',
       type:'line',
       data:[1, -2, 2, 5, 3, 2, 0],
       markPoint: {
        data: [
         {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
        ]
       },
       markLine: {
        data: [
         {type: 'average', name: '平均值'},
         [{      symbol: 'none',      x: '90%',      yAxis: 'max'     }, {      symbol: 'circle',      label: {       normal: {        position: 'start',        formatter: '最大值'       }      },      type: 'max',      name: '最高点'     }]
        ]
       }
      }
     ]
    };
    option2 = {
     title: {
      text: '大规模散点图'
     },
     legend: {
      data:['sin','cos']
     },
     xAxis : [  {   type : 'value',   scale:true  } ],
     yAxis : [  {   type : 'value',   scale:true  } ],
     series : [  {   name:'sin',   type:'scatter',   large: true,   symbolSize: 3,   data: (function () {    var d = [];
        var len = 10000;
        var x = 0;
        while (len--) {
         x = (Math.random() * 10).toFixed(3) - 0;
         d.push([
          x,
          //Math.random() * 10
          (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
         ]);
        }
        //console.log(d)
        return d;
       })()
      },
      {
       name:'cos',
       type:'scatter',
       large: true,
       symbolSize: 2,
       data: (function () {
        var d = [];
        var len = 20000;
        var x = 0;
        while (len--) {
         x = (Math.random() * 10).toFixed(3) - 0;
         d.push([
          x,
          //Math.random() * 10
          (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
         ]);
        }
        //console.log(d)
        return d;
       })()
      }
     ]
    };

    关于“Bootstrap标签页插件切换echarts不显示怎么办”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    当前名称:Bootstrap标签页插件切换echarts不显示怎么办
    转载来于:http://scyanting.com/article/gsohhe.html