在使用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. linux用户管理章节笔记

    1 更改有效用户组 :newgrp zeng 把当前用户的有效用户组更改为zeng.事后可以使用groups命令查看. 2 在使用useradd命令增加用户时,在/etc/passwd的值一般会参考 ...

  2. 一文解读CQRS (转)

    先从CQRS说起,CQRS的全称是Command Query Responsibility Segregation,翻译成中文叫作命令查询职责分离.从字面上就能看出,这个模式要求开发者按照方法的职责是 ...

  3. 当时学习《鸟哥的Linux私房菜-基础学习篇》记录的点

    1.当执行一个指令的时候,举例来说[ls],系统会依照PATH的设定去每个PATH定义的目录下搜寻文件名为ls的可执行文件,如果在PATH定义的目录中含有多个文件名为ls的可执行文件,那么先搜寻到的同 ...

  4. 8.python3实用编程技巧进阶(三)

    3.1.如何实现可迭代对象和迭代器对象 #3.1 如何实现可迭代对象和迭代器对象 import requests from collections.abc import Iterable,Iterat ...

  5. 5-4 可视化库Seaborn-回归分析

    In [2]: %matplotlib inline import numpy as np import pandas as pd from scipy import stats,integrate ...

  6. Go命令行库Cobra的核心文件root.go

    因为docker及Kubernetes都在用cobra库,所以记录一下. 自定义的地方,高红标出. root.go /* Copyright © 2019 NAME HERE <EMAIL AD ...

  7. 9. Go语言—流程控制

    一.流程控制语法 if condition_1{ }else if condition_2{ }else if condition_3{ }else{ } 二.switch分支 package mai ...

  8. window.location.href方式提交json数据

    ${ctx}/vehicleFlow/to_vehflow_detail.do?strJson="+encodeURIComponent(json)

  9. sqlite 的去重

    1) 找到重复的记录,归类到一个新表里面 max(id) 是想要删除的record 2) 删除 delete from gallery where id in ( select theid from ...

  10. unique_ptr的实现原理

    在C++11中有两个智能指针类型来管理动态对象,share_ptr允许多个指针指向同一个对象,unique_ptr则“独占”所指对象. 我们知道指针或引用在离开作用域时是不会进行析构的,但是类在离开作 ...