在使用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. python中Socket的使用

    说明 前一段时间学习python网络编程,完成简单的通过python实现网络通信的功能.现在,将python中Socket 通信的基本实现过程做一个记录备份. Socket通信 python 中的so ...

  2. Python 字符串用法总结

    一.将某个对象转换为字符串,有str()和repr()两种方法 区别:repr() 转化为供解释器读取的形式str() 转化为适于人阅读的形式 a = 123456 print('repr输出:', ...

  3. MYSQL第二课

    创建数据库: 输入:CREATE DATABASE itcase;计算机输出: Query OK, 1 row affected 查看数据库:输入:SHOW DATABASES;计算机输出: +--- ...

  4. LVM 在线扩容磁盘(ubuntu 14.04 server)

    mware workstation 8 或者 vmware vsphere client 6.0( exsi 6.0) (前提:你的服务器需要有已经存在的卷组,才可以添加新的物理卷到卷组,然后再扩容逻 ...

  5. 组装数据--相同的clusterID合并在一起 左边是a接口 右边是B接口如 [{a接口},{b接口}]

    组装成这种  var BJData = [ [{"city": "无锡市","clusterID": 1, "y": 3 ...

  6. 2019 蓝桥杯国赛 B 组模拟赛 题解

    标签 ok #include<bits/stdc++.h> using namespace std; /* 求阶乘 去除尾部0 每次求阶乘时:结果去除尾0,并对 1e6取余 */ type ...

  7. SpringBoot之异步定时任务

    如果每个Scheduled方法是同步执行的,万一有一个发生死锁,那么其他任务就没法执行,下面介绍异步定时任务 异步定时任务 Spring为任务调度与异步方法执行提供了注解支持,即通过在方法上设置@As ...

  8. Chatbot:

    讲清了一些最最基本的概念 - Intents(意图)和Entities(关键字) - 基于意图(Intent-based)的对话 和 基于流程(Flow-based)的对话  聊天机器人教学:使用Di ...

  9. 【[POI2012]TOU-Tour de Byteotia】

    [[POI2012]TOU-Tour de Byteotia] 洛谷P3535 https://www.luogu.org/problemnew/show/P3535 JDOJ 2193旅游景点(同类 ...

  10. Node.js和JavaScript的区别与联系

    虽然不能说它们一点关系也没有,但它们的确关系不大: 第一,JavaScript是一门编程语言(脚本语言),而Node.js是一个平台,可以简单理解为它是JavaScript的一种执行环境. 第二,Ja ...