油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/sfc/DashboardChart.vue

@@ -8,7 +8,6 @@
</template>

<script>

import * as echarts from 'echarts';

export default {
@@ -16,7 +15,7 @@
  data() {
      return {
          chart: null
      }
    };
  },
  // 父组件设置了实时更新 当源数据发生变化是 监听到立即更新仪表盘
  watch:{
@@ -28,27 +27,35 @@
                  type: 'gauge',
                  detail: { formatter: '{value} mg/m³', fontSize : 17},
                  axisLine: {
                      lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
              lineStyle: {
                color: [
                  [0.2, '#67e0e3'],
                  [0.5, '#37a2da'],
                  [1, '#fd666d']
                ],
                width: 15
              }
                  },
                  data: [{
            data: [
              {
                      value: newValue,
                      name: '油烟浓度',
                      itemStyle: {
                          color: newValue >= 1 ? 'red' : 'green'
                      },
                     
                  }],
                }
              }
            ],
                 
                  max: 2
              }
          ]
          })
      });
      }
  },  
  mounted() {
      // 页面加载完成后调用仪表盘
      this.init()
      window.addEventListener('resize',this.updateChart)
    this.init();
    window.addEventListener('resize', this.updateChart);
  },
  methods:{
      // 初始化仪表盘
@@ -63,15 +70,24 @@
                  type: 'gauge',
                  detail: { formatter: '{value} mg/m³', fontSize : 17},
                  axisLine: {
                      lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
              lineStyle: {
                color: [
                [0.2, '#67e0e3'],
                  [0.5, '#37a2da'],
                  [1, '#fd666d']
                ],
                width: 15
              }
                  },
                  data: [{
            data: [
              {
                      value: this.data,
                      name: '油烟浓度',
                      itemStyle: {
                          color: this.data >= 1 ? 'red' : 'green'
                      }
                  }],
              }
            ],
                  max: 2
              }
          ]
@@ -88,8 +104,7 @@
  beforeUnmount() {
      // 销毁仪表盘实例
      this.chart.dispose();
  },
  
  }
};
</script>