echarts莫名缩小，并且宽度不能更改，生成时默认宽度

最新推荐文章于 2025-06-11 10:38:38 发布

住街对面的查理

最新推荐文章于 2025-06-11 10:38:38 发布

阅读量7.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 echarts

本文链接：https://blog.youkuaiyun.com/macrun28/article/details/78386588

前端专栏收录该内容

2 篇文章

订阅专栏

本文描述了一种在使用 ECharts 时遇到的问题及其解决方案。问题表现为图表无法正确显示，原因是 ECharts 初始化时机不当，发生在 DOM 节点被隐藏之后。通过调整初始化顺序并在 DOM 显示后再进行初始化，成功解决了这一问题。

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

遇到问题的时候，百度了一些，没找到解决方法，知乎上有同样的问题，但是解决方法不适用，最后在前端老哥的帮助下解决了问题。

先贴一些问题图：
正常情况
这里写图片描述

加了div隐藏后
这里写图片描述

我出现这个问题的原因是，echarts初始化的顺序在div隐藏之后，所以当echarts初始化时找不到div，只能将echarts设置为默认值

    //echarts初始化
    window.myLine = echarts.init(document.getElementById('line-chartOne'));
    window.myLine2 = echarts.init(document.getElementById('line-chart-sku'));
    window.myLine3 = echarts.init(document.getElementById('line-chart-shelves'));
    window.myLine4 = echarts.init(document.getElementById('line-chart-compare'));


    $('#part2').hide();
    $('#partright').hide();
    $('#partleft').show();