扬尘Vue

zmc

2023-08-31 013ed9283200da41902835f9fd679df13299d436

 src/sfc/DustLineChart.vue

@@ -5,7 +5,10 @@

 -->
 <template>
    <div  id="main" class="line-chart"></div>

       <div  id="main" class="line-chart-exception"></div>

   
  </template>
  
  <script>
@@ -38,8 +41,6 @@
    },
    watch: {
      option(){
        // this.chart.dispose;
        // this.initChart();
        // this.chart.clear
        // 不与之前的option进行合并
        this.chart.setOption(this.option,true)
@@ -48,11 +49,11 @@
        window.addEventListener('resize', this.resizeChart);
      },
    },
    beforeUnmount() {
      if (this.chart) {
        this.chart.dispose;
      }
    },
    // beforeUnmount() {
    //   if (this.chart) {
    //     this.chart.dispose;
    //   }
    // },
    methods: {
      initChart() {
        // 创建echarts实例
@@ -98,19 +99,23 @@
  
      // 跟页面响应式变化
      resizeChart() {
        this.$nextTick(() => {
        if (this.chart) {
        this.chart.resize();
        }
      });
      }
    }
  };
  </script>
  
  
  <style>
  .line-chart {
    width:920px;
  <style scoped>
  .line-chart-exception {
    width: 700px;
    height: 250px;
    margin-bottom: 20px;
    min-width: 600px;
    min-width: 500px;
  }
  </style>