vue实现tab切换时，echarts宽度自适应

最新推荐文章于 2024-06-12 10:42:31 发布

安康全是山

最新推荐文章于 2024-06-12 10:42:31 发布

阅读量715

点赞数

CC 4.0 BY-SA版权

分类专栏： vue教程

本文链接：https://blog.csdn.net/k912120/article/details/113186033

本文介绍如何在Vue项目中，当使用Tab切换时，确保ECharts图表宽度能够根据容器自动调整，实现完美适配。通过结合Vue的生命周期钩子和ECharts的resize方法，确保在每次Tab切换后，ECharts图表能正确响应容器尺寸变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="FillFluidReal-subject">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
				<i v-show="switchBtnTab == 0" class="iconfont iconshijian1"></i>
				<i v-show="switchBtnTab == 1" class="iconfont iconzhexiantongji"></i>
				<i v-show="switchBtnTab == 2" class="iconfont iconicon_function_BOMjiegou"></i>
				<i v-show="switchBtnTab == 3" class="iconfont iconxitong1"></i>
				<span class="cardTitle">
				  {
  
  {title}}
				</span>
               <div type="text" class="card-namber">
                 <button :class="{buttonActive: switchBtnTab ===0}" @click="switchCurve(0, 'chart1')">
                   <i class="iconfont iconshijian1"></i>
                   压力 
                 </button>
                 <button :class="{buttonActive: switchBtnTab ===1}" @click="switchCurve(1