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()
    })
  }
}
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie2 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿3 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161774 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript