<div  id="chartContainer" style="height:100%;width:100%;"></div>

chartContainer用来存放Echart图,设置宽高100%时出现Echart图没有铺满div

需要强行设置宽高px

<div id="chartContainer" style="height:450px;width:1030px;"></div>

echarts的源码中计算宽度时:

Painter.prototype._getWidth = function() {
var root = this.root;
var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
};

原因在于echarts绘制图表计算宽度的时候,由于第二个tab的属性display: none;所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将width: 100%;转为100,所以计算出的图表宽度为100px

echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起的更多相关文章

  1. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  2. div设置滚动条内容任然显示不全

    <div style="overflow:scroll;height:100%"></div> 注意:高度需设置为100%,不然内容显示不全

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

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

  4. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  5. 问题2:input、textarea、submit 宽度设置为100%,但显示宽度不一致

    <style type="text/css"> body{ padding: 10px; } input,textarea{ width: 100%; } </s ...

  6. echarts 视图自适应问题

    最近在项目中用到了echarts,在处理视图自适应问题上记录一下:同时比较一下和highcharts的区别: 在echarts中有一个resize的函数,可以直接在监听窗口变化时重新渲染即可: //在 ...

  7. vue中 eCharts 自适应容器

    在 vue 脚手架开发中,echarts图表自适应容器的方法: 父组件: <template> <div class="statistics_wrap"> ...

  8. eCharts 多个图表自适应窗口大小

    单个图表自适应页面窗口只需要在创建图表节点后面添加一句代码就可以了: window.onresize = myChart.resize; 多图表要自适应页面,创建图表节点后面添加事件,并在事件函数里面 ...

  9. div宽度设置无效问题解决

    问题描述: 要设置两个div在同一行显示,都加入了display:inline样式,但是其中一个div的宽度设置无效,在浏览器显示它的宽度始终是1003px. 解决办法: 方法1/给div加入样式:f ...

随机推荐

  1. 看过这些我明白了依赖注入及IoC

    背景 最近一段时间在学习laravel框架,了解到这个框架一个比较核心的概念就是服务容器,而服务容器似乎又和依赖注入有关系.但是碍于官方关于这方面的讲解篇幅过少,所以自学了一下. 自学的途径也跟大家一 ...

  2. ASE团队项目alpha阶段Frontend组 scrum2 记录

    ASE团队项目alpha阶段Frontend组 scrum2 记录 本次会议于11.5日, 11:30在微软北京西二楼13158研讨室,讨论持续15分钟 与会人员:Jingyi Xie, Jiaqi ...

  3. 【记录】Swagger2 注解说明

    Swagger是一个用来管理项目接口的非常好用的第三方插件, 程序员只需要通过在接口代码上设置Swagger注解, 就可以在Swagger UI上进行查看与验证接口. 很大程度上节省了,接口文档的制作 ...

  4. Apache Hadoop集群离线安装部署(三)——Hbase安装

    Apache Hadoop集群离线安装部署(一)——Hadoop(HDFS.YARN.MR)安装:http://www.cnblogs.com/pojishou/p/6366542.html Apac ...

  5. Spring mvc的执行流程

    一个请求匹配前端控制器 DispatcherServlet 的请求映射路径(在 web.xml中指定), WEB 容器将该请求转交给 DispatcherServlet 处理 DispatcherSe ...

  6. 深入理解Magento - 第五章 Magento资源配置

    对于任何一个更新频繁的项目来说,保持开发环境和生产环境的数据库同步是件很头疼的事情.Magento提供了一套系统,用版本化的资源迁移脚本来解决这个问题. 上一章,我们为 Helloworld Blog ...

  7. php开发面试题---Linux常用命令大全

    php开发面试题---Linux常用命令大全 一.总结 一句话总结: ls 查看目录中的文件 cd .. 返回上一级目录 cat 查看文件内容 touch 新建文件或修改时间 1.linux 系统信息 ...

  8. yum 快速LAMP/LNMP 安装(centos7+mysql5.7+apache+php5.6 (缺点:好多模块没有加载)

    1.安装Apache 安装centos7默认自带(Apache2.4.6)版本 yum -y install httpd 2.开启apache服务 systemctl start httpd.serv ...

  9. 选择排序-Python & Java

    选择排序:1.找出最小的数值放在第一位2.找出剩余数据中最小的数值放在第二位,以此类推,直到最后一个数值 算法的时间复杂度为:O(n) ''' 选择排序: 1.找出最小的数值放在第一位 2.找出剩余数 ...

  10. maven学习整理-基础知识

    1.maven认识 maven是一种自动化的构建工具,它主要解决的问题有: ①项目中的划分规则:原先我们用package或文件夹的形式来划分不同模块,导致在一个项目中存在大量的文件夹和包代码显得庞大: ...