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 相关文章推荐
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 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
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
php 抽象类的简单应用
2011/09/06 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
详解Python with/as使用说明
2018/12/13 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python对一个数向上取整的实例方法
2020/06/18 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
财务管理专业求职信
2014/06/11 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
常住证明范本
2015/06/23 职场文书