vue中切换tab时echart不显示或显示不正常

项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是 display:none，echart图标容器宽高为0，当浏览器在初始化的时候自然就会导致echart渲染错误，自然就不会正常显示

问题如下

可能出现问题之一：

可能出现问题之二：

解决方法：

1、因为echart图表2是因为没有宽高导致的，所以可以给echart2图表设置一个固定的宽高，但这样做可能会导致项目在不同大小的显示屏上展示的效果不一样，影响用户体验。不推荐使用这种方法

2、使用 $nextTick，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$ nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。

关键代码如下：（完整代码在最后）

复制代码

//图表1渲染函数
function render1() {
  myChart1 = echart.init(document.getElementById("questionChart"))
  myChart1.setOption(option1)

  //获取图表1的宽度
  let echartContainer = document.getElementById("echartContainer")
  tabWidth2.value = echartContainer.clientWidth

  window.addEventListener('resize', () => {
    myChart1.resize()
  })
}

//tab切换处理方法
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.index === 0) {
    nextTick(() => {
      //重新渲染图表1
      myChart1.resize()
    })
  } else {
    nextTick(() => {
      //重新渲染图表2
      myChart2.resize()
    })
  }
}

最终效果：

完整代码：

HTML：

复制代码

 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="提问/回答趋势" name="first">
            <div ref="questionChart" id="questionChart" :style="{ height: '380px' }"></div>
          </el-tab-pane>
          <el-tab-pane label="AI应答率趋势" name="second">
            <div ref="AIChart" id="AIChart" :style="{ width: tabWidth2 + 'px' , height: '380px' }"></div>
          </el-tab-pane>
        </el-tabs>

JS:

复制代码

const tabWidth2 = ref(1200)
onMounted(() => {
  render1()
  render2()
})

//图表1渲染函数
let myChart1
function render1() {
  myChart1 = echart.init(document.getElementById("questionChart"))
  myChart1.setOption(option1)

  //获取图表1宽度
  let echartContainer = document.getElementById("echartContainer")
  tabWidth2.value = echartContainer.clientWidth

  window.addEventListener('resize', () => {
    myChart1.resize()
  })
}

let myChart2
function render2() {
  myChart2 = echart.init(document.getElementById("AIChart"))
  myChart2.setOption(option2)
  window.addEventListener('resize', () => {
    myChart2.resize()
  })
}

//tab切换处理方法
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if (tab.index === 0) {
    nextTick(() => {
      //重新渲染图表1
      myChart1.resize()
    })
  } else {
    nextTick(() => {
      //重新渲染图表2
      myChart2.resize()
    })
  }
}