1.原因

echarts官方解释是

Tip: 有时候图表会放在多个标签页里,那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽,可能会绘制失败,因此在切换到该标签页时需要手动调用resize 方法获取正确的高宽并且刷新画布,或者在
opts 中显示指定图表高宽。

而我们的tab本身是隐藏的,所以会导致图表获取不到宽度的情况。从而是100px,如果设200%,会是200px的。。。

2.解决办法:

官方说是resize,可是bootstrap的tab js代码在bootstrap.min.js中,没发修改,也不知道怎么hack。所以如果是自己写的tab是可以做到的,但是既然又用了框架,加上前端比较水,所以将使用下面的方法:
以下应该是bootstrap的事件?


 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // 先获取已激活的标签页的名称
    var activeTab = $(e.target)[0].hash;
    console.log(activeTab);
    // 根据标签页名称来决定显示哪个
    if(activeTab=="#status_info") {//加载指定图表
        show_warning_record_line();
    }
    if(activeTab=="#week-div") loadWeek();
    if(activeTab=="#month-div") loadMonth();  
});
这样做就可以达到,可以先获取到 div的宽高,然后再进行echarts的渲染。
当然并不是原创做法,只是给大家整理一下。

原文地址:

当然官方要是将来发布更完美的版本也是最好的解决方案

bootstrap的tab中,echarts 图表宽度设为100%之后,会出现图表宽带变为100px的情况。只有第一个正常的更多相关文章

  1. echarts在tab切换时容器宽度设置为100%,只展示100px

    在 mychart.setOption(option); 后面加上 mychart.resize(); 即可

  2. element-admin中echarts图标宽度无法修改

    默认示例 <template> <div> <el-row :gutter="0"> <el-col :xs="24" ...

  3. mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

    在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...

  4. Echarts图标宽度变成100px,让图表宽度随着父元素自动适应,Vue实时监听宽度的变化,这可能是史上最好的解决方案!

    最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2 ...

  5. tab切换echarts无法正常显示问题

    项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后 对所有图表进行了初始化和绘制,然后切换查看时,发现图表的宽度不正确.,第一个tab显示是很正常的,但是第二个t ...

  6. Tabhost嵌套以及Tab中多个Activity跳转的实现

    做了一个demo,先看看效果图: 源码 如下: () DoubleTabHost package yy.android.tab; import android.app.TabActivity; imp ...

  7. 关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法

    关于FusionCharts图表宽度width的设置问题导致图表显示异常的解决办法 题设: 经常使用FusionCharts图表的朋友可能会遇到这个问题.就是在FusionCharts显示的时候有时候 ...

  8. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

  9. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

随机推荐

  1. Javascript MVC 学习笔记(二) 控制器和状态

    今天进入第二个部分:控制器. 控制器和状态 从以往的开发经验来看.我们都是将状态保存在server的session或者本地cookie中,但Javascript应用往往被限制在单页面,所以我们也能够将 ...

  2. mysql 中的增改查删(CRUD)

    增改查删可以用CURD来表示  增加:create  修改:update   查找:read      删除:delete 增加create :  insert +表名+values+(信息): in ...

  3. EasyDarwin开源流媒体服务器支持basic基本认证和digest摘要自定义认证

    本文转自EasyDarwin开源团队成员的博客:http://blog.csdn.net/ss00_2012/article/details/52330838 在前面<EasyDarwin拉流支 ...

  4. EasyDarwin开发的短视频拍摄、录制开源项目EasyVideoRecorder

    在前面的博客<EasyDarwin开发出类似于美拍.秒拍的短视频拍摄SDK:EasyVideoRecorder>和<美拍.秒拍中安卓.IOS短视频拍摄的一些关键技术>中我们简单 ...

  5. java设计模式之综述

    一.什么是设计模式 设计模式是一套被反复使用的.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系 ...

  6. BitMapFactory.decodeFile 总是返回NULL的原因之一

    之前碰到过,顺便记录下来,如果出现这种情况,首先看看是否有对这个文件的读权限.

  7. java之冒泡排序

    //冒泡排序(Bubble Sorting)的基本思想是:通过对待排序序列从后向前(从下标较大的元素开始),依次比较相邻元素的排序码,若发现逆序则交换,使排序码较小的元素逐渐从后部移向前部(从下标较大 ...

  8. DuiLib笔记之Window常用属性

    caption 可拖拽以移动窗口的标题区,类型:RECT.例如,要指定标题区高度为35,可设置caption="0,0,0,35" mininfo 窗口最小尺寸,类型:SIZE.例 ...

  9. github for unity

  10. Cisco设备参数总结

    Cisco设备参数总结 1.MAC与TCAM的区别:两张表所其作用的环境不同,MAC表是全局表,一般通过全局CPU进程转发需要查看MAC表,但是,现在基本都是硬件快速转发,那么这个时候就生成了CAM表 ...