油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/sfc/DashboardChart.vue

@@ -1,92 +1,117 @@
<!-- 仪表盘组件  
    父组件传入数据源与data绑定后 自动渲染  
    父组件最好启动异步组件  
    响应式变化大小
-->
<template>
  <div class="dashboard-item" ref="chartContainer"></div>
</template>

<script>

import * as echarts from 'echarts';

export default {
  props: ['data'],
  data() {
      return {
          chart: null
      }
    return {
      chart: null
    };
  },
  // 父组件设置了实时更新 当源数据发生变化是 监听到立即更新仪表盘
  watch:{
      data(newValue){
          this.chart.setOption({
              series: [
              {
                  name: '实时数据',
                  type: 'gauge',
                  detail: { formatter: '{value} mg/m³', fontSize : 17},
                  axisLine: {
                      lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
                  },
                  data: [{
                      value: newValue,
                      name: '油烟浓度',
                      itemStyle: {
                          color: newValue >= 1 ? 'red' : 'green'
                      },
                     
                  }],
                 
                  max: 2
  watch: {
    data(newValue) {
      this.chart.setOption({
        series: [
          {
            name: '实时数据',
            type: 'gauge',
            detail: { formatter: '{value} mg/m³', fontSize: 17 },
            axisLine: {
              lineStyle: {
                color: [
                  [0.2, '#67e0e3'],
                  [0.5, '#37a2da'],
                  [1, '#fd666d']
                ],
                width: 15
              }
          ]
          })
      }
  },  
  mounted() {
      // 页面加载完成后调用仪表盘
      this.init()
            },
            data: [
              {
                value: newValue,
                name: '油烟浓度',
                itemStyle: {
                  color: newValue >= 1 ? 'red' : 'green'
                }
              }
            ],

            max: 2
          }
        ]
      });
    }
  },
  methods:{
      // 初始化仪表盘
      init(){
          this.chart = echarts.init(this.$refs.chartContainer);
  mounted() {
    // 页面加载完成后调用仪表盘
    this.init();
    window.addEventListener('resize', this.updateChart);
  },
  methods: {
    // 初始化仪表盘
    init() {
      this.chart = echarts.init(this.$refs.chartContainer);
      // 设置默认的空数据仪表盘
      this.chart.setOption({
          // 你的仪表盘配置项
          series: [
              {
                  name: '实时数据',
                  type: 'gauge',
                  detail: { formatter: '{value} mg/m³', fontSize : 17},
                  axisLine: {
                      lineStyle: { color: [[0.2, '#f45c6e'], [0.8, '#ffd854'], [1, '#57cdbd']], width: 10 }
                  },
                  data: [{
                      value: this.data,
                      name: '油烟浓度',
                      itemStyle: {
                          color: this.data >= 1 ? 'red' : 'green'
                      }
                  }],
                  max: 2
        // 你的仪表盘配置项
        series: [
          {
            name: '实时数据',
            type: 'gauge',
            detail: { formatter: '{value} mg/m³', fontSize: 17 },
            axisLine: {
              lineStyle: {
                color: [
                [0.2, '#67e0e3'],
                  [0.5, '#37a2da'],
                  [1, '#fd666d']
                ],
                width: 15
              }
          ]
            },
            data: [
              {
                value: this.data,
                name: '油烟浓度',
                itemStyle: {
                  color: this.data >= 1 ? 'red' : 'green'
                }
              }
            ],
            max: 2
          }
        ]
      });
      }
    },
    updateChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    }
  },
  beforeUnmount() {
      // 销毁仪表盘实例
      this.chart.dispose();
    // 销毁仪表盘实例
    this.chart.dispose();
  }
};
</script>

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