Vue解决echart在element的tab切换时显示不正确问题


Posted in Javascript onAugust 03, 2020

最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确

原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小。所以要做的就是在页面加载时,就对图表进行初始化。

网上的解决方案大多都是监听tab的切换事件,然后再根据切换的页面重新渲染echart组件,比较麻烦。

如下是个人的解决方法:

原理:利用v-if属性,当切换至对应的tab时,设置其v-if的值为true即可,同时设置默认显示的tab

举例如下:

<el-tabs type="card" v-model="tabItem">
 <el-tab-pane name="heart">
  <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
  <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane name="breath">
  <span slot="label"><icon name="breath" scale="2"></icon>呼吸</span>
  <baseline ref="breath" :chartData="{}" v-if="'breath' === tabItem"></baseline>
 </el-tab-pane>
 <el-tab-pane label="体动" name="move">
  <span slot="label"><icon name="move" scale="2"></icon>体动</span>
  <baseline ref="move" :chartData="{}" v-if="'move' === tabItem"></baseline>
 </el-tab-pane>
</el-tabs>

这里默认tab为心率tab,当切换时,同一时刻只有一个v-if为true,当将其设置为true时,Vue会重新在页面渲染组件,即完成了组件渲染的步骤。

补充知识:有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)

在项目中,遇到了一个奇怪问题:

element中的el-tabs组件,在el-tab-pane引入echarts图标时,刷新时没有图标出现,如果将浏览器窗口缩小一点,就可以展示.

解决方案:

在echarts中加入v-if来解决 (另外,有时我们在项目中用v-show也会出现上述类似情况,将v-show改成v-if试试就可以解决)

<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定时任务补偿" name="fourth">
    <div class="echartsBox" 
      v-loading="loadingDetail"
      element-loading-spinner="el-icon-loading"
      >
      <echart-line 
      v-if="'fourth' === activeName"  //在这里加上这句话就可以解决上面的问题
      class="CurePicture"
      :category="chartData.category"
      :data="chartData.data"
      :unit="chartData.unit"
      ></echart-line>
     </div>
  </el-tab-pane>
 </el-tabs>
</template>
<script>
import echartLine from "@/components/echarts/line"
 export default {
  components: {
  echartLine
  }, 
  data() {
   return {
    activeName: 'second'
   };
  },
  methods: {
   handleClick(tab, event) {
    console.log(tab, event);
   }
  }
 };
</script>

拿走,不用谢!!!

以上这篇Vue解决echart在element的tab切换时显示不正确问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
原生js+canvas实现贪吃蛇效果
Aug 02 #Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
You might like
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
JS修改css样式style浅谈
2013/05/06 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python开发之list操作实例分析
2016/02/22 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python生成大写32位uuid代码
2020/03/03 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
自动一体化专业求职信
2014/03/15 职场文书
股权收购意向书
2014/04/01 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android
mysql序号rownum行号实现方式
2022/12/24 MySQL