vue tab切换,解决echartst图表宽度只有100px的问题


Posted in Javascript onJuly 19, 2020

解决思路:直接将图表的宽高写死,根据实际代码进行改写,提供一个思路

1.将图表放进一个div里面

<div class="echarts">
 <div id="myChart" :style="{width: '100%', height: '150px'}"></div>
</div>

2.定义一个方法,并在mounted视图更新的时候执行

<script>
export default {
 mounted() {
 this.setMyChart();
 },
 methods: {
 setMyChart() {
 // jq写法
 // 获取父元素
 var echarts = $('.echarts');
 // 获取父元素宽高
 var echartsWidth = echarts.outerWidth(true);
 var echartsHeight = echarts.outerHeight(true);
 // 获取图表元素
 var myChart = $('#myChart');
 // 将父元素宽高赋值给图表
 myChart.css('width', myChart);
 myChart.css('height', myChart);
 
 // 原生js写法
 // 获取父元素
 // var echarts = document.querySelector('.echarts');
 // 获取父元素宽高
 // var echartsWidth = getStyle(echarts,'width');
 // var echartsHeight = getStyle(echarts,'height');
 // 获取图表元素
 // var myChart = document.querySelector('#myChart');
 // 将父元素宽高赋值给图表
 // myChart.style.width = echartsWidth;
 // myChart.style.height = echartsHeight;

 // 这是一个封装好的方法,兼容IE,第一个参数,element, 第二个属性,css样式
 // function getStyle(obj, attr) { 
 // if (obj.currentStyle) { 
 // return obj.currentStyle[attr]; 
 // } else { 
 // return document.defaultView.getComputedStyle(obj,null)[attr]; 
 // } 
 // }
 }
 }
};
</script>

3.样式

<style scoped>
.echarts {
 width:300px;
 height:150px;
} 
</style>

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

补充知识:vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决

代码:

布局:

<TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton>
 <div class="it_content">
 <div class="picture" id="work" ref="work" v-show="flag===false"></div>
 <div class="picture" id="workTotal" ref="workTotal" v-show="flag===true"></div>
 </div>

处理函数:

handler(flag){
 this.flag=flag;
 if(!this.flag){
 this.$nextTick(() => {
    this.drawwork(); // 明细图
   });
 }else{
 this.$nextTick(() => {
    this.drawworkTotal(); // 总数图
   });
 }
 },

1、解决宽度缩小的问题

本来是用vue指令的v-if,但是发现用v-if出现宽度缩小的问题。后来改用v-show。这是因为v-if指令是将Dom元素去除掉位置空间了,v-show是将Dom元素位置空间保留了,但并没有进行渲染。v-show保留所定义的样式,空间位置也被保留,echarts图表的宽高依旧和之前一样,所以不会缩小。

2、图表内容不正确

利用this.$nextTick(() => {})。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。flag发生变化之后,Dom没有立即更新了,通过 $nextTick 回调函数,执行echarts的绘画。

nextTick的由来:

由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

nextTick的触发时机:

在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。

结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

应用场景:

需要在视图更新之后,基于新的视图进行操作。

以上这篇vue tab切换,解决echartst图表宽度只有100px的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 通用简单的table选项卡实现
May 07 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
浅谈react路由传参的几种方式
Mar 23 Javascript
AJAX学习笔记
May 18 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 #Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 #Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 #Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 #Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 #Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 #Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 #Javascript
You might like
PHP一些有意思的小区别
2006/12/06 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
javascript some()函数用法详解
2014/11/13 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python能做什么 python的含义
2019/10/12 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
情况说明书格式范文
2014/05/06 职场文书
小学科学教学计划
2015/01/21 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
开学典礼观后感
2015/06/15 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
redis cluster支持pipeline的实现思路
2021/06/23 Redis