vue中echarts3.0自适应的方法
更新时间：2018年02月26日 15:53:37 作者：baidu_35711175
这篇文章主要介绍了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'));
第二种情况，根据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，就能完美的自适应
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要给大家介绍了关于vue单文件中引用路径处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程
在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,下面这篇文章主要给大家介绍了关于vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue-cli设置css不生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了详解几十行代码实现一个vue的状态管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
这篇文章主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue+echarts实现3D柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论