关于echarts加载显示不全的问题

最新推荐文章于 2024-08-07 16:25:32 发布

ZhomyHui

最新推荐文章于 2024-08-07 16:25:32 发布

阅读量4.2k

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/ZhomyHui/article/details/120151589

版权

在使用Echarts时遇到多个表格显示问题，包括el-tab切换下第一个完整第二个显示不全以及坐标线tooltip显示异常。解决方案是通过getInstanceByDom结合resize()事件处理，以及将v-show替换为v-if以实现DOM的重新渲染，并在tab切换后使用$nextTick()加载图表。

摘要由CSDN通过智能技术生成

1、多个相同或不同的echarts表格同时渲染，只显示第一个或者其他的显示不全的问题：

（1）el-tab切换第一个完整第二个不完整。
在这里插入图片描述

解决方案：

<el-tabs v-model="activeName" @tab-click="handleClick">

<div id="myChart_rll" ref="charts1" :style="{width: '100%', height:'700px'}"></div>

handleClick(tab) {
      this.$nextTick(() => {
        this.$echarts.getInstanceByDom(this.$refs.charts1).resize()
        this.$echarts.getInstanceByDom(this.$refs.charts2).resize()
        this.$echarts.getInstanceByDom(this.$refs.charts3).resize()
      })
  },

this.$echarts.getInstanceByDom事件处理，结合resize()事件

（2）两个tab来回切换的时候Echarts的坐标线tooltip有时候显示，有时候不显示；两个tab切换的时候