数据看板组件
数据看板用于直观展示云计算相关的关键指标和数据统计，适用于云服务平台的监控中心、管理控制台等场景，支持多种布局和图表类型，帮助用户快速了解系统状态和资源使用情况。
基本用法
最基本的数据看板，包含多种类型的数据卡片、图表和表格，展示云计算资源的使用情况和状态。
CPU使用率
68%
5% 较上周
内存使用
12.4GB
2.1GB 较上周
网络流量
3.2TB
0.5TB 较上周
存储使用
4.8TB
0.3TB 较上周
服务器负载趋势
资源分配
服务状态
| 服务名称 | 状态 | 响应时间 | 正常运行时间 |
|---|---|---|---|
| 云主机服务 | 正常 | 32ms | 99.99% |
| 数据库服务 | 正常 | 45ms | 99.97% |
| 对象存储 | 轻微延迟 | 120ms | 99.92% |
| 负载均衡器 | 正常 | 28ms | 100% |
| CDN服务 | 正常 | 18ms | 99.98% |
告警列表
| 告警内容 | 级别 | 时间 | 状态 |
|---|---|---|---|
| 对象存储API响应延迟 | 警告 | 2小时前 | 未处理 |
| 数据库连接数接近上限 | 警告 | 4小时前 | 已处理 |
| 负载均衡器配置更新 | 信息 | 8小时前 | 已处理 |
| 磁盘空间使用率超过90% | 严重 | 1天前 | 已处理 |
| 防火墙规则自动更新 | 信息 | 2天前 | 已处理 |
计算资源使用分布
HTML
<div class="dashboard">
<!-- CPU使用率卡片 -->
<div class="dashboard-card col-3">
<div class="dashboard-card-header">
<div class="dashboard-card-title">CPU使用率</div>
<div class="dashboard-card-icon" style="background-color: #2468f2;">
<i class="mdi mdi-cpu-64-bit"></i>
</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-value">68%</div>
<div class="dashboard-stat-label">
<span class="trend-up"><i class="mdi mdi-arrow-up"></i> 5%</span> 较上周
</div>
</div>
<div id="cpu-chart" class="dashboard-chart" style="height: 100px;"></div>
</div>
<!-- 内存使用卡片 -->
<div class="dashboard-card col-3">
<div class="dashboard-card-header">
<div class="dashboard-card-title">内存使用</div>
<div class="dashboard-card-icon" style="background-color: #28a745;">
<i class="mdi mdi-memory"></i>
</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-value">12.4GB</div>
<div class="dashboard-stat-label">
<span class="trend-up"><i class="mdi mdi-arrow-up"></i> 2.1GB</span> 较上周
</div>
</div>
<div id="memory-chart" class="dashboard-chart" style="height: 100px;"></div>
</div>
<!-- 更多卡片和图表... -->
</div>不同布局方式
数据看板支持多种布局方式，可以根据需要灵活调整卡片大小和位置。
双列布局
CPU使用率
68%
内存使用
12.4GB
3-2-1布局
CPU使用率
68%
内存使用
12.4GB
存储使用
4.8TB
网络流量
3.2TB
负载均衡
28ms
资源分配概览
不规则布局
服务器负载
CPU使用率
68%
5%
内存使用
12.4GB
2.1GB
存储
4.8TB
网络
3.2TB
实例统计
14
运行中云实例
资源使用分布
HTML
<!-- 双列布局 -->
<div class="dashboard" style="grid-template-columns: repeat(2, 1fr);">
<div class="dashboard-card col-1">
<div class="dashboard-card-header">
<div class="dashboard-card-title">CPU使用率</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-value">68%</div>
</div>
</div>
<div class="dashboard-card col-1">
<div class="dashboard-card-header">
<div class="dashboard-card-title">内存使用</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-value">12.4GB</div>
</div>
</div>
</div>
<!-- 3-2-1布局 -->
<div class="dashboard" style="grid-template-columns: repeat(6, 1fr);">
<div class="dashboard-card col-2">
<div class="dashboard-card-header">
<div class="dashboard-card-title">CPU使用率</div>
</div>
<div class="dashboard-stat">
<div class="dashboard-stat-value">68%</div>
</div>
</div>
<!-- 其他卡片... -->
</div>
<!-- 不规则布局 -->
<div class="dashboard" style="grid-template-columns: repeat(4, 1fr);">
<div class="dashboard-card col-2 row-2">
<div class="dashboard-card-header">
<div class="dashboard-card-title">服务器负载</div>
</div>
<div id="server-load-mini-chart" class="dashboard-chart" style="height: 200px;"></div>
</div>
<!-- 其他卡片... -->
</div>不同类型图表
数据看板支持多种类型的图表，包括折线图、柱状图、饼图等，适用于展示不同维度的数据。
CPU负载趋势（折线图）
区域流量统计（柱状图）
存储容量分配（饼图）
系统健康度（仪表盘）
JavaScript
// 使用ECharts绘制各种图表示例
// 折线图示例
function createLineChart() {
const chartDom = document.getElementById('line-chart-example');
const myChart = echarts.init(chartDom);
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(10, 20, 50, 0.8)',
borderColor: 'rgba(60, 100, 255, 0.2)',
textStyle: {
color: 'rgba(200, 220, 255, 0.9)'
},
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(60, 100, 255, 0.5)',
width: 1,
type: 'dashed'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(60, 100, 255, 0.1)',
type: 'dashed'
}
},
axisLabel: {
color: 'rgba(200, 220, 255, 0.7)'
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%',
color: 'rgba(200, 220, 255, 0.7)'
},
splitLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.1)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
}
},
series: [
{
name: 'CPU负载',
type: 'line',
data: [42, 55, 68, 63, 72, 58, 43],
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
]),
shadowColor: 'rgba(0, 150, 255, 0.3)',
shadowBlur: 10
},
itemStyle: {
color: '#00c6ff',
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
scale: true,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 150, 255, 0.8)'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 198, 255, 0.6)' },
{ offset: 0.5, color: 'rgba(0, 114, 255, 0.3)' },
{ offset: 1, color: 'rgba(0, 114, 255, 0.1)' }
]),
shadowColor: 'rgba(0, 150, 255, 0.2)',
shadowBlur: 20
},
animationDuration: 2000,
animationEasing: 'cubicInOut'
}
]
};
myChart.setOption(option);
return myChart;
}
// 柱状图示例
function createBarChart() {
const chartDom = document.getElementById('bar-chart-example');
const myChart = echarts.init(chartDom);
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0, 150, 255, 0.1)'
}
},
backgroundColor: 'rgba(10, 20, 50, 0.8)',
borderColor: 'rgba(60, 100, 255, 0.2)',
textStyle: {
color: 'rgba(200, 220, 255, 0.9)'
}
},
legend: {
data: ['出站流量', '入站流量'],
textStyle: {
color: 'rgba(200, 220, 255, 0.8)'
},
icon: 'roundRect',
itemWidth: 12,
itemHeight: 8
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['华北', '华东', '华南', '西南', '西北', '东北'],
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
},
axisLabel: {
color: 'rgba(200, 220, 255, 0.7)'
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} GB',
color: 'rgba(200, 220, 255, 0.7)'
},
splitLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.1)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
}
},
series: [
{
name: '出站流量',
type: 'bar',
data: [320, 480, 410, 230, 180, 160],
barWidth: '30%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
]),
borderRadius: [4, 4, 0, 0],
shadowColor: 'rgba(0, 150, 255, 0.3)',
shadowBlur: 10
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0072ff' },
{ offset: 1, color: '#00c6ff' }
])
}
},
animationDuration: 2000,
animationEasing: 'elasticOut'
},
{
name: '入站流量',
type: 'bar',
data: [280, 420, 380, 210, 150, 130],
barWidth: '30%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2af598' },
{ offset: 1, color: '#009efd' }
]),
borderRadius: [4, 4, 0, 0],
shadowColor: 'rgba(42, 245, 152, 0.3)',
shadowBlur: 10
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#009efd' },
{ offset: 1, color: '#2af598' }
])
}
},
animationDelay: 300,
animationDuration: 2000,
animationEasing: 'elasticOut'
}
]
};
myChart.setOption(option);
return myChart;
}
// 饼图示例
function createPieChart() {
const chartDom = document.getElementById('pie-chart-example');
const myChart = echarts.init(chartDom);
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} TB ({d}%)',
backgroundColor: 'rgba(10, 20, 50, 0.8)',
borderColor: 'rgba(60, 100, 255, 0.2)',
textStyle: {
color: 'rgba(200, 220, 255, 0.9)'
}
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: {
color: 'rgba(200, 220, 255, 0.8)'
},
icon: 'roundRect',
itemWidth: 12,
itemHeight: 8,
data: ['对象存储', '块存储', '文件存储', '归档存储', '备份空间']
},
series: [
{
name: '存储容量',
type: 'pie',
radius: ['50%', '70%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: 'rgba(10, 20, 50, 0.5)',
borderWidth: 2,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
label: {
show: false,
position: 'center',
formatter: '{b}\n{d}%',
fontSize: 14,
fontWeight: 'bold',
color: 'rgba(200, 220, 255, 0.9)'
},
emphasis: {
label: {
show: true
},
itemStyle: {
shadowBlur: 30,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
},
labelLine: {
show: false
},
data: [
{
value: 1548,
name: '对象存储',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
])
}
},
{
value: 835,
name: '块存储',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2af598' },
{ offset: 1, color: '#009efd' }
])
}
},
{
value: 580,
name: '文件存储',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#4a00e0' },
{ offset: 1, color: '#8e2de2' }
])
}
},
{
value: 484,
name: '归档存储',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#ffb347' },
{ offset: 1, color: '#ffcc33' }
])
}
},
{
value: 300,
name: '备份空间',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f83600' },
{ offset: 1, color: '#f9d423' }
])
}
}
],
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return idx * 200;
}
}
]
};
myChart.setOption(option);
return myChart;
}
// 仪表盘示例
function createGaugeChart() {
const chartDom = document.getElementById('gauge-chart-example');
const myChart = echarts.init(chartDom);
const option = {
backgroundColor: 'transparent',
tooltip: {
formatter: '{a}
{b} : {c}%',
backgroundColor: 'rgba(10, 20, 50, 0.8)',
borderColor: 'rgba(60, 100, 255, 0.2)',
textStyle: {
color: 'rgba(200, 220, 255, 0.9)'
}
},
series: [
{
name: '系统状态',
type: 'gauge',
radius: '90%',
startAngle: 180,
endAngle: 0,
center: ['50%', '75%'],
min: 0,
max: 100,
splitNumber: 10,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.3, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#f83600' },
{ offset: 1, color: '#f9d423' }
])],
[0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ffb347' },
{ offset: 1, color: '#ffcc33' }
])],
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#2af598' },
{ offset: 1, color: '#009efd' }
])]
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '12%',
width: 20,
offsetCenter: [0, '-60%'],
itemStyle: {
color: '#00c6ff',
shadowColor: 'rgba(0, 150, 255, 0.5)',
shadowBlur: 10
}
},
axisTick: {
length: 12,
lineStyle: {
color: 'auto',
width: 2,
shadowColor: 'rgba(255, 255, 255, 0.3)',
shadowBlur: 10
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 3,
shadowColor: 'rgba(255, 255, 255, 0.3)',
shadowBlur: 10
}
},
axisLabel: {
color: 'rgba(200, 220, 255, 0.9)',
fontSize: 12,
distance: -60,
formatter: function (value) {
if (value === 0 || value === 100) {
return '';
}
return value;
}
},
title: {
offsetCenter: [0, '-20%'],
fontSize: 16,
color: 'rgba(200, 220, 255, 0.9)'
},
detail: {
fontSize: 30,
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value) + '%';
},
color: 'rgba(200, 220, 255, 0.9)'
},
data: [
{
value: 85,
name: '系统健康度'
}
],
animationDuration: 3000,
animationEasing: 'bounceOut'
}
]
};
myChart.setOption(option);
return myChart;
}
// 实时数据更新图表实现
function initRealtimeChart() {
const chartDom = document.getElementById('realtime-chart');
if (!chartDom) {
console.error('实时图表容器未找到');
return null;
}
const myChart = echarts.init(chartDom);
// 初始化空数据
const categories = [];
const cpuData = [];
const memoryData = [];
const networkData = [];
const now = new Date();
for (let i = 20; i >= 0; i--) {
const time = new Date(now - i * 1000);
categories.push(time.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
cpuData.push(Math.floor(40 + Math.random() * 40));
memoryData.push(Math.floor(50 + Math.random() * 30));
networkData.push(Math.floor(30 + Math.random() * 40));
}
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: 'rgba(10, 20, 50, 0.8)'
}
},
backgroundColor: 'rgba(10, 20, 50, 0.8)',
borderColor: 'rgba(60, 100, 255, 0.2)',
textStyle: {
color: 'rgba(200, 220, 255, 0.9)'
}
},
legend: {
data: ['CPU', '内存', '网络'],
textStyle: {
color: 'rgba(200, 220, 255, 0.8)'
},
icon: 'roundRect',
itemWidth: 12,
itemHeight: 8
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: categories,
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
},
axisLabel: {
color: 'rgba(200, 220, 255, 0.7)'
}
},
yAxis: {
type: 'value',
max: 100,
axisLabel: {
formatter: '{value}%',
color: 'rgba(200, 220, 255, 0.7)'
},
splitLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.1)',
type: 'dashed'
}
},
axisLine: {
lineStyle: {
color: 'rgba(60, 100, 255, 0.3)'
}
}
},
series: [
{
name: 'CPU',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
sampling: 'average',
showSymbol: false,
data: cpuData,
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
]),
shadowColor: 'rgba(0, 150, 255, 0.3)',
shadowBlur: 10
},
itemStyle: {
color: '#00c6ff',
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
scale: true,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 150, 255, 0.8)'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
{ offset: 0.5, color: 'rgba(0, 114, 255, 0.2)' },
{ offset: 1, color: 'rgba(0, 114, 255, 0)' }
])
},
animationDuration: 2000,
animationEasing: 'cubicInOut'
},
{
name: '内存',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
sampling: 'average',
showSymbol: false,
data: memoryData,
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#2af598' },
{ offset: 1, color: '#009efd' }
]),
shadowColor: 'rgba(42, 245, 152, 0.3)',
shadowBlur: 10
},
itemStyle: {
color: '#2af598',
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
scale: true,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(42, 245, 152, 0.8)'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(42, 245, 152, 0.5)' },
{ offset: 0.5, color: 'rgba(0, 158, 253, 0.2)' },
{ offset: 1, color: 'rgba(0, 158, 253, 0)' }
])
},
animationDelay: 300,
animationDuration: 2000,
animationEasing: 'cubicInOut'
},
{
name: '网络',
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 8,
sampling: 'average',
showSymbol: false,
data: networkData,
lineStyle: {
width: 3,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#4a00e0' },
{ offset: 1, color: '#8e2de2' }
]),
shadowColor: 'rgba(74, 0, 224, 0.3)',
shadowBlur: 10
},
itemStyle: {
color: '#4a00e0',
borderColor: '#fff',
borderWidth: 2
},
emphasis: {
scale: true,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(74, 0, 224, 0.8)'
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(74, 0, 224, 0.5)' },
{ offset: 0.5, color: 'rgba(142, 45, 226, 0.2)' },
{ offset: 1, color: 'rgba(142, 45, 226, 0)' }
])
},
animationDelay: 600,
animationDuration: 2000,
animationEasing: 'cubicInOut'
}
]
};
myChart.setOption(option);
return myChart;
}
// 模拟获取服务器实时数据
function fetchServerData() {
return {
timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
cpu: Math.floor(40 + Math.random() * 40), // CPU使用率在40-80%之间波动
memory: Math.floor(50 + Math.random() * 30), // 内存使用率在50-80%之间波动
network: Math.floor(30 + Math.random() * 40) // 网络使用率在30-70%之间波动
};
}
// 更新图表数据
function updateChartData() {
if (!realtimeChart) {
console.error('实时图表未初始化');
return;
}
const serverData = fetchServerData();
// 更新"最后更新"时间
document.getElementById('last-updated').textContent = `最后更新: ${serverData.timestamp}`;
// 获取当前配置
const option = realtimeChart.getOption();
// 更新X轴类别
option.xAxis[0].data.shift();
option.xAxis[0].data.push(serverData.timestamp);
// 更新各个系列的数据
option.series[0].data.shift();
option.series[0].data.push(serverData.cpu);
option.series[1].data.shift();
option.series[1].data.push(serverData.memory);
option.series[2].data.shift();
option.series[2].data.push(serverData.network);
// 应用更新后的配置
realtimeChart.setOption(option);
}
// 开始实时更新
function startRealtimeUpdate() {
if (!updateInterval) {
updateInterval = setInterval(updateChartData, updateFrequency);
document.getElementById('start-update-btn').style.display = 'none';
document.getElementById('stop-update-btn').style.display = 'inline-flex';
}
}
// 停止实时更新
function stopRealtimeUpdate() {
if (updateInterval) {
clearInterval(updateInterval);
updateInterval = null;
document.getElementById('start-update-btn').style.display = 'inline-flex';
document.getElementById('stop-update-btn').style.display = 'none';
}
}
// 修改CSS为科技感风格
document.head.insertAdjacentHTML('beforeend', `
`);
// 确保在DOM加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
// 先初始化代码高亮和复制功能
hljs.highlightAll();
const clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
const originalText = e.trigger.innerHTML;
e.trigger.innerHTML = ' 已复制';
setTimeout(function() {
e.trigger.innerHTML = originalText;
}, 2000);
e.clearSelection();
});
// 初始化所有图表
initializeAllCharts();
// 初始化示例图表
const lineChart = createLineChart();
const barChart = createBarChart();
const pieChart = createPieChart();
const gaugeChart = createGaugeChart();
// 初始化实时图表
const realtimeChart = initRealtimeChart();
// 绑定按钮事件
document.getElementById('start-update-btn').addEventListener('click', startRealtimeUpdate);
document.getElementById('stop-update-btn').addEventListener('click', stopRealtimeUpdate);
// 模拟自动点击开始按钮，展示效果
setTimeout(() => {
const startBtn = document.getElementById('start-update-btn');
if (startBtn) {
startBtn.click();
}
}, 1000);
});
实时数据更新
数据看板支持实时更新功能，可以定期从服务器拉取最新数据并更新图表展示。
实时服务器性能监控
最后更新: 刚刚
JavaScript
// 实时数据更新示例
let realtimeChart = null;
let updateInterval = null;
const updateFrequency = 2000; // 更新频率，毫秒
let lastData = []; // 用于存储历史数据
const maxDataPoints = 20; // 最大数据点数
// 初始化实时图表
function initRealtimeChart() {
const chartDom = document.getElementById('realtime-chart');
realtimeChart = echarts.init(chartDom);
// 初始化空数据
const categories = [];
const cpuData = [];
const memoryData = [];
const networkData = [];
for (let i = 0; i < maxDataPoints; i++) {
categories.push('');
cpuData.push(0);
memoryData.push(0);
networkData.push(0);
}
lastData = [cpuData, memoryData, networkData];
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['CPU', '内存', '网络']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: categories
},
yAxis: {
type: 'value',
max: 100,
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'CPU',
type: 'line',
smooth: true,
data: cpuData,
itemStyle: {
color: '#2468f2'
}
},
{
name: '内存',
type: 'line',
smooth: true,
data: memoryData,
itemStyle: {
color: '#28a745'
}
},
{
name: '网络',
type: 'line',
smooth: true,
data: networkData,
itemStyle: {
color: '#17a2b8'
}
}
]
};
realtimeChart.setOption(option);
return realtimeChart;
}
// 模拟获取服务器实时数据
function fetchServerData() {
// 实际应用中，这里应该是从API获取实时数据
return {
timestamp: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }),
cpu: Math.floor(40 + Math.random() * 40), // CPU使用率在40-80%之间波动
memory: Math.floor(50 + Math.random() * 30), // 内存使用率在50-80%之间波动
network: Math.floor(30 + Math.random() * 40) // 网络使用率在30-70%之间波动
};
}
// 更新图表数据
function updateChartData() {
const serverData = fetchServerData();
// 更新"最后更新"时间
document.getElementById('last-updated').textContent = `最后更新: ${serverData.timestamp}`;
// 获取当前配置
const option = realtimeChart.getOption();
// 更新X轴类别
option.xAxis[0].data.shift();
option.xAxis[0].data.push(serverData.timestamp);
// 更新各个系列的数据
option.series[0].data.shift();
option.series[0].data.push(serverData.cpu);
option.series[1].data.shift();
option.series[1].data.push(serverData.memory);
option.series[2].data.shift();
option.series[2].data.push(serverData.network);
// 应用更新后的配置
realtimeChart.setOption(option);
}
// 开始实时更新
function startRealtimeUpdate() {
if (!updateInterval) {
updateInterval = setInterval(updateChartData, updateFrequency);
document.getElementById('start-update-btn').style.display = 'none';
document.getElementById('stop-update-btn').style.display = 'inline-flex';
}
}
// 停止实时更新
function stopRealtimeUpdate() {
if (updateInterval) {
clearInterval(updateInterval);
updateInterval = null;
document.getElementById('start-update-btn').style.display = 'inline-flex';
document.getElementById('stop-update-btn').style.display = 'none';
}
}
// 初始化按钮事件
document.getElementById('start-update-btn').addEventListener('click', startRealtimeUpdate);
document.getElementById('stop-update-btn').addEventListener('click', stopRealtimeUpdate);API 文档
数据看板组件的属性、类名和方法的详细说明。
CSS 类名
| 类名 | 描述 | 默认值 |
|---|---|---|
| dashboard | 数据看板的容器 | - |
| dashboard-card | 数据看板中的单个卡片 | - |
| dashboard-card-header | 卡片的头部区域 | - |
| dashboard-card-title | 卡片的标题 | - |
| dashboard-card-icon | 卡片的图标 | - |
| dashboard-stat | 统计数值的容器 | - |
| dashboard-stat-value | 统计的数值 | - |
| dashboard-stat-label | 统计的标签 | - |
| dashboard-chart | 图表容器 | - |
| dashboard-table | 表格容器 | - |
| dashboard-status | 状态标签 | - |
| status-healthy | 健康状态样式 | - |
| status-warning | 警告状态样式 | - |
| status-danger | 危险状态样式 | - |
| trend-up | 上升趋势样式 | - |
| trend-down | 下降趋势样式 | - |
| col-* | 列宽辅助类（1-12） | - |
| row-* | 行高辅助类 | - |
方法
| 方法名 | 描述 | 参数 |
|---|---|---|
| initializeCharts() | 初始化所有图表 | - |
| createLineChart(elementId, data) | 创建折线图 | elementId: 图表容器ID, data: 图表数据 |
| createBarChart(elementId, data) | 创建柱状图 | elementId: 图表容器ID, data: 图表数据 |
| createPieChart(elementId, data) | 创建饼图 | elementId: 图表容器ID, data: 图表数据 |
| createGaugeChart(elementId, data) | 创建仪表盘 | elementId: 图表容器ID, data: 图表数据 |
| updateChartData(chartInstance, newData) | 更新图表数据 | chartInstance: 图表实例, newData: 新的数据 |
| refreshDashboard() | 刷新整个看板的数据 | - |
| startAutoRefresh(interval) | 开始自动刷新 | interval: 刷新间隔（毫秒） |
| stopAutoRefresh() | 停止自动刷新 | - |