xiaoshi_system/src/views/home/components/echarts/index.vue

<template> 
  <div class="home_echarts">
    <div class="left" id='step3'>
      <report-echart :resize="resize"></report-echart>
    </div>
    <div class="right">
        <div class="top" id='step4'>
          <task-echart :resize="resize"></task-echart>
        </div>
        <div class="bottom" id='step5'>
          <event-echart :resize="resize"></event-echart>
        </div>
    </div>
  </div>
</template>

<script>
import reportEchart from './components/report.vue'
import eventEchart from './components/event.vue'
import taskEchart from './components/task.vue'
export default {
  components: {
    reportEchart,
    eventEchart,
    taskEchart
  },
  props: {},
  data() {
    return {
      resize:true
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    window.addEventListener('resize',()=>{
      this.resize = false
      this.$nextTick(()=>{
        this.resize = true
      })
    })
  },
  methods: {},
  deactivated(){
    window.removeEventListener('resize',()=>{})
  },
  beforeDestroy(){
    window.removeEventListener('resize',()=>{})
  }
};
</script>
<style lang="scss" scoped>
.home_echarts{
    width: 100%;
    height: 400px;
    display: flex;
    flex: 1;
    align-items: center;
    border: 2px solid var(--bg);
    .left{
        width: 100%;
        height: 100%;
        min-width:324px;
        border-right: 2px solid var(--bg);
    }
    .right{
        width: 100%;
        height: 100%;
        min-width:700px;
        .top{
            height: 50%;
            width:calc(100% - 3px);
            border-bottom: 2px solid var(--bg);
        }
        .bottom{
            width:calc(100% - 3px);
            height: 50%;
        }
    }
}
</style>