vue中echarts3.0自适应的方法


Posted in Javascript onFebruary 26, 2018

前端时间做一个vue的项目,echart是按需引入的如下:

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

然后发现在缩放浏览器窗口时折线图并不会自适应,费了好一会才解决,记录下来给需要的小伙伴,

第一种:浏览器自适应

通过:

在myChart.setOption后添加

window.onresize = myChart.resize;

如果有多个图形,可以封装成方法: 

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener('resize', ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));

第二种情况,根据div大小的变化进行自适应

因为vue不能实时监测div大小变化的,所以我定义了一个按键,当按键的值变化的时候,进行resize;

import { mapState }from'vuex'; 
computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量,可以不用vuex,我是因为组件之间的通讯}), 
watch: { 
isCollapse() { // 注意一定不要用箭头函数,会获取不到this 
setTimeout(() => { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize(); 
}, 500);},},

其实我用这个是在导航进行伸缩的时候,导致div大小发生了变化,所以这样执行reszie,就能完美的自适应

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
理解JS事件循环
Jan 07 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 #Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 #Javascript
Angular5中调用第三方js插件的方法
Feb 26 #Javascript
angular2中使用第三方js库的实例
Feb 26 #Javascript
vue 子组件向父组件传值方法
Feb 26 #Javascript
vue2 前端搜索实现示例
Feb 26 #Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
You might like
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
功能强大的php文件上传类
2016/08/29 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
js实现小时钟效果
2020/03/25 Javascript
详解Python中的动态属性和特性
2018/04/07 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
街道社区活动报告
2015/02/05 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书