第一种:浏览器自适应

通过:

在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,就能完美的自适应


Logo

前往低代码交流专区

更多推荐