三、核心组件体系
DataV提供了超过40个高质量的组件，以下是最常用的核心组件分类。
3.1 边框组件（BorderBox）
边框组件是DataV的特色之一，它们采用SVG技术实现，具有高清显示特性和丰富的动画效果。目前提供了13种不同风格的边框组件，从简约到复杂装饰一应俱全。
边框组件完整列表：
基础用法：
<template>
<div class="dashboard">
<!-- 边框1：简约边框 -->
<dv-border-box-1>
<div class="content">内容区域</div>
</dv-border-box-1>
<!-- 边框2：带光晕效果的边框 -->
<dv-border-box-2>
<div class="content">带光晕效果</div>
</dv-border-box-2>
<!-- 边框3：带内边框效果 -->
<dv-border-box-3>
<div class="content">内边框效果</div>
</dv-border-box-3>
<!-- 边框12：科技感边框 -->
<dv-border-box-12>
<div class="content">科技感边框</div>
</dv-border-box-12>
<!-- 边框13：增强版科技感边框 -->
<dv-border-box-13>
<div class="content">增强版科技感边框</div>
</dv-border-box-13>
</div>
</template>
边框组件的高级配置：
<template>
<!-- 自定义边框颜色 -->
<dv-border-box-1 color="#00ffff" backgroundColor="rgba(0,0,0,0.5)">
<div class="content">自定义颜色边框</div>
</dv-border-box-1>
<!-- 使用CSS变量自定义 -->
<dv-border-box-2 class="custom-border">
<div class="content">自定义样式边框</div>
</dv-border-box-2>
</template>
<style>
.custom-border {
--border-color: #ff00ff;
--border-width: 3px;
}
</style>
这些边框组件可用于大屏中的模块划分，增强视觉层次感，每个边框组件都支持自定义颜色、粗细和动画效果，适应不同的设计风格。
3.2 装饰组件（Decoration）
装饰组件用于提升页面视觉层次，包括科技感线条、波纹背景等元素。
装饰组件完整列表：
基础用法：
<template>
<div>
<!-- 科技感装饰线条 -->
<dv-decoration-1 />
<!-- 波纹背景装饰 -->
<dv-decoration-2 />
<!-- 自定义颜色装饰 -->
<dv-decoration-3 :color="['#00ffff', '#ff00ff']" />
<!-- 带动画的装饰 -->
<dv-decoration-4 :dur="3" />
</div>
</template>
3.3 数据展示组件
数据展示组件专注于将数字和文本数据以直观易懂的方式呈现，是数据大屏中最核心的组件类型。
3.3.1 数字翻牌器（DigitalFlop）
数字翻牌器适用于展示关键指标的动态变化，支持自定义数字滚动效果，常用于展示GMV、用户数、订单量等核心指标。
基础用法：
<template>
<digital-flop
:value="totalSales"
:config="flopConfig"
/>
</template>
<script>
export default {
data() {
return {
totalSales: 123456789,
flopConfig: {
number: 1000000,
content: '{nt}',
style: {
fontSize: 32,
fontWeight: 'bold',
color: '#00ffff'
}
}
};
}
};
</script>
高级配置示例：
<template>
<digital-flop
:value="realtimeValue"
:config="advancedConfig"
:toFixed="2"
@click="handleClick"
/>
</template>
<script>
export default {
data() {
return {
realtimeValue: 98.76,
advancedConfig: {
number: [0, 100],
content: '{nt}%',
style: {
fontSize: 48,
fontWeight: 'bold',
color: '#ff6600',
textShadow: '0 0 10px rgba(255,102,0,0.5)'
},
animation: {
duration: 2000,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}
}
};
},
methods: {
handleClick() {
console.log('数字翻牌器被点击');
}
}
};
</script>
配置选项详解：
3.3.2 滚动表格（ScrollBoard）
滚动表格适用于展示排行榜、实时数据等需要滚动展示的列表数据，支持自动滚动、悬停暂停等功能。
<template>
<scroll-board
:config="tableConfig"
style="width: 100%; height: 400px;"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
data: [
['张三', '98', '技术部', '2024-01-01'],
['李四', '95', '市场部', '2024-01-02'],
['王五', '92', '产品部', '2024-01-03'],
['赵六', '88', '销售部', '2024-01-04'],
['钱七', '85', '运营部', '2024-01-05']
],
columns: ['姓名', '评分', '部门', '日期'],
index: true,
columnWidth: [80, 100, 120, 150],
align: ['center', 'center', 'center', 'center'],
rowNum: 10, // 显示行数
headerHeight: 40, // 表头高度
rowHeight: 50, // 行高
waitTime: 2000, // 滚动间隔(ms)
step: 1, // 每次滚动步长
hoverPause: true // 悬停暂停
}
};
}
};
</script>
滚动表格的高级功能：
支持通过headerBGC自定义表头背景色
支持通过oddRowBGC和evenRowBGC自定义奇偶行背景色
支持通过sort配置实现列排序
支持通过filter配置实现数据过滤
3.3.3 水位图（PercentPond）
水位图以环形进度条或液体波动形式展示百分比数据，非常适合展示完成率、占有率等指标。
<template>
<div style="width: 300px; height: 300px;">
<percent-pond :value="75" :config="pondConfig" />
</div>
</template>
<script>
export default {
data() {
return {
pondConfig: {
value: 75,
waveHeight: 25,
waterMark: '%',
waveCount: 2,
waveOpacity: 0.8,
colors: ['#00ffff', '#0066ff']
}
};
}
};
</script>
水位图配置选项详解：
3.4 图表组件
DataV提供了多种图表组件，简化了常见图表的使用流程，同时保持了高度的可定制性。
3.4.1 锥形柱图（ConicalColumnChart）
锥形柱图是具有3D视觉效果的柱状图，强化数据对比，适合展示各类排行数据。
<template>
<conical-column-chart
:data="chartData"
:config="chartConfig"
style="width: 100%; height: 400px;"
/>
</template>
<script>
export default {
data() {
return {
chartData: [
{ name: '产品A', value: 85 },
{ name: '产品B', value: 70 },
{ name: '产品C', value: 95 },
{ name: '产品D', value: 60 },
{ name: '产品E', value: 78 }
],
chartConfig: {
color: ['#00ffff', '#ff00ff', '#ffff00', '#00ff00', '#ff6600'],
showValue: true,
valueColor: '#ffffff',
barStyle: {
borderRadius: [4, 4, 0, 0]
}
}
};
}
};
</script>
3.4.2 飞线图（FlylineChart）
飞线图用于展示地理空间中的流向数据，如物流路径、用户分布、数据流向等。
<template>
<flyline-chart
:points="pointsList"
:lines="linesList"
style="width: 100%; height: 500px;"
/>
</template>
<script>
export default {
data() {
return {
pointsList: [
{ name: '北京', coordinate: [116.46, 39.92] },
{ name: '上海', coordinate: [121.48, 31.22] },
{ name: '广州', coordinate: [113.23, 23.16] },
{ name: '深圳', coordinate: [114.06, 22.54] },
{ name: '成都', coordinate: [104.06, 30.67] }
],
linesList: [
{ from: '北京', to: '上海' },
{ from: '北京', to: '广州', value: 100 },
{ from: '北京', to: '深圳', value: 80 },
{ from: '上海', to: '成都', value: 60 },
{ from: '广州', to: '深圳', value: 120 }
]
};
}
};
</script>
飞线图的高级配置：
const flylineConfig = {
// 飞线样式
lineStyle: {
color: '#00ffff',
width: 2,
opacity: 0.8,
curve: 0.5
},
// 粒子效果
particle: {
color: '#ffffff',
size: 4,
speed: 2
},
// 飞线动画
animation: {
duration: 2000,
easing: 'linear'
}
};
3.5 全屏容器（FullScreenContainer）
全屏容器组件用于包裹整个大屏内容，自动处理响应式适配和全屏切换：
<template>
<full-screen-container>
<div class="dashboard">
<!-- 大屏内容 -->
<dv-border-box-1>
<h1>数据大屏标题</h1>
</dv-border-box-1>
<div class="charts-container">
<conical-column-chart :data="chartData" />
<percent-pond :value="75" />
</div>
</div>
</full-screen-container>
</template>
全屏容器的高级功能：
自动监听窗口大小变化并调整缩放比例
支持自定义缩放比例和基准尺寸
提供全屏切换API，可通过按钮触发全屏模式
支持双击切换全屏
<template>
<full-screen-container ref="fullscreen">
<div class="dashboard">
<!-- 大屏内容 -->
<button @click="toggleFullscreen">全屏切换</button>
</div>
</full-screen-container>
</template>
<script>
export default {
methods: {
toggleFullscreen() {
if (this.$refs.fullscreen.isFullscreen) {
this.$refs.fullscreen.exitFullscreen();
} else {
this.$refs.fullscreen.requestFullscreen();
}
}
}
};
</script>
四、大屏适配方案
4.1 大屏适配的核心挑战
数据大屏通常运行在多种分辨率的显示设备上，从普通的1080p显示器到超宽的4K拼接屏，如何保证在所有分辨率下都能获得一致的视觉体验，是大屏开发中最具挑战性的问题。
DataV组件通过ResizeObserver API实现容器尺寸变化的自适应调整。为了确保大屏在不同分辨率下的显示效果，建议采用以下方案：
4.2 基于rem的适配方案
// 基于1920x1080设计稿适配
(function() {
const baseWidth = 1920;
const baseHeight = 1080;
function setScale() {
const width = window.innerWidth;
const height = window.innerHeight;
const scaleX = width / baseWidth;
const scaleY = height / baseHeight;
const scale = Math.min(scaleX, scaleY);
document.documentElement.style.fontSize = `${16 * scale}px`;
}
window.addEventListener('resize', setScale);
setScale();
})();
4.3 基于scale的整体缩放方案
.dashboard-container {
width: 1920px;
height: 1080px;
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
overflow: hidden;
}
function setScale() {
const scaleX = window.innerWidth / 1920;
const scaleY = window.innerHeight / 1080;
const scale = Math.min(scaleX, scaleY);
document.querySelector('.dashboard-container').style.transform =
`translate(-50%, -50%) scale(${scale})`;
}
4.4 动态适配监听器实现
为了避免频繁触发resize导致的性能问题，建议使用防抖（debounce）或节流（throttle）优化监听器：
function debounce(fn, delay) {
let timer = null;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
window.addEventListener('resize', debounce(() => {
setScale();
}, 300));
