在vue中使用echarts3.0自适应的方法有哪些?
程序员文章站
2022-03-21 16:18:49
...
这篇文章主要介绍了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如何实现裁切图片同时实现放大、缩小、旋转功能(详细教程)
以上就是在vue中使用echarts3.0自适应的方法有哪些?的详细内容,更多请关注其它相关文章!