最近写项目中用到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%;
     }


Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐