我们在使用echarts时可能会遇到图表无法显示问题。设置了宽高,为什么会出现这种问题呢?有这么一种情况,echarts已经初始化并进行配置,但echarts容器的上级节点设置了display:none隐藏,当操作后设置为显示时,会发现无法看到echarts图标,因为容器的宽高都为0。因为在页面渲染时,echarts已经进行了初始化,因为设置了隐藏,echarts识别的容器节点都为0。
以下是解决该问题的方法
// instantEcharts为实例化的echarts对象
// 通过getDom方法可以获取到echarts的节点,重新设置容器的宽高
let chartDom = echartsInstance.getDom();
// 设置图标需要的宽高
chartDom.style.width = '200px';
chartDom.style.height = '300px';
// 重新获取图表尺寸
echartsInstance.resize();
// 如伴随数据或样式变动,再执行setOption方法
echartsInstance.setOption(option)