tab栏切换时 echarts渲染问题(详细分析)
最近写项目中用到tab栏切换,第二个tab需要渲染echarts,然后发现echarts无法显示我通过分析发现是因为tab切换后,填充数据那个div高度为0,并且这时候setOption已经执行了解决办法1:给echarts容器固定住宽高,缺点:没办法自适应解决办法2:在tab切换的后重新加载echatrs<Chart ref='refChart'></Chart>hand
·
最近写项目中用到tab栏切换,第二个tab需要渲染echarts,然后发现echarts无法显示
我通过分析发现是因为tab切换后,填充数据那个div高度为0,并且这时候setOption已经执行了
解决办法1:给echarts容器固定住宽高,缺点:没办法自适应
解决办法2:在tab切换的后重新加载echatrs
<Chart ref='refChart'></Chart>
handleClick({ name }) {//点击tab切换
if (name === '2') {
//判断是否为投放数据,从而解决echarts渲染问题
console.log(this.$refs.refChart);
this.$refs.refChart.updateOption() //渲染函数
}
}
updateOption() {
this.$nextTick(() => {
const myChart = echarts.init(this.$refs.echarts);
myChart.setOption(this.option);
})
}
#chart {
height: 100%;
}
更多推荐
已为社区贡献1条内容
所有评论(0)