F11全屏切换需要Echarts自适应时:用window.addEventListener("resize", () => { myChart.resize(); });
let myChart = this.$echarts.init(document.getElementById(dom))
window.addEventListener("resize", () => { myChart.resize(); });
页面内点击切换需要Echarts自适应时,例如当Echarts旁边的div隐藏时,Echarts图需要拉满自适应时:setTimeout(() => { myChart.resize(); }, 200)
let myChart = this.$echarts.init(document.getElementById(dom))
setTimeout(() => {
myChart.resize();
}, 200)
当侧边栏收缩时,需要Echarts自适应时,思路如下:
1.computed中监听获取侧边栏的展开收缩状态,isCollapse()。
2.watch中监听isCollapse的状态,既侧边栏的展开收缩状态,当状态变化时,使用myChart.resize(),使echarts自适应。
3.watch中增加了300毫秒的延迟,使因为有时侧边栏有延迟,可能会监听不到。
<script>
computed: {
...mapGetters(["sidebar"]),
isCollapse() {
return this.sidebar.opened;
},
},
watch: {
isCollapse(val) {
setTimeout(() => {
this.myChart.resize()
}, 300);
},
},
data() {
return {
myChart: ''
}
},
methods: {
getEcharts(){
this.myChart = this.$echarts.init(document.getElementById(dom))
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
</script>