4K 大屏 + ECharts 深度话题

// ❌ ref 会深度劫持整个 ECharts 实例
import { ref, onMounted } from 'vue'

const chart = ref(null)  // 这里埋雷了

onMounted(() => {
  chart.value = echarts.init(dom)  // init 返回的实例被深度 reactive 化
  chart.value.setOption({...})
})

// 后续每次 chart.value.setOption(),Vue 都会去 diff 整个实例树

// ✅ shallowRef 只对 .value 本身响应式,不递归内部
import { shallowRef, onMounted, onBeforeUnmount } from 'vue'

const chart = shallowRef(null)  // 关键改动

onMounted(() => {
  chart.value = echarts.init(dom)
  chart.value.setOption({...})
})

onBeforeUnmount(() => {
  chart.value?.dispose()  // 别忘了销毁,防内存泄漏
  chart.value = null
})

如果某些场景你已经用 ref 存了一个列表,但列表里又混着不该响应式的对象(比如表格行数据里嵌了 ECharts 实例),可以用 markRaw 永久标记"这个对象别响应式"。

import { markRaw } from 'vue'

// 在数据进响应式之前,先标记
const instance = markRaw(echarts.init(dom))

// 区别:
// shallowRef = 容器是浅响应(治标,改容器层)
// markRaw    = 把对象本身标记为"永不响应式"(治本,标记对象层)
// 大屏场景两者都行,shallowRef 更常用因为更直观

// 设计稿固定 1920×1080,运行时按屏幕等比缩放
const designWidth = 1920
const designHeight = 1080

function scaleScreen() {
  const scaleX = window.innerWidth / designWidth
  const scaleY = window.innerHeight / designHeight
  const scale = Math.min(scaleX, scaleY)  // 取小值,保证不变形

  const screen = document.getElementById('screen')
  screen.style.transform = `scale(${scale})`
  screen.style.transformOrigin = 'left top'

  // 居中,消除黑边
  const left = (window.innerWidth - designWidth * scale) / 2
  const top = (window.innerHeight - designHeight * scale) / 2
  screen.style.position = 'absolute'
  screen.style.left = left + 'px'
  screen.style.top = top + 'px'
}

window.addEventListener('resize', scaleScreen)

// ChartManager:统一管理大屏所有图表实例
class ChartManager {
  constructor() {
    this.instances = new Map()  // 用 Map,不用响应式
  }

  // 注册:dom + option,返回实例
  register(key, dom, option) {
    if (this.instances.has(key)) return this.instances.get(key)
    const chart = echarts.init(dom, 'dark', {
      devicePixelRatio: window.devicePixelRatio,
      renderer: 'canvas'
    })
    chart.setOption(option)
    this.instances.set(key, chart)
    return chart
  }

  // 增量更新:只改数据,不重绘整个图
  update(key, option) {
    const chart = this.instances.get(key)
    chart?.setOption(option, { notMerge: false })  // 增量
  }

  // 销毁单个(切 Tab 时)
  dispose(key) {
    this.instances.get(key)?.dispose()
    this.instances.delete(key)
  }

  // 销毁全部(页面卸载时)
  disposeAll() {
    this.instances.forEach(c => c?.dispose())
    this.instances.clear()
  }
}

// 关键:这个 manager 本身用普通变量,不进响应式
// 组件里用 shallowRef 持有它即可

class WSocket {
  constructor(url) {
    this.url = url
    this.ws = null
    this.heartbeatTimer = null
    this.pongTimer = null
    this.reconnectCount = 0
    this.forceClose = false  // 区分主动关闭还是异常关闭
  }

  connect() {
    this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {
      this.reconnectCount = 0  // 重置重连次数
      this.startHeartbeat()
    }

    this.ws.onmessage = (e) => {
      const data = JSON.parse(e.data)
      if (data.type === 'pong') {
        clearTimeout(this.pongTimer)
        return
      }
      // 业务数据处理...
      this.onData(data)
    }

    this.ws.onclose = () => {
      this.stopHeartbeat()
      if (!this.forceClose) this.reconnect()  // 非主动关闭才重连
    }
  }

  startHeartbeat() {
    this.heartbeatTimer = setInterval(() => {
      if (this.ws?.readyState === 1) {
        this.ws.send(JSON.stringify({ type: 'ping' }))

        // 10 秒没收到 pong,判定连接死了
        this.pongTimer = setTimeout(() => {
          this.ws.close()  // 主动 close 触发 onclose → reconnect
        }, 10000)
      }
    }, 30000)
  }

  reconnect() {
    if (this.reconnectCount > 5) return  // 超过 5 次放弃,提示"连接断开"
    // 指数退避:1s, 2s, 4s, 8s, 16s
    const delay = Math.min(1000 * 2 ** this.reconnectCount, 16000)
    setTimeout(() => {
      this.reconnectCount++
      this.connect()
    }, delay)
  }

  close() {
    this.forceClose = true  // 标记主动关闭,不重连
    this.stopHeartbeat()
    this.ws?.close()
  }
}