vue中echarts3.0自适应的方法
发布时间：2020-12-17 02:33:57 所属栏目：百科 来源：网络整理
导读：前端时间做一个vue的项目，echart是按需引入的如下： 然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴， 第一种：浏览器自适应 通过： 在myChart.setOption后添加 如果有多个图形，可以封装成方法： { this.drawLi
|
前端时间做一个vue的项目，echart是按需引入的如下： 然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴， 第一种：浏览器自适应通过： 在myChart.setOption后添加 如果有多个图形，可以封装成方法： {
this.drawLineDom.resize();
this.todayFlowDom.resize();
this.hitRateDom.resize();});};},}
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));
第二种情况，根据div大小的变化进行自适应因为vue不能实时监测div大小变化的，所以我定义了一个按键，当按键的值变化的时候，进行resize； {
this.drawLineDom.resize();
this.todayFlowDom.resize();
this.hitRateDom.resize();
},500);},},
其实我用这个是在导航进行伸缩的时候，导致div大小发生了变化，所以这样执行reszie，就能完美的自适应 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |