vue实现数据大屏

使用 Vue 实现数据大屏

技术选型

Vue 3 + ECharts + Element Plus（可选）
核心依赖：echarts、vue-echarts（封装组件）、axios（数据请求）

安装依赖

npm install echarts vue-echarts axios

基础布局结构

<template>
  <div class="dashboard-container">
    <!-- 标题区 -->
    <header class="dashboard-header">
      <h1>数据大屏</h1>
    </header>

    <!-- 图表区 -->
    <div class="chart-grid">
      <div class="chart-item">
        <v-chart :option="lineChartOption" autoresize />
      </div>
      <div class="chart-item">
        <v-chart :option="barChartOption" autoresize />
      </div>
    </div>
  </div>
</template>

样式配置

.dashboard-container {
  width: 100vw;
  height: 100vh;
  background: #0f1c3f;
  color: #fff;
  overflow: hidden;
}

.dashboard-header {
  text-align: center;
  padding: 20px 0;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.chart-item {
  height: 400px;
  background: rgba(25, 61, 107, 0.5);
  border-radius: 8px;
  padding: 15px;
}

图表配置示例

import { ref } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components';

use([
  CanvasRenderer,
  LineChart,
  BarChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
]);

const lineChartOption = ref({
  title: { text: '趋势分析' },
  tooltip: { trigger: 'axis' },
  xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'line',
    data: [150, 230, 224, 218, 135]
  }]
});

const barChartOption = ref({
  title: { text: '对比分析' },
  tooltip: { trigger: 'axis' },
  xAxis: { data: ['产品A', '产品B', '产品C'] },
  yAxis: {},
  series: [{
    name: '销售额',
    type: 'bar',
    data: [1200, 2000, 1500]
  }]
});

数据动态更新

import { onMounted } from 'vue';
import axios from 'axios';

const fetchData = async () => {
  const res = await axios.get('/api/dashboard');
  lineChartOption.value.series[0].data = res.data.trend;
  barChartOption.value.series[0].data = res.data.comparison;
};

onMounted(() => {
  fetchData();
  setInterval(fetchData, 30000); // 30秒刷新一次
});

响应式适配

import { onMounted, onBeforeUnmount } from 'vue';

const handleResize = () => {
  const scale = window.innerWidth / 1920; // 基于设计稿宽度
  document.documentElement.style.fontSize = `${scale * 16}px`;
};

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

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

性能优化建议

1. 使用lodash.throttle限制resize事件频率
2. 大数据量时启用ECharts的large模式
3. 静态数据使用dataset方式管理
4. 避免频繁调用setOption，优先使用appendData方法

扩展功能

• 全屏切换：使用screenfull.js库
• 主题切换：通过echarts.registerTheme注册多套主题
• 动画效果：利用animationDuration配置项
• 地图集成：加载百度/高德地图插件

部署注意事项

1. 生产环境需配置Nginx路径代理解决跨域
2. 静态资源建议使用CDN加速
3. 大屏项目通常需要禁用浏览器默认缩放

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">