feat:动态数据中心

ZhangXianQiang

2024-05-24 aa05304d221b1883d746e686f390d6f3fba598a7

 src/views/home/data-view/components/data-hola.vue

@@ -7,7 +7,7 @@
<script>
import * as echarts from 'echarts';
let holaChart = null;

let observer = null;
const config = {
  tooltip: {
    trigger: 'item'
@@ -16,6 +16,7 @@
    top: '5%',
    left: 'center'
  },
  color: ['#7868d9','#3eba45','#3da7f8','#ffbe40','#fe640d'],
  series: [
    {
      type: 'pie',
@@ -49,8 +50,8 @@
  data1: '工单数',
  data2: '恢复数',
  data3: '待恢复数',
  data4: '产生违约事项数',
  data5: '产生违约责任数',
  data4: '超期待处理数',
  data5: '超期责任数',
}
export default {
  props: {
@@ -78,6 +79,21 @@
        holaChart.setOption(config, true);
      }

    },
    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.hola);
    },
    // 窗口变换
    handleResize() {
      if (holaChart) {
        holaChart.resize();
      }
    }
  },
  watch: {
@@ -93,7 +109,15 @@
  mounted() {
    holaChart = echarts.init(this.$refs.hola);
    holaChart.setOption(config, true);
  }
    this.observe();

  },
  beforeDestroy() {
    if (holaChart) {
      holaChart.dispose();
      observer.unobserve(this.$refs.hola);
    }
  },
}
</script>

@@ -107,4 +131,4 @@
    height: 100%;
  }
}
</style>
</style>