首页 前端知识 vue中切换tab时echart不显示或显示不正常

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

2024-08-14 22:08:01 前端知识 前端哥 466 245 我要收藏

项目中在不同的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()
    })
  }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15657.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!