Merge branch 'feature-code-refactoring' and 'feature-002'

riku

2023-12-21 c24a5a2a99515b365ebc343b04538bb862790de1

 src/views/exception/components/DustLineChart.vue

@@ -6,11 +6,10 @@
 -->
 <template>
       <div  id="main" class="line-chart-exception"></div>
   
  </template>
  
  <script>
  import * as echarts from 'echarts';
import * as echarts from 'echarts'
  
  export default {
    props: {
@@ -19,39 +18,32 @@
        default(){
          return {}
        }
      },
      isOpenDialog:{
        type:Boolean
      },
  
    }
    },
    data() {
      return {
        chart: null
      };
    }
    },
    mounted() {
       // 获取页面宽度的一半
      this.initChart();
    this.initChart()
      this.chart.clear
      this.chart.setOption(this.option,true)
      window.addEventListener('resize', this.resizeChart);
    window.addEventListener('resize', this.resizeChart)
    },
    watch: {
      option(){
        // this.chart.clear
        // 不与之前的option进行合并
        this.chart.setOption(this.option,true)
      },
      isOpenDialog(){
        window.addEventListener('resize', this.resizeChart);
      },
    }
    },
 
    methods: {
      initChart() {
        // 创建echarts实例
        this.chart = echarts.init(document.getElementById('main'));
      this.chart = echarts.init(document.getElementById('main'))
        // 定义图表的配置项和数据
        const option = {
          grid: {
@@ -74,10 +66,10 @@
          },
          xAxis: {
            type: 'time',
            data: [],
          data: []
          },
          yAxis: {
            type: 'value',
          type: 'value'
          },
          series: [
            {
@@ -86,23 +78,22 @@
              data: []
            }
          ]
        };
      }
        // 使用刚指定的配置项和数据显示图表
        this.chart.setOption(option, true);
      this.chart.setOption(option, true)
      },
  
      // 跟页面响应式变化
      resizeChart() {
        this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
          this.chart.resize()
        }
      });
      })
      }
    }
  };
}
  </script>
  
  
  <style scoped>
  .line-chart-exception {
@@ -112,4 +103,3 @@
    min-width: 500px;
  }
  </style>