echarts自适应，封装 echarts后获取实例方法

最新推荐文章于 2025-06-19 15:26:48 发布

猿小龙

最新推荐文章于 2025-06-19 15:26:48 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/qq_41988143/article/details/90447847

echarts 专栏收录该内容

1 篇文章

订阅专栏

博客指出Echarts存在自适应的BUG，当选项卡外部盒子设置为%时，其高宽会变成width:100px;height:100px。针对此问题给出解决办法，若选项卡自己编写，可添加延迟定时器；还提到Echarts提供的方法能在外部获取实例，解决了后台管理多图表外部调用难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自适应： echarts有一个很明显的BUG,在选项卡中外部盒子设置的是%；echarts会出现高宽变成width:100px;height:100px;这个很让人闹心，真心很恶心；

解决办法：

1、如果选项卡是自己写的话：（代码更容易懂）

$(document).on('click','.nav li',function(){
	myChart.resize();
    ....
})

一般像echarts都是后台管理会用到而后台都是用UI框架来搭建的选项卡都是用框架里面的代码如下：

$("a[data-toggle='tab']").click(function(){
 var ExchangeEchartsHandle = echarts.getInstanceByDom(document.getElementById("mainLine"));
 setTimeout(function(){
     ExchangeEchartsHandle.resize();
 })
...
})

我添加了一个延迟定时器，我也是测试出来要用到这个倒是具体为什么不是很懂，但是好使，哈哈

封装echart到一个函数内在外部很难获取到这个实例对象，echarts提供了一个方法

var ExchangeEchartsHandle = echarts.getInstanceByDom(document.getElementById("mainLine"));

这个方法是可以在外部获取到实例的；后台管理页面一个页面一般有很多个图表，这个方法就很好的解决了外部调用的难题；