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%;
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)