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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
JS 进度条效果实现代码整理
May 21 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
vue接口请求加密实例
Aug 11 Javascript
vue mvvm数据响应实现
Nov 11 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
深入php内核之php in array
2015/11/10 PHP
DEFER怎么用?
2006/07/01 Javascript
动态表格Table类的实现
2009/08/26 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
vue实现短信验证码输入框
2020/04/17 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
React服务端渲染原理解析与实践
2021/03/04 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python常用小技巧总结
2015/06/01 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
零基础学python应该从哪里入手
2020/08/11 Python
怎样自定义一个异常类
2016/09/27 面试题
安全保证书范文
2014/04/29 职场文书
卫生系统先进事迹
2014/05/13 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书