• 关于在bootstrap的tab栏中渲染echats图表,切换tab时echats不显示问题


    在开发过程中遇到这样个问题:

      利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示。

    其html代码为:

     1 <div class="col-xs-6" style="padding:10px;">
     2   <ul class="nav nav-tabs" id="myTab1">
     3      <li><a href="##" style="font-weight: 700;color:black;">访客年龄统计</a></li>
     4      <li class="active"><a href="#home11" data-id="0"></a></li>
     5      <li><a href="#home12" data-id="1"></a></li>
     6      <li><a href="#home13" data-id="2"></a></li>
     7   </ul>
     8   <div class="tab-content">
     9      <div class="tab-pane active" id="home11">
    10         <!-- echarts容器 -->
    11        <div class="chart">
    12           <div id="main_11" style="height:400px;"></div>
    13        </div>
    14      </div>
    15      <div class="tab-pane" id="home12">
    16        <div class="chart">
    17           <div id="main_12" style="height:400px;"></div>
    18        </div>
    19      </div>
    20      <div class="tab-pane" id="home13">
    21        <div class="chart">
    22           <div id="main_13" style="height:400px;"></div>
    23        </div>
    24      </div>
    25    </div>
    26 </div> 

    js代码为:

     1 var myChart11 = echarts.init(document.getElementById('main_11'));
     2 var myChart12 = echarts.init(document.getElementById('main_12'));
     3 var myChart13 = echarts.init(document.getElementById('main_13'));
     4 // 指定图表的配置项和数据
     5 option = {
     6   title: {
     7     text: '',
     8     left: 'center'
     9   },
    10   tooltip: {
    11     trigger: 'item',
    12     formatter: '{a} <br/>{b} : {c}'
    13   },
    14   legend: {
    15     left: 'left',
    16     data: ['全部', '男', '女']
    17   },
    18   xAxis: {
    19     type: 'category',
    20     name: 'x',
    21     splitLine: { show: false },
    22     data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
    23   },
    24   grid: {
    25     left: '3%',
    26     right: '4%',
    27     bottom: '3%',
    28     containLabel: true
    29   },
    30   yAxis: {
    31     type: 'log',
    32     name: 'y'
    33   },
    34   series: [
    35     {
    36       name: '全部',
    37       type: 'line',
    38       data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
    39     },
    40     {
    41       name: '男',
    42       type: 'line',
    43       data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
    44     },
    45     {
    46       name: '女',
    47       type: 'line',
    48       data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
    49     }
    50   ]
    51 };
    52 // 使用刚指定的配置项和数据显示图表。
    53 myChart11.setOption(option);
    54 myChart12.setOption(option);
    55 myChart13.setOption(option);

      此代码的结果为上边图片所展示的效果,经过查找之后发现“月”和“日”所对应的echats图表的宽度为0,根本就没有画在所对应的盒子中,也就是说根本就没有渲染。

      后来经过查资料发现了一个方法可以解决这个问题,那便是给tab栏中的导航栏注册“shown.bs.tab”事件,在事件里边让每个echats渲染一遍。

     1  var arr=[];
     2  var myChart11 = echarts.init(document.getElementById('main_11'));
     3  var myChart12 = echarts.init(document.getElementById('main_12'));
     4  var myChart13 = echarts.init(document.getElementById('main_13'));
     5  // 指定图表的配置项和数据
     6  option = {
     7    title: {
     8      text: '',
     9      left: 'center'
    10     },
    11    tooltip: {
    12      trigger: 'item',
    13      formatter: '{a} <br/>{b} : {c}'
    14    },
    15    legend: {
    16      left: 'left',
    17      data: ['全部', '男', '女']
    18    },
    19    xAxis: {
    20      type: 'category',
    21      name: 'x',
    22      splitLine: { show: false },
    23      data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9']
    24    },
    25    grid: {
    26      left: '3%',
    27      right: '4%',
    28      bottom: '3%',
    29      containLabel: true
    30    },
    31    yAxis: {
    32      type: 'log',
    33      name: 'y'
    34    },
    35    series: [
    36      {
    37        name: '全部',
    38        type: 'line',
    39        data: [15, 53, 29, 27, 36, 86, 71, 168, 66]
    40      },
    41      {
    42        name: '男',
    43        type: 'line',
    44        data: [12, 22, 16, 8, 16, 32, 6, 68, 26]
    45      },
    46      {
    47        name: '女',
    48        type: 'line',
    49        data: [3, 32, 14, 16, 18, 52, 17, 32, 12]
    50      }
    51    ]
    52  };
    53  // 使用刚指定的配置项和数据显示图表。
    54  myChart11.setOption(option);
    55  arr.push(myChart11);
    56  myChart12.setOption(option);
    57  arr.push(myChart12);
    58  myChart13.setOption(option);
    59  arr.push(myChart13);
    60  // 给tab导航按钮注册事件,让其渲染
    61  $('#myTab1 li a').on('shown.bs.tab', function (e) {
    62    for (var i = 0; i < arr.length; i++) {
    63      arr[i].resize();
    64    }
    65  });
    66  // 当浏览器窗口大小出现变化时,重新渲染
    67  $(window).resize(function () {
    68     for (var i = 0; i < arr.length; i++) {
    69       arr[i].resize();
    70    }
    71  });

      仅仅只是添加了一个数组,将要渲染的盒子方法添加到数组里边,当事件被触发的时候,通过遍历这个数组,将这些方法再调用一次,这样就可以解决以上问题。

  • 相关阅读:
    windows下忘记mysql超级管理员rootpassword的解决的方法
    LeetCode226 InvertBinaryTree Java题解
    PHP利用GD库绘图和生成验证码图片
    自己动手开发IOC容器
    智能提示(一) Solr (suggest)
    Linux系统字符集乱码问题
    Linux
    [Material Design] 教你做一个Material风格、动画的button(MaterialButton)
    codeforces#FF(div2) D DZY Loves Modification
    鼠标滚轮实现图片的缩放-------Day79
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/7992315.html
走看看 - 开发者的网上家园