在使用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. 顺F分享,你是在裸奔吗?

    " 对顺F旗下各APP顺藤摸瓜分析--顺F分享." 前文对顺F速运和顺F速运国际版进行了分析,二者使用同一套接口,虽然保护强度不高,但对代码和数据的保护却区别对待,实在让人诧异. ...

  2. [Go] 写文件和判断文件是否存在

    OpenFile得到一个File,然后调用它的Write,参数是字节切片Stat看看返回错误没有 package main import ( "fmt" "os" ...

  3. GitHub密钥生成

    前提电脑上需装有Git软件 这里提供百度云下载地址:https://pan.baidu.com/s/1r0y4XRyQCz7ZJBnZJhAtqw 提取码:88qf  1.登录GitHub账号 2.点 ...

  4. C++学习一 结构与结构体

    结构体属于C++与C区别之一. 代码例子如下(来自<C++程序设计>): #include <iostream> #include <string> using n ...

  5. C#所有经典排序算法汇总

    1.选择排序 选择排序 class SelectionSorter     {         private int min;         public void Sort(int[] arr) ...

  6. 爬虫之爬取豆瓣图书名字及ID

    from urllib import request from bs4 import BeautifulSoup as bs #爬取豆瓣最受关注图书榜 resp = request.urlopen(' ...

  7. 201871010116-祁英红《面向对象程序设计(java)》第6-7周学习总结

    项目 内容 <面向对象程序设计(java)> https://home.cnblogs.com/u/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...

  8. 201871010111-刘佳华《面向对象程序设计(java)》第十五周学习总结

    201871010111-刘佳华<面向对象程序设计(java)>第十五周学习总结 实验十三  Swing图形界面组件(二) 实验时间 2019-12-6 第一部分:理论知识总结 5> ...

  9. C++编程思想 - 对象的创建和使用

    前言 用户定义的数据类型(data type)或类(class),是C++区别于传统过程型语言的地方. 通常将创建好的类库存放在库(library)中. 本篇会使用几个C++类库(class libr ...

  10. split task

    和印度的team合作的时候,他们经常有些要求,然后我们这边有时候需要改代码来满足他们的需求. 最近一次,他们要求在我们的一个工具中为他们加入2个asp.net的注册命令,不知道什么原因,system ...