当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中echarts3.0自适应的方法

vue中echarts3.0自适应的方法

2018年04月20日  | 移动技术网IT编程  | 我要评论

空气能热水器好吗,旗舰版系统下载,周立波婚礼盛典全程高清

前端时间做一个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，就能完美的自适应

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网