我們在使用echarts時可能會遇到圖表無法顯示問題酪捡。設(shè)置了寬高痪署,為什么會出現(xiàn)這種問題呢法挨?有這么一種情況,echarts已經(jīng)初始化并進(jìn)行配置幅聘,但echarts容器的上級節(jié)點設(shè)置了display:none隱藏凡纳,當(dāng)操作后設(shè)置為顯示時,會發(fā)現(xiàn)無法看到echarts圖標(biāo)喊暖,因為容器的寬高都為0惫企。因為在頁面渲染時,echarts已經(jīng)進(jìn)行了初始化陵叽,因為設(shè)置了隱藏狞尔,echarts識別的容器節(jié)點都為0。
以下是解決該問題的方法
// instantEcharts為實例化的echarts對象
// 通過getDom方法可以獲取到echarts的節(jié)點巩掺,重新設(shè)置容器的寬高
let chartDom = echartsInstance.getDom();
// 設(shè)置圖標(biāo)需要的寬高
chartDom.style.width = '200px';
chartDom.style.height = '300px';
// 重新獲取圖表尺寸
echartsInstance.resize();
// 如伴隨數(shù)據(jù)或樣式變動偏序,再執(zhí)行setOption方法
echartsInstance.setOption(option)