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 相关文章推荐
js的表单操作 简单计算器
Dec 29 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
关于vue面试题汇总
Mar 20 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
如何将数据从文本导入到mysql
2006/10/09 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
node.js开机自启动脚本文件
2014/12/24 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
express.js中间件说明详解
2019/03/19 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
JS document文档的简单操作完整示例
2020/01/13 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
交通专业个人自荐信格式
2013/09/23 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
音乐教学案例
2014/01/30 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
会计岗位职责范本
2015/04/02 职场文书
小时代观后感
2015/06/10 职场文书
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS
一文搞懂Java中的注解和反射
2022/06/21 Java/Android