油烟监测 vue代码

zmc

2023-08-08 bab83405c39ae9ab8b6569ca29b1e9a6a3b04327

 src/sfc/DashboardChart.vue

@@ -1,6 +1,7 @@
<!-- 仪表盘组件  
    父组件传入数据源与data绑定后 自动渲染  
    父组件最好启动异步组件  
    响应式变化大小
-->
<template>
  <div class="dashboard-item" ref="chartContainer"></div>
@@ -47,6 +48,7 @@
  mounted() {
      // 页面加载完成后调用仪表盘
      this.init()
      window.addEventListener('resize',this.updateChart)
  },
  methods:{
      // 初始化仪表盘
@@ -74,19 +76,27 @@
              }
          ]
      });
      }
      },
    updateChart(){
        this.$nextTick(() => {
            if (this.chart) {
            this.chart.resize();
            }
        });
  }
  },
  beforeUnmount() {
      // 销毁仪表盘实例
      this.chart.dispose();
  }
  },
  
};
</script>

<style>
.dashboard-item {
  width: 400px;
  width:100%;
  height: 300px;
  margin: 10px;
  /* margin: 10px; */
}
</style>