vue中怎么利用echarts3.0实现自适应,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
第一种:浏览器自适应
通过:
在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);},},
看完上述内容,你们掌握vue中怎么利用echarts3.0实现自适应的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!