数据大屏：ECharts 图表采用局部刷新策略

组件封装与局部刷新：src/components/echart/index.vue中实现了优化的图表组件

  • - 

    • watch: {
  options: {
    handler (options) {
      // 设置true清空echart缓存，只更新变化的数据
      this.chart.setOption(options, true)
    },
    deep: true
  }
}

      1
      2
      3
      4
      5

      - 通过**深度监听 options 变化，仅更新修改的数据部分**，**避免全量重绘**

      - **事件交互优化**：在图表组件中（如right-top.vue）处理鼠标交互时暂停轮询

      
  myChart.on("mouseover", (params) => {
    this.clearData(); // 鼠标悬停时清除定时器
  });
  myChart.on("mouseout", (params) => {
    this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
  });
      • 避免交互时的数据更新冲突，保持界面流畅
      • 数据分片与按需渲染：在处理大量数据时（如报警记录），通过分页加载（limitNum: 50）控制单次渲染数据量，避免一次性渲染过多数据导致的卡顿