fix:修复宽度变化导致echart不更新

ZhangXianQiang

2024-03-06 9cc5e1c2f2a2209465c1ffcc160fd8420fa9f2bc

fix:修复宽度变化导致echart不更新

 src/views/home/data-chart/index.vue

@@ -27,6 +27,7 @@
<script>
import * as echarts from 'echarts';
let lineChart = null;
let observer = null;
export default {
  name: 'DataChart',
  data() {
@@ -52,7 +53,7 @@
        },
        {
          name: 'XX运维公司3',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211,'6月': 1321 },
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211, '6月': 1321 },
          state2: { '1月': 123, '2月': 213, '3月': 123, '4月': 23, '5月': 123 }
        },
        {
@@ -136,14 +137,19 @@
      }
    },

    // 过滤
    filterData() {

    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.chartContent);
    },
    // 窗口变换
    handleResize() {
      if (lineChart) {
        lineChart.resize()
        lineChart.resize();
      }
    }

@@ -153,10 +159,13 @@
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    window.addEventListener('resize', this.handleResize)
    this.observe();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (lineChart) {
      lineChart.dispose();
      observer.unobserve(this.$refs.chartContent);
    }
  },
}
</script>