前端大屏展示技术指南

前端大屏展示技术指南 | 极客日志

/* 设计稿基准：1920x1080 */
.container {
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transform: scale(calc(100vw / 1920), calc(100vh / 1080));
}

/* 使用 postcss-px-to-viewport 自动转换 */
.container {
  width: 1920px; /* 自动转为 100vw */
  height: 1080px; /* 自动转为 100vh */
}

// DataV 提供的自动适配函数
import { fitScreen } from '@jiaminghi/data-view'
fitScreen({
  designWidth: 1920,
  designHeight: 1080,
  el: document.getElementById('app')
})

<template>
  <div ref="screenRef">
    <div> <!-- 大屏内容 --> </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const screenRef = ref<HTMLElement>()

function resize() {
  if (!screenRef.value) return
  const designWidth = 1920
  const designHeight = 1080
  const scaleX = window.innerWidth / designWidth
  const scaleY = window.innerHeight / designHeight
  const scale = Math.min(scaleX, scaleY) // 取较小值，保证完整显示
  screenRef.value.style.transform = `scale(${scale})`
  screenRef.value.style.transformOrigin = '0 0'
}

onMounted(() => {
  resize()
  window.addEventListener('resize', resize)
})

onUnmounted(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style scoped>
.screen-container {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
}
.screen-content {
  width: 100%;
  height: 100%;
  background: #0a0e27; /* 深色背景 */
}
</style>

// 防抖函数示例
function debounce(fn, delay = 300) {
  let timer = null
  return function (...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

// 使用
const handleResize = debounce(resize, 300)
window.addEventListener('resize', handleResize)

// 封装 WebSocket
class DataWebSocket {
  constructor(url) {
    this.url = url
    this.ws = null
    this.reconnectTimer = null
    this.listeners = new Map()
  }

  connect() {
    this.ws = new WebSocket(this.url)
    this.ws.onopen = () => {
      console.log('WebSocket 连接成功')
      this.clearReconnect()
    }
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data)
      this.emit(data.type, data.payload)
    }
    this.ws.onerror = () => {
      console.error('WebSocket 连接错误')
    }
    this.ws.onclose = () => {
      console.log('WebSocket 连接关闭，尝试重连...')
      this.reconnect()
    }
  }

  on(type, callback) {
    if (!this.listeners.has(type)) {
      this.listeners.set(type, [])
    }
    this.listeners.get(type).push(callback)
  }

  emit(type, data) {
    const callbacks = this.listeners.get(type) || []
    callbacks.forEach(cb => cb(data))
  }

  reconnect() {
    this.reconnectTimer = setTimeout(() => {
      this.connect()
    }, 3000)
  }

  clearReconnect() {
    if (this.reconnectTimer) {
      clearTimeout(this.reconnectTimer)
      this.reconnectTimer = null
    }
  }

  close() {
    this.clearReconnect()
    if (this.ws) {
      this.ws.close()
    }
  }
}

// 使用
const ws = new DataWebSocket('ws://localhost:8080')
ws.connect()
ws.on('dataUpdate', (data) => {
  // 更新图表数据
  updateChart(data)
})

<template>
  <div>
    <div> <!-- 内容 --> </div>
    <!-- 四个角的装饰 -->
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>
  </div>
</template>
<style scoped>
.border-box {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.6);
  box-shadow: 0 0 20px rgba(25, 186, 139, 0.3);
}
.corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #19ba8b;
}
.corner-tl {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}
.corner-tr {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}
.corner-bl {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}
.corner-br {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}
</style>

npm install echarts --save

<template>
  <div ref="chartRef"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

interface Props {
  options: echarts.EChartsOption
  theme?: string
}

const props = withDefaults(defineProps<Props>(), {
  theme: 'dark'
})

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

onMounted(() => {
  if (!chartRef.value) return
  chartInstance = echarts.init(chartRef.value, props.theme)
  chartInstance.setOption(props.options)
  // 窗口 resize 时自动调整图表大小
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance?.dispose()
})

watch(() => props.options, (newOptions) => {
  chartInstance?.setOption(newOptions, true)
}, { deep: true })

function handleResize() {
  chartInstance?.resize()
}
</script>
<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <ChartComponent :options="chartOptions" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ChartComponent from './components/ChartComponent.vue'

const chartOptions = ref({
  title: {
    text: '销售数据统计',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月'],
    axisLine: {
      lineStyle: {
        color: '#4a90e2'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#4a90e2'
      }
    }
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110],
    type: 'bar',
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#83bff6' },
        { offset: 1, color: '#188df0' }
      ])
    }
  }],
  backgroundColor: 'transparent'
})
</script>

npm install @jiaminghi/data-view --save

<template>
  <div>
    <!-- 边框装饰 -->
    <dv-border-box-1>
      <div>
        <!-- 标题 -->
        <dv-decoration-1 />
        <!-- 数字翻牌器 -->
        <dv-digital-flop :config="digitalConfig" />
        <!-- 轮播表 -->
        <dv-scroll-board :config="scrollConfig" />
      </div>
    </dv-border-box-1>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fitScreen } from '@jiaminghi/data-view'

const digitalConfig = ref({
  number: [1234],
  content: '{nt}',
  style: {
    fontSize: 40
  }
})

const scrollConfig = ref({
  header: ['列 1', '列 2', '列 3'],
  data: [
    ['行 1 数据 1', '行 1 数据 2', '行 1 数据 3'],
    ['行 2 数据 1', '行 2 数据 2', '行 2 数据 3'],
  ],
  rowNum: 3
})

onMounted(() => {
  // 自动适配屏幕
  fitScreen({
    designWidth: 1920,
    designHeight: 1080,
    el: document.getElementById('app')
  })
})
</script>

screen-dashboard/
├── src/
│   ├── components/ # 组件
│   │   ├── charts/ # 图表组件
│   │   ├── borders/ # 边框装饰组件
│   │   └── common/ # 通用组件
│   ├── views/ # 页面
│   │   └── dashboard.vue # 大屏主页面
│   ├── utils/ # 工具函数
│   │   ├── resize.ts # 屏幕适配
│   │   ├── websocket.ts # WebSocket 封装
│   │   └── theme.ts # 主题配置
│   ├── assets/ # 静态资源
│   │   ├── styles/ # 样式文件
│   │   └── images/ # 图片资源
│   └── main.ts # 入口文件
├── package.json
└── vite.config.ts

// src/utils/resize.ts
export class ScreenAdapter {
  private designWidth: number
  private designHeight: number
  private container: HTMLElement
  private resizeTimer: number | null = null

  constructor(container: HTMLElement, designWidth = 1920, designHeight = 1080) {
    this.container = container
    this.designWidth = designWidth
    this.designHeight = designHeight
    this.init()
  }

  private init() {
    this.resize()
    window.addEventListener('resize', this.handleResize.bind(this))
  }

  private handleResize() {
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer)
    }
    this.resizeTimer = window.setTimeout(() => {
      this.resize()
    }, 300)
  }

  private resize() {
    const scaleX = window.innerWidth / this.designWidth
    const scaleY = window.innerHeight / this.designHeight
    const scale = Math.min(scaleX, scaleY)
    this.container.style.width = `${this.designWidth}px`
    this.container.style.height = `${this.designHeight}px`
    this.container.style.transform = `scale(${scale})`
    this.container.style.transformOrigin = '0 0'
  }

  destroy() {
    window.removeEventListener('resize', this.handleResize.bind(this))
    if (this.resizeTimer) {
      clearTimeout(this.resizeTimer)
    }
  }
}

<template>
  <div ref="screenWrapper">
    <div class="screen-container">
      <!-- 顶部标题栏 -->
      <div class="header">
        <div class="title">数据监控大屏</div>
        <div class="time">{{ currentTime }}</div>
      </div>
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧 -->
        <div class="left-panel">
          <BorderBox title="销售数据">
            <ChartComponent :options="salesChartOptions" />
          </BorderBox>
          <BorderBox title="实时数据">
            <DigitalFlop :config="digitalConfig" />
          </BorderBox>
        </div>
        <!-- 中间 -->
        <div class="center-panel">
          <BorderBox title="地图展示">
            <MapComponent :data="mapData" />
          </BorderBox>
        </div>
        <!-- 右侧 -->
        <div class="right-panel">
          <BorderBox title="排行榜">
            <ScrollBoard :config="rankConfig" />
          </BorderBox>
          <BorderBox title="趋势分析">
            <ChartComponent :options="trendChartOptions" />
          </BorderBox>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ScreenAdapter } from '@/utils/resize'
import { DataWebSocket } from '@/utils/websocket'
import BorderBox from './components/BorderBox.vue'
import ChartComponent from './components/ChartComponent.vue'
import MapComponent from './components/MapComponent.vue'
import DigitalFlop from './components/DigitalFlop.vue'
import ScrollBoard from './components/ScrollBoard.vue'

const screenWrapper = ref<HTMLElement>()
let adapter: ScreenAdapter | null = null
let ws: DataWebSocket | null = null

const currentTime = ref('')

// 图表配置
const salesChartOptions = ref({ /* ... */ })
const trendChartOptions = ref({ /* ... */ })
const digitalConfig = ref({ /* ... */ })
const rankConfig = ref({ /* ... */ })
const mapData = ref([])

// 更新时间
function updateTime() {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN')
}

// 初始化 WebSocket
function initWebSocket() {
  ws = new DataWebSocket('ws://localhost:8080')
  ws.connect()
  ws.on('salesData', (data) => {
    // 更新销售数据图表
    updateSalesChart(data)
  })
  ws.on('mapData', (data) => {
    mapData.value = data
  })
}

onMounted(() => {
  if (screenWrapper.value) {
    adapter = new ScreenAdapter(screenWrapper.value)
  }
  updateTime()
  setInterval(updateTime, 1000)
  initWebSocket()
})

onUnmounted(() => {
  adapter?.destroy()
  ws?.close()
})
</script>
<style scoped>
.screen-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0e27;
}
.screen-container {
  width: 1920px;
  height: 1080px;
  position: relative;
}
.header {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background: linear-gradient(90deg, rgba(25, 186, 139, 0.1), transparent);
  border-bottom: 2px solid rgba(25, 186, 139, 0.3);
}
.title {
  font-size: 36px;
  font-weight: bold;
  color: #19ba8b;
  text-shadow: 0 0 20px rgba(25, 186, 139, 0.5);
}
.time {
  font-size: 24px;
  color: #fff;
}
.main-content {
  display: flex;
  height: calc(100% - 80px);
  padding: 20px;
  gap: 20px;
}
.left-panel, .right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.center-panel {
  flex: 2;
}
</style>

前端大屏展示技术指南

前端大屏展示技术指南

📑 目录

一、什么是数据可视化大屏

大屏的特点

二、大屏展示的核心技术栈

2.1 图表库选择

ECharts（推荐）

AntV G2 / G6

D3.js

DataV（阿里云）

2.2 适配方案

方案一：CSS 缩放（scale）

方案二：rem / vw / vh

方案三：DataV 的适配方案

2.3 动画与特效库

三、大屏开发的核心要点

3.1 屏幕适配（响应式）

3.2 性能优化

3.3 数据实时更新

3.4 视觉效果设计

四、技术实现详解

4.1 基于 ECharts 的大屏实现

安装 ECharts

基础图表组件

使用示例

4.2 基于 DataV 的大屏实现

安装 DataV

使用 DataV 组件

4.3 基于 Vue3 + Vite 的大屏项目搭建

项目结构

屏幕适配工具

五、常用大屏组件库推荐

1. DataV（阿里云）

2. Vue-Big-Screen

3. React-Big-Screen

4. ECharts

5. AntV

六、最佳实践与注意事项

6.1 开发规范

6.2 常见问题

问题 1：字体模糊

问题 2：图表重叠

问题 3：数据更新卡顿

问题 4：跨浏览器兼容

6.3 部署注意事项

七、完整示例代码

完整大屏页面示例

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具