这篇文章主要介绍了vue中echarts3.0自适应，现在分享给大家，也给大家做个参考。
前端时间做一个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'));
登录后复制
第二种情况，根据p大小的变化进行自适应
因为vue不能实时监测p大小变化的，所以我定义了一个按键，当按键的值变化的时候，进行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);},},
登录后复制
其实我用这个是在导航进行伸缩的时候，导致p大小发生了变化，所以这样执行reszie，就能完美的自适应
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在vue中slot如何实现在子组件中显示父组件传递的模板（详细教程）
利用vue如何实现裁切图片同时实现放大、缩小、旋转功能（详细教程）
有关React组件性能优化详细讲解
以上就是在vue中使用echarts3.0自适应的方法有哪些？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750025.html
