echart的自适应这里用到
echartsInstance的resize方法（ 改变图表尺寸，在容器大小发生改变时需要手动调用。）
自适应窗口
<template>
<v-chart ref="echart" :options="drawLine(xAxis,markPoint,orderLine)" style="width:100%;height:465px"></v-chart>
</template>
<script>
mounted() {
window.addEventListener("resize", this.resizeTheChart);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
methods:{
// echart自适应
resizeTheChart() {
if (this.$refs.echart) {
this.$refs.echart.resize();
}
}
}
</script>
自适应父容器
当父容器发生变化时候，这时的echart仅适应窗口是没有效果的，这时我们需要给触发父容器变化的方法或者监听变化的变量 然后调用echart自适应方法即可
例：左侧导航栏伸缩时，父容器大小会发生变化，这时我们需要通过vuex获取左侧导航栏的状态，并在当前页面进行监听
computed: {
...mapGetters(["sidebar"]),//获取左侧导航栏对象（其中opened为导航栏伸缩属性）
}，
watch: {
"sidebar.opened": {
handler(nV, oV) {
const _this = this;
//加定时器 因为伸缩动画有动画时长，在动画结束后重新渲染echart
setTimeout(function() {
_this.$refs.echart.resize();
console.log("EnergyPlan 全屏执行",index);
}, 1000);
}
}
},
