在使用echarts的时候页面中有tab栏的时候经常遇到echarts错位的情况

解决方法一、在点击tab栏的时候进行页面中的echarts初始化

在多层tab栏存在的时候eachrts的容器布局是百分比的时候进行初始化也会出现错位

因为echarts识别的是px，而百分比的也会转化成px的形式，所以就会出现错位

解决方法二、在初始化之前先获取宽高并进行设置

var width = $('#'+idName).width()

var height = $('#'+idName).height()

$('#'+idName).css("width",width).css("height",height)

初始化之前加入上边的代码后进行切换的时候就不会出现错位的情况

这种解决方法存在的问题就是不能给echarts的容器设置padding值，如果设置了后再通过上边的方法的话就会出现没切换一次tab栏就echarts的容器就减少padding的值，如果设置了padding的话就不能使用width和height来获取和设置了，而是使用innerWidth和innerHeight

切换tab栏echarts错位的问题的更多相关文章

  1. 如何解决tab栏切换只发一次请求的问题

    用的antd的tab栏组件,发现切换tab栏只在componentDidMount里面发了一次请求,后来发现是缓存问题,于是用activeKey再次进行了判断,代码如下:

  2. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

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

    在开发过程中遇到这样个问题: 利用bootstrap中的tab栏,每当点击tab栏的导航时,echats仅仅只渲染第一个tab的内容,切换tab时,echats图表不显示. 其html代码为: < ...

  4. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  5. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  6. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

  7. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  8. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  9. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

随机推荐

  1. xamarin Android 监听音量键（上）

    public override bool OnKeyDown([GeneratedEnum]Android.Views.Keycode keyCode, KeyEvent e) { switch (k ...

  2. 本地Yum源配置

    一.网络源 yum list 软件名称 查找源里的软件,可以使用通配符 二.配置源 源配置文件路径 /etc/yum.repos.d/ 配置项 [名称] 源标识(不能和其他的源重复) name=名称 ...

  3. SparkStreaming wordCountDemo基础案例

    体现sparkStreaming的秒级准实时性,所以我们需要一个能够持续输入数据的东东 1.CentOS上下载nc 创建一个scala工程,导入相关pom依赖 <?xml version=&qu ...

  4. Oracle 导入dmp 故障存储文件

    创建表空间及用户CREATE TABLESPACE OracleDBFDATAFILE 'D:\app\zhoulx\oradata\bdc\OracleDBF.DBF' SIZE 100M AUTO ...

  5. 在宿主机上执行docker容器内部的shell或程序

    为了避免反复进入docker容器内部操作,可以将一系列容器内部的指令由宿主机来操作完成. 在宿主机(作者主机为windows7)上执行centos容器(name为centos-1)中/usr目录下的“ ...

  6. vue 表格组件 有事件交互（二）

    04==>v-if下面可以嵌套 同级的 v-if 和v-node如下若是第一个v-if没有下面的就不可能显示出来的. <span v-if="!single" @cli ...

  7. Pycharm 2019 添加 docker 解释器

    打开docker的tls

  8. HashMap底层实现及原理

    注意:文章的内容基于JDK1.7进行分析.1.8做的改动文章末尾进行讲解.       一.先来熟悉一下我们常用的HashMap: 1.HashSet和HashMap概述 对于HashSst及其子类而 ...

  9. 【BZOJ2437】[Noi2011]兔兔与蛋蛋（博弈+二分图）

    传送门 题意: 给出一个\(n*m\)的棋盘,上面有若干个黑色棋子,若干个白色棋子,还有一个空格. 每次先手选择一个空格,将它与相邻的某个白色棋子交换:后手则选择一个空格,与相邻的某个黑色棋子交换. ...

  10. 详解C++ STL priority_queue 容器

    详解C++ STL priority_queue 容器 本篇随笔简单介绍一下\(C++STL\)中\(priority_queue\)容器的使用方法和常见的使用技巧. priority_queue容器 ...