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()
    })
  }
}
相关推荐
前端小魔女5 分钟前
Rust赋能前端: 纯血前端将 Table 导出 Excel
前端
mubeibeinv10 分钟前
分页/列表分页
java·前端·javascript
林太白15 分钟前
js属性-IntersectionObserver
前端·javascript
爱吃羊的老虎23 分钟前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
妙哉73640 分钟前
零基础学安全--HTML
前端·安全·html
咔叽布吉1 小时前
【前端学习笔记】AJAX、axios、fetch、跨域
前端·笔记·学习
GISer_Jing1 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii1 小时前
工作中可以用到的前端小知识(不定时更新)
javascript
Dragon Wu1 小时前
TailwindCss 总结
前端·css·前端框架
bpmf_fff1 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript