2026.3.12

riku

2026-03-12 723be8e0896fbf7e9456a5defb44911a3d0cbc27

 src/sfc/ExceptionTypeLineChart.vue

@@ -1,5 +1,5 @@
<!-- 异常情况的 折线图组件
子组件有基本的样式 
子组件有基本的样式
使用同一个图形实例，接受父组件传入的折线图option
**父组件
 <ExceptionTypeLineChart
@@ -9,66 +9,65 @@
      ></ExceptionTypeLineChart>
 -->
<template>
  <div  id="main" class="line-chart"></div>
  <div id="main" class="line-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import * as echarts from 'echarts'

export default {
  props: {
    option:{
      type:Object,
      default(){
    option: {
      type: Object,
      default() {
        return {}
      }
      },
    },
    isOpenDialog:{
      type:Boolean
    isOpenDialog: {
      type: Boolean,
    },

  },
  data() {
    return {
      chart: null
    };
      chart: null,
    }
  },
  mounted() {
     // 获取页面宽度的一半
     
    this.initChart();
    // 获取页面宽度的一半

    this.initChart()
    this.chart.clear
    this.chart.setOption(this.option,true)
    window.addEventListener('resize', this.resizeChart);
    this.chart.setOption(this.option, true)
    window.addEventListener('resize', this.resizeChart)
  },
  watch: {
    option(){
    option() {
      // this.chart.dispose;
      // this.initChart();
      // this.chart.clear
      // 不与之前的option进行合并
      this.chart.setOption(this.option,true)
      this.chart.setOption(this.option, true)
    },
    isOpenDialog(){
      window.addEventListener('resize', this.resizeChart);
    isOpenDialog() {
      window.addEventListener('resize', this.resizeChart)
    },
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose;
      this.chart.dispose
    }
  },
  methods: {
    initChart() {
      // 创建echarts实例
      this.chart = echarts.init(document.getElementById('main'));
      this.chart = echarts.init(document.getElementById('main'))
      // 定义图表的配置项和数据
      const option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
          containLabel: true,
        },
        tooltip: {},
        toolbox: {
@@ -79,8 +78,8 @@
            //   yAxisIndex: 'none'
            // },
            // 保存为图片
            saveAsImage: {}
          }
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'time',
@@ -93,31 +92,30 @@
          {
            name: '油烟浓度',
            type: 'line',
            data: []
          }
        ]
      };
            data: [],
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表
      this.chart.setOption(option, true);
      this.chart.setOption(option, true)
    },

    // 跟页面响应式变化
    resizeChart() {
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
          this.chart.resize()
        }
      });
      })
      // this.chart.resize();
    }
  }
};
    },
  },
}
</script>


<style>
.line-chart {
  width:920px;
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
  /* margin-left: 10px; */