在使用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. C语言中函数返回字符串的4中方法

    C语言中函数返回字符串的4中方法 函数的构成部分:返回类型.函数名称.参数.函数主体 参数:函数调用时传入的参数称为实参,函数定义时出现的参数为形参 形参的作用在于接收实参传入的值,形参和函数内部的其 ...

  2. 提升ML.NET模型的准确性

    ML.NET是一个面向.NET开发人员的开源.跨平台的机器学习框架. 使用ML.NET,您可以轻松地为诸如情绪分析.价格预测.销售分析.推荐.图像分类等场景构建自定义机器学习模型. ML.NET从0. ...

  3. java的加载与运行

    jdk中有一个javac.exe(java编译器) *Java程序的运行包括两非常重要的阶段 -编译阶段 -运行阶段 *编译阶段 -主要任务是检查Java源程序是否符合Java语法 符合Java语法则 ...

  4. linux shell脚本命令

    sort命令 sort #按照字典序排序 sort -n #以数值来排序,避免10比2小的情况 sort -k #如果文件有多列,指定排序的列 sort -r #逆序排列 uniq 命令 sort t ...

  5. Javascript定时器只能执行一次

    为了说明问题,代码很短 <script> var test = function(){ console.log('a') } timer1 = setInterval(test(), 10 ...

  6. vs code 中配置git go

    { "window.zoomLevel": 1, "editor.fontSize": 15, //"files.autoSave": &q ...

  7. <String> 179 ,6, 168

    179. Largest Number 冒泡排序,每一轮都把最小的数字选出放在最后. class Solution { public String largestNumber(int[] nums) ...

  8. 正睿暑期培训day3考试

    链接 A 可以发现一个小棍的贡献是使得左右两列上的球位置互换.所以只要找出哪两个球会经过当前位置,然后swap一下就行了.. 考场上调了2.5h,依然没过样例.赛后发现忘了排序!!!!... /* * ...

  9. C语言第2

    今个那老哥替我刷题,然后遇到一个打印中文编码得问题,我多嘴一问,为啥 用 unsiged 然后他让我换成char试试:然后出现了以下结果 #include <stdio.h> #inclu ...

  10. xLua 学习

    xLua https://github.com/Tencent/xLua 文档 https://tencent.github.io/xLua/public/v1/guide/index.html FA ...