统计模块中任务分析静态页面
This commit is contained in:
yis
parent
ea7c131298
commit
4dffec016a
633
src/views/service/task.html
Normal file
633
src/views/service/task.html
Normal file
@ -0,0 +1,633 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>任务监控数据可视化平台</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--primary-blue: #3A86FF;
|
||||||
|
--alert-red: #FF4D6D;
|
||||||
|
--success-green: #06D6A0;
|
||||||
|
--neutral-gray: #8E9AAF;
|
||||||
|
--light-gray: #F8F9FA;
|
||||||
|
--dark-gray: #343A40;
|
||||||
|
--border-radius: 8px;
|
||||||
|
--shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-container {
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 24px;
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 6px 12px rgba(58, 134, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 24px;
|
||||||
|
top: 24px;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(1)::after {
|
||||||
|
background: rgba(6, 214, 160, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(2)::after {
|
||||||
|
background: rgba(255, 77, 109, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(3)::after {
|
||||||
|
background: rgba(58, 134, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(4)::after {
|
||||||
|
background: rgba(142, 154, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 12px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(1) .kpi-value {
|
||||||
|
color: var(--success-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(2) .kpi-value {
|
||||||
|
color: var(--alert-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(3) .kpi-value {
|
||||||
|
color: var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-card:nth-child(4) .kpi-value {
|
||||||
|
color: var(--neutral-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-change {
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-up {
|
||||||
|
color: var(--success-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trend-down {
|
||||||
|
color: var(--alert-red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background: var(--light-gray);
|
||||||
|
padding: 24px;
|
||||||
|
margin: 0 30px 20px;
|
||||||
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-gray);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dual-column {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
padding: 0 30px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-range-picker {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--dark-gray);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-selector {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--dark-gray);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-holder {
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flatpickr 样式覆盖 */
|
||||||
|
.flatpickr-calendar {
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flatpickr-day.selected {
|
||||||
|
background: var(--primary-blue);
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="dashboard-container">
|
||||||
|
<!-- 顶部KPI区域 -->
|
||||||
|
<div class="kpi-grid">
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div>实时任务完成率</div>
|
||||||
|
<div class="kpi-value">82.5%</div>
|
||||||
|
<div class="trend-change trend-up">
|
||||||
|
<iconify-icon icon="mingcute:arrow-up-line" style="margin-right: 4px;"></iconify-icon>
|
||||||
|
较昨日 ↑2.1%
|
||||||
|
</div>
|
||||||
|
<iconify-icon icon="material-symbols:data-usage"
|
||||||
|
style="position: absolute; right: 38px; top: 38px; color: var(--success-green); font-size: 24px;"></iconify-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div>关键任务失败率</div>
|
||||||
|
<div class="kpi-value">5.2%</div>
|
||||||
|
<div class="trend-change trend-down">
|
||||||
|
<iconify-icon icon="mingcute:arrow-down-line" style="margin-right: 4px;"></iconify-icon>
|
||||||
|
同比 ↓1.3%
|
||||||
|
</div>
|
||||||
|
<iconify-icon icon="ic:outline-schedule"
|
||||||
|
style="position: absolute; right: 38px; top: 38px; color: var(--alert-red); font-size: 24px;"></iconify-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div>平均任务周期</div>
|
||||||
|
<div class="kpi-value">4.8h</div>
|
||||||
|
<div class="trend-change">
|
||||||
|
<iconify-icon icon="mingcute:arrow-right-line"
|
||||||
|
style="margin-right: 4px; color: var(--neutral-gray);"></iconify-icon>
|
||||||
|
行业平均 5.2h
|
||||||
|
</div>
|
||||||
|
<iconify-icon icon="mdi:timer-outline"
|
||||||
|
style="position: absolute; right: 38px; top: 38px; color: var(--primary-blue); font-size: 24px;"></iconify-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="kpi-card">
|
||||||
|
<div>资源闲置率</div>
|
||||||
|
<div class="kpi-value">12.3%</div>
|
||||||
|
<div class="trend-change trend-down">
|
||||||
|
<iconify-icon icon="mingcute:arrow-down-line" style="margin-right: 4px;"></iconify-icon>
|
||||||
|
周同比 ↓3.5%
|
||||||
|
</div>
|
||||||
|
<iconify-icon icon="mdi:server-off"
|
||||||
|
style="position: absolute; right: 38px; top: 38px; color: var(--neutral-gray); font-size: 24px;"></iconify-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中部趋势图 -->
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="chart-title">
|
||||||
|
<span>任务完成趋势分析</span>
|
||||||
|
<div class="date-range-picker" id="dateRangePicker">
|
||||||
|
<iconify-icon icon="material-symbols:calendar-month"
|
||||||
|
style="color: var(--neutral-gray); margin-right: 8px;"></iconify-icon>
|
||||||
|
<span id="dateRangeDisplay">2023年7月1日 - 2023年7月31日</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="trendChart" class="chart-holder"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部双列图表 -->
|
||||||
|
<div class="dual-column">
|
||||||
|
<!-- 左侧饼图 -->
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="chart-title">任务状态分布</div>
|
||||||
|
<div id="pieChart" class="chart-holder"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧堆叠柱状图 -->
|
||||||
|
<div class="chart-container">
|
||||||
|
<div class="chart-title">
|
||||||
|
<span>本周24小时任务状态分布</span>
|
||||||
|
<select id="daySelector" class="day-selector">
|
||||||
|
<option value="0">周一</option>
|
||||||
|
<option value="1">周二</option>
|
||||||
|
<option value="2">周三</option>
|
||||||
|
<option value="3">周四</option>
|
||||||
|
<option value="4">周五</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div id="stackedBarChart" class="chart-holder"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 模拟数据生成器
|
||||||
|
const generateTrendData = (startDate, endDate) => {
|
||||||
|
const start = new Date(startDate);
|
||||||
|
const end = new Date(endDate);
|
||||||
|
const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
|
||||||
|
|
||||||
|
const labels = [];
|
||||||
|
const completed = [];
|
||||||
|
const inProgress = [];
|
||||||
|
const notStarted = [];
|
||||||
|
const failed = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < days; i++) {
|
||||||
|
const date = new Date(start);
|
||||||
|
date.setDate(start.getDate() + i);
|
||||||
|
labels.push(`${date.getMonth() + 1}/${date.getDate()}`);
|
||||||
|
|
||||||
|
// 生成有波动趋势的数据
|
||||||
|
const baseCompleted = 300 + Math.sin(i / 3) * 50 + Math.random() * 30;
|
||||||
|
const baseInProgress = 150 + Math.cos(i / 2) * 30 + Math.random() * 20;
|
||||||
|
const baseNotStarted = 80 + Math.sin(i / 4) * 20 + Math.random() * 15;
|
||||||
|
const baseFailed = 10 + Math.abs(Math.sin(i / 5)) * 8 + Math.random() * 5;
|
||||||
|
|
||||||
|
completed.push(Math.round(baseCompleted));
|
||||||
|
inProgress.push(Math.round(baseInProgress));
|
||||||
|
notStarted.push(Math.round(baseNotStarted));
|
||||||
|
failed.push(Math.round(baseFailed));
|
||||||
|
}
|
||||||
|
|
||||||
|
return { labels, completed, inProgress, notStarted, failed };
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化日期选择器
|
||||||
|
const datePicker = flatpickr("#dateRangePicker", {
|
||||||
|
mode: "range",
|
||||||
|
dateFormat: "Y-m-d",
|
||||||
|
defaultDate: ["2023-07-01", "2023-07-31"],
|
||||||
|
locale: {
|
||||||
|
rangeSeparator: " 至 ",
|
||||||
|
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||||||
|
weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||||
|
},
|
||||||
|
onChange: function (selectedDates, dateStr, instance) {
|
||||||
|
if (selectedDates.length === 2) {
|
||||||
|
const startDate = selectedDates[0];
|
||||||
|
const endDate = selectedDates[1];
|
||||||
|
|
||||||
|
// 更新显示
|
||||||
|
const startStr = `${startDate.getFullYear()}年${startDate.getMonth() + 1}月${startDate.getDate()}日`;
|
||||||
|
const endStr = `${endDate.getFullYear()}年${endDate.getMonth() + 1}月${endDate.getDate()}日`;
|
||||||
|
document.getElementById('dateRangeDisplay').textContent = `${startStr} - ${endStr}`;
|
||||||
|
|
||||||
|
// 生成新数据并更新图表
|
||||||
|
const newData = generateTrendData(startDate, endDate);
|
||||||
|
renderTrendChart(newData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化图表
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// 1. 任务趋势折线图
|
||||||
|
const trendChart = echarts.init(document.getElementById('trendChart'));
|
||||||
|
let currentTrendData = generateTrendData(new Date(2023, 6, 1), new Date(2023, 6, 31));
|
||||||
|
|
||||||
|
const renderTrendChart = (data) => {
|
||||||
|
const option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' },
|
||||||
|
formatter: params => {
|
||||||
|
let result = `${params[0].axisValue}<br>`;
|
||||||
|
params.forEach(param => {
|
||||||
|
result += `${param.marker} ${param.seriesName}: <strong>${param.value}</strong><br>`;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['已完成', '进行中', '未进行', '任务失败'],
|
||||||
|
bottom: 0,
|
||||||
|
textStyle: { color: '#8E9AAF' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '15%',
|
||||||
|
top: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: data.labels,
|
||||||
|
axisLine: { lineStyle: { color: '#e2e8f0' } },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#8E9AAF',
|
||||||
|
interval: Math.max(1, Math.floor(data.labels.length / 7) - 1) // 动态间隔
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: { show: true, lineStyle: { color: '#e2e8f0' } },
|
||||||
|
splitLine: { lineStyle: { color: '#f1f3f5', type: 'dashed' } },
|
||||||
|
axisLabel: { color: '#8E9AAF' }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '已完成',
|
||||||
|
type: 'line',
|
||||||
|
data: data.completed,
|
||||||
|
lineStyle: { width: 3, color: '#06D6A0' },
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(6, 214, 160, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(6, 214, 160, 0.05)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '进行中',
|
||||||
|
type: 'line',
|
||||||
|
data: data.inProgress,
|
||||||
|
lineStyle: { width: 3, color: '#3A86FF' },
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(58, 134, 255, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(58, 134, 255, 0.05)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '未进行',
|
||||||
|
type: 'line',
|
||||||
|
data: data.notStarted,
|
||||||
|
lineStyle: { width: 3, color: '#8E9AAF' },
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(142, 154, 175, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(142, 154, 175, 0.05)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '任务失败',
|
||||||
|
type: 'line',
|
||||||
|
data: data.failed,
|
||||||
|
lineStyle: { width: 3, color: '#FF4D6D' },
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
smooth: true,
|
||||||
|
areaStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: 'rgba(255, 77, 109, 0.3)' },
|
||||||
|
{ offset: 1, color: 'rgba(255, 77, 109, 0.05)' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
trendChart.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
renderTrendChart(currentTrendData);
|
||||||
|
|
||||||
|
// 2. 饼图 - 当天任务状态分布
|
||||||
|
const pieChart = echarts.init(document.getElementById('pieChart'));
|
||||||
|
const pieOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 10,
|
||||||
|
top: 'center',
|
||||||
|
textStyle: { color: '#8E9AAF' }
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
center: ['40%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 8,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
formatter: '{b}: {c}'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
data: [
|
||||||
|
{ value: 420, name: '已完成', itemStyle: { color: '#06D6A0' } },
|
||||||
|
{ value: 185, name: '进行中', itemStyle: { color: '#3A86FF' } },
|
||||||
|
{ value: 98, name: '未进行', itemStyle: { color: '#8E9AAF' } },
|
||||||
|
{ value: 37, name: '任务失败', itemStyle: { color: '#FF4D6D' } }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
pieChart.setOption(pieOption);
|
||||||
|
|
||||||
|
// 3. 堆叠柱状图
|
||||||
|
const stackedBarChart = echarts.init(document.getElementById('stackedBarChart'));
|
||||||
|
const timeLabels = Array.from({ length: 24 }, (_, i) => `${i}:00`);
|
||||||
|
|
||||||
|
// 模拟24小时不同状态的任务数据
|
||||||
|
const generateDayData = () => {
|
||||||
|
return {
|
||||||
|
completed: Array.from({ length: 24 }, (_, i) => {
|
||||||
|
// 白天任务多，晚上任务少的模式
|
||||||
|
const base = 30 + Math.sin(i / 24 * Math.PI) * 25;
|
||||||
|
return Math.round(base + Math.random() * 15);
|
||||||
|
}),
|
||||||
|
inProgress: Array.from({ length: 24 }, (_, i) => {
|
||||||
|
const base = 20 + Math.abs(Math.cos(i / 12 * Math.PI)) * 15;
|
||||||
|
return Math.round(base + Math.random() * 10);
|
||||||
|
}),
|
||||||
|
notStarted: Array.from({ length: 24 }, (_, i) => {
|
||||||
|
return Math.round(10 + Math.random() * 8);
|
||||||
|
}),
|
||||||
|
failed: Array.from({ length: 24 }, (_, i) => {
|
||||||
|
// 凌晨时段失败率略高
|
||||||
|
const nightFactor = i < 6 || i > 22 ? 1.5 : 1;
|
||||||
|
return Math.round((Math.random() * 5 + 2) * nightFactor);
|
||||||
|
})
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 为一周的每一天生成数据
|
||||||
|
const weekData = Array.from({ length: 5 }, () => generateDayData());
|
||||||
|
|
||||||
|
const updateStackedBarChart = (dayIndex) => {
|
||||||
|
const dayData = weekData[dayIndex];
|
||||||
|
const stackedBarOption = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { type: 'shadow' },
|
||||||
|
formatter: params => {
|
||||||
|
let total = 0;
|
||||||
|
params.forEach(item => total += item.value);
|
||||||
|
return params.map(item =>
|
||||||
|
`${item.marker} ${item.seriesName}: ${item.value} (${Math.round(item.value / total * 100)}%)`
|
||||||
|
).join('<br>');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['已完成', '进行中', '未进行', '任务失败'],
|
||||||
|
bottom: 0,
|
||||||
|
textStyle: { color: '#8E9AAF' }
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '15%',
|
||||||
|
top: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: timeLabels,
|
||||||
|
axisLabel: {
|
||||||
|
interval: 1,
|
||||||
|
rotate: 45,
|
||||||
|
color: '#8E9AAF'
|
||||||
|
},
|
||||||
|
axisLine: { lineStyle: { color: '#e2e8f0' } }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: { show: true, lineStyle: { color: '#e2e8f0' } },
|
||||||
|
splitLine: { lineStyle: { color: '#f1f3f5', type: 'dashed' } },
|
||||||
|
axisLabel: { color: '#8E9AAF' }
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '已完成',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
emphasis: { focus: 'series' },
|
||||||
|
data: dayData.completed,
|
||||||
|
itemStyle: { color: '#06D6A0' },
|
||||||
|
barWidth: '60%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '进行中',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
emphasis: { focus: 'series' },
|
||||||
|
data: dayData.inProgress,
|
||||||
|
itemStyle: { color: '#3A86FF' },
|
||||||
|
barWidth: '60%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '未进行',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
emphasis: { focus: 'series' },
|
||||||
|
data: dayData.notStarted,
|
||||||
|
itemStyle: { color: '#8E9AAF' },
|
||||||
|
barWidth: '60%'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '任务失败',
|
||||||
|
type: 'bar',
|
||||||
|
stack: '总量',
|
||||||
|
emphasis: { focus: 'series' },
|
||||||
|
data: dayData.failed,
|
||||||
|
itemStyle: { color: '#FF4D6D' },
|
||||||
|
barWidth: '60%'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
stackedBarChart.setOption(stackedBarOption);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化显示周一的数据
|
||||||
|
updateStackedBarChart(0);
|
||||||
|
|
||||||
|
// 添加日期选择器事件监听
|
||||||
|
document.getElementById('daySelector').addEventListener('change', function (e) {
|
||||||
|
updateStackedBarChart(parseInt(e.target.value));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 窗口大小变化时重绘图表
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
trendChart.resize();
|
||||||
|
pieChart.resize();
|
||||||
|
stackedBarChart.resize();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user