图表列表性能优化：可视化区域内最小资源消耗

<template>
  <div class="list-box">
    <Group
      v-for="group in list"
      :key="group.id"
      ref="group"
    />
  </div>
</template>
<script>
export default {
  watch: {
    isSidebarOpen() {
      this.handleRenderDebounce();
    },
  },
  mounted() {
    // debounce 优化性能后，还是会冗余渲染
    this.handleRenderDebounce = tools.debounce(this.handleRender, 200);
    // 父容器监听 滚动事件，触发渲染函数
    this.$refs.listBox.addEventListener('scroll', this.handleRenderDebounce);
    // 页面尺寸调整时，触发滚动函数
    window.onresize = this.handleRenderDebounce;
    
    // 重置条件/搜索
    Bus.$on('reloadGroupChart', () => {
      if (this.$refs.group) {
        this.$refs.group.forEach((group) => {
          if (group.resetLoadMap) {
            group.resetLoadMap(true);
          }
        });
        this.$nextTick(() => {
          this.handleRender();
        });
      }
    });
    // 新建分组，滚动到新分组位置
    Bus.$on('eventScrollToNewGroup', () => {
      if (this.$refs.group && this.$refs.group.length > 0) {
        this.$refs.group[this.$refs.group.length - 1].$el.scrollIntoView();
      }
    });
  },
  methods: {
    handleRender() {
      // 每个分组遍历 调用其 渲染函数
      this.$refs.group.forEach((el) => {
        el.handleRender();
      });
    },
  },
};
</script>

<style lang="scss">

</style>

<template>
  <div class="list-box">
    <chart-item
      v-for="chart of group.charts"
      ref="chart"
      :key="chart.id"
    />
  </div>
</template>

<script>
export default {
  mounted() {
    Bus.$on('eventRefreshCharts', () => {
      for (const chart of this.$refs.chart || []) {
        chart.initChartItem();
      }
    });
    Bus.$on('eventRefreshTargetChart', (chartId) => {
      this.$forceUpdate();
      this.$nextTick(() => {
        for (const chart of this.$refs.chart || []) {
          if (chart.chart.id === chartId) {
            chart.clickRefreshChart();
          }
        }
      });
    });
    Bus.$on('eventRefreshCharts', (_) => {
      for (const chart of this.$refs.chart || []) {
        chart.initChartItem()
      }
    })
    if (this.group.charts) {
      this.group.charts.forEach((chart) => {
        this.$set(this.reloadMap, chart.id, false);
      });
    }
    this.$nextTick(() => {
      // 规避 - 初始化时chart大小位置计算不准确的问题
      setTimeout(() => {
        this.handleRender();
      }, 300);
    });
  },
  methods: {
    // 触发chart加载或更新
    handleRender() {
      if (this.$refs.chart) {
        this.$refs.chart.forEach((chart) => {
          if (chart.handleRepeater) {
            chart.handleRepeater();
          }
        });
      }
    },
    // 重置加载状态
    resetLoadMap(isNeed, chartId) {
      if (chartId) {
        this.reloadMap[chartId] = isNeed;
      } else {
        for (const key in this.reloadMap) {
          this.reloadMap[key] = isNeed;
        }
      }
    },
  },
  // 图表展开，重新触发加载
  toggleGroup() {
    this.group.isExpand = !this.group.isExpand;
    this.$nextTick(() => {
      this.$emit('handleRender');
    });
  },
  // 分组尺寸调整时，……
};
</script>

<template>
  <div v-bkloading="{isLoading:loading&&uninitialized}" class="chart-box" ref="chart">
    <!--图标标题，首次加载，整个图表loading，再次加载，只有标题展示loading Gif图片-->
    <chart-title
      :loading="loading"
      @refreshChart="clickRefreshChart"
    />
    <!--如果echarts图表封装成组件，不建议通过prop传递option参数(要做也先数据冻结-Object.freeze(option))
    千万不要deep watch option，大数据直接奔溃。-->
    <e-chart ref="eChartRef" />
    <!--图表为渲染前，默认占位图-->
    <img v-else>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 组件未初始化（已经初始化，再次请求，echarts setOption即可
      uninitialized: true,
      // 数据加载中
      loading: true,
      // 可给定echarts 图表模式示范数据，先展示，等数据请求完毕在展示
      option: null,
      clickRefreshChart: null,
      intersectionObserver: null,
      resizeObserver: null,
    };
  },
  beforeDestroy() {
    // 注意内存泄露问题
    // this.intersectionObserver.unobserve(this.$el)
    // 建议直接使用 disconnect
    this.intersectionObserver.disconnect();
    this.intersectionObserver = null;
    this.resizeObserver.disconnect();
    this.resizeObserver = null;
    // echart 手动释放资源
    if (this.eChart) {
      this.eChart.clear();
      this.eChart.dispose();
      this.eChart = null;
    }
  },
  mounted() {
    this.intersectionObserver = new IntersectionObserver((entries) => {
      if (entries[0].intersectionRatio > 0) {
        this.initChartItem();
      }
    });
    this.observeIo.observe(this.$el);
    this.resizeObserver = new ResizeObserver((entries) => {
      this.BWidth = document.getElementById('A').clientWidth - 20;
    });
    this.resizeObserver.observe(this.$el);
    /* const isElementNotInViewport = function (el) {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= (window.innerHeight || document.documentElement.clientHeight)
        || rect.bottom <= 0
      );
    };*/
    /**
     * 刷新图表,值刷新可视化区域内的图标
     */
    Bus.$on('clickRefreshChart', (data) => {
      if (!isElementNotInViewport(this.$el)) {
        this.clickRefreshChart(data);
      }
    });
    this.clickRefreshChart = debounce((data) => {
      // TODO 不同的刷新操作，逻辑
      this.initChartItem(data);
    }, 700);
  },
  methods: {
    // 触发chart加载,更新图标
    async initChartItem() {
      // 在loading中，不重新加载
      if (this.loading) {
        return;
      }
      // 以及初始化，但是查询条件没有刷新，不重新加载
      if (!this.uninitialized) {
        if (this.context.start_time === this.contextBak.start_time
          && this.context.end_time === this.contextBak.end_time) {
          return false;
        }
        // TODO 其他条件等等
      }
      // TODO 加载数据，渲染图表
    },
  },
};
</script>