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

最新推荐文章于 2024-04-03 06:17:57 发布

原创最新推荐文章于 2024-04-03 06:17:57 发布 · 7.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts

前端专栏收录该内容

2 篇文章

订阅专栏

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

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

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

加了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();