import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material
Page {
id: root
// 统计数据和配置
property var collegeStats: [
{college: "计算机学院", count: 120, color: "#1e88e5"},
{college: "经济管理学院", count: 85, color: "#0d47a1"},
{college: "外语学院", count: 65, color: "#64b5f6"},
{college: "艺术学院", count: 45, color: "#90caf9"}
]
property var hometownStats: [
{hometown: "北京", count: 50, color: "#1e88e5"},
{hometown: "上海", count: 45, color: "#0d47a1"},
{hometown: "广州", count: 38, color: "#64b5f6"},
{hometown: "深圳", count: 35, color: "#90caf9"},
{hometown: "杭州", count: 28, color: "#42a5f5"}
]
property var genderStats: {
"male": {count: 210, color: "#64b5f6"},
"female": {count: 125, color: "#f06292"}
}
property int maxCount: hometownStats.reduce((max, item) => Math.max(max, item.count), 0)
property int activeTab: 0
property var hoveredItem: null
// 卡片式布局
ColumnLayout {
anchors.fill: parent
anchors.margins: 24
spacing: 20
// 标题区域
Rectangle {
Layout.fillWidth: true
height: 80
radius: 12
gradient: Gradient {
GradientStop { position: 0.0; color: "#6a5acd" }
GradientStop { position: 1.0; color: "#4b0082" }
}
Label {
anchors.centerIn: parent
text: "📊 数据统计"
font {
bold: true
pixelSize: 32
family: "Microsoft YaHei"
}
color: "white"
}
}
// 选项卡区域
RowLayout {
Layout.fillWidth: true
spacing: 2
Repeater {
model: ["学院分布", "籍贯分布", "性别比例"]
delegate: Rectangle {
Layout.fillWidth: true
height: 48
radius: 6
color: activeTab === index ? "#6a5acd" : "#3a3a6a"
border.color: "#4a4a7a"
Behavior on color {
ColorAnimation { duration: 300 }
}
Label {
anchors.centerIn: parent
text: modelData
font.bold: activeTab === index
font.pixelSize: 16
color: "white"
}
MouseArea {
anchors.fill: parent
onClicked: activeTab = index
}
// 底部指示器
Rectangle {
visible: activeTab === index
anchors.bottom: parent.bottom
width: parent.width
height: 3
color: "#ffcc00"
}
}
}
}
// 图表区域
Rectangle {
id: chartContainer
Layout.fillWidth: true
Layout.fillHeight: true
radius: 12
color: "#1e1e3a"
border.color: "#4a4a7a"
// 图表加载动画
Rectangle {
id: loadingIndicator
width: 40
height: 40
anchors.centerIn: parent
radius: 20
color: "#6a5acd"
visible: false
RotationAnimation on rotation {
from: 0; to: 360
duration: 1000
loops: Animation.Infinite
}
}
// 学院分布饼图
Canvas {
id: collegeCanvas
anchors.fill: parent
anchors.margins: 20
visible: activeTab === 0
onPaint: drawCollegeChart()
Component.onCompleted: requestPaint()
// 悬停交互
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPositionChanged: {
hoveredItem = findHoveredItem(mouseX, mouseY)
collegeCanvas.requestPaint()
}
onExited: {
hoveredItem = null
collegeCanvas.requestPaint()
}
}
}
// 籍贯分布柱状图
Canvas {
id: hometownCanvas
anchors.fill: parent
anchors.margins: 20
visible: activeTab === 1
onPaint: drawHometownChart()
Component.onCompleted: requestPaint()
// 悬停交互
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPositionChanged: {
hoveredItem = findHoveredBar(mouseX, mouseY)
hometownCanvas.requestPaint()
}
onExited: {
hoveredItem = null
hometownCanvas.requestPaint()
}
}
}
// 性别比例饼图
Canvas {
id: genderCanvas
anchors.fill: parent
anchors.margins: 20
visible: activeTab === 2
onPaint: drawGenderChart()
Component.onCompleted: requestPaint()
// 悬停交互
MouseArea {
anchors.fill: parent
hoverEnabled: true
onPositionChanged: {
hoveredItem = findHoveredGender(mouseX, mouseY)
genderCanvas.requestPaint()
}
onExited: {
hoveredItem = null
genderCanvas.requestPaint()
}
}
}
// 图表标题
Label {
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 16
text: {
if (activeTab === 0) return "各学院学生分布";
if (activeTab === 1) return "学生籍贯分布";
return "性别比例";
}
font.bold: true
font.pixelSize: 20
color: "#e0e0ff"
}
// 悬停提示框
Rectangle {
visible: hoveredItem !== null
x: hoveredItem ? hoveredItem.x - width/2 : 0
y: hoveredItem ? hoveredItem.y - height - 10 : 0
width: content.width + 20
height: content.height + 12
radius: 6
color: "#4a4a7a"
border.color: "#6a5acd"
Column {
id: content
anchors.centerIn: parent
spacing: 4
Label {
text: hoveredItem ? hoveredItem.label : ""
font.bold: true
color: "white"
}
Label {
text: hoveredItem ? hoveredItem.value : ""
color: "#ffcc00"
}
}
}
}
// 数据卡片容器
RowLayout {
Layout.fillWidth: true
spacing: 16
StatsCard {
title: "学生总数"
value: "335"
icon: "👥"
color: "#1e88e5"
}
StatsCard {
title: "学院数量"
value: "12"
icon: "🏫"
color: "#0d47a1"
}
StatsCard {
title: "班级数量"
value: "86"
icon: "📚"
color: "#64b5f6"
}
}
}
// 图表绘制函数
function drawCollegeChart() {
var ctx = collegeCanvas.getContext('2d');
ctx.reset();
const centerX = collegeCanvas.width / 2;
const centerY = collegeCanvas.height / 2;
const radius = Math.min(collegeCanvas.width, collegeCanvas.height) * 0.35;
let total = collegeStats.reduce((sum, item) => sum + item.count, 0);
let startAngle = 0;
let hoveredAngle = -1;
// 绘制饼图
collegeStats.forEach((item, index) => {
const sliceAngle = (item.count / total) * 2 * Math.PI;
const isHovered = hoveredItem && hoveredItem.type === "college" && hoveredItem.index === index;
// 绘制扇形
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, isHovered ? radius * 1.05 : radius,
startAngle, startAngle + sliceAngle);
ctx.closePath();
// 填充颜色
ctx.fillStyle = item.color;
ctx.fill();
// 添加光泽效果
if (!isHovered) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.fill();
}
// 绘制边框
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 1;
ctx.stroke();
// 绘制标签
const midAngle = startAngle + sliceAngle / 2;
const labelRadius = isHovered ? radius * 0.95 : radius * 0.85;
const labelX = centerX + Math.cos(midAngle) * labelRadius;
const labelY = centerY + Math.sin(midAngle) * labelRadius;
const percent = (item.count / total * 100).toFixed(1);
ctx.font = "14px 'Microsoft YaHei'";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "white";
ctx.fillText(`${item.college}\n${percent}%`, labelX, labelY);
startAngle += sliceAngle;
});
// 绘制中心圆
ctx.beginPath();
ctx.arc(centerX, centerY, radius * 0.4, 0, Math.PI * 2);
ctx.fillStyle = "#1a1a2e";
ctx.fill();
ctx.strokeStyle = "#4a4a7a";
ctx.lineWidth = 1;
ctx.stroke();
// 绘制总人数
ctx.font = "bold 18px 'Microsoft YaHei'";
ctx.fillStyle = "#ffcc00";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(total.toString(), centerX, centerY - 10);
ctx.font = "12px 'Microsoft YaHei'";
ctx.fillStyle = "white";
ctx.fillText("总人数", centerX, centerY + 12);
}
function drawHometownChart() {
var ctx = hometownCanvas.getContext('2d');
ctx.reset();
const barAreaHeight = hometownCanvas.height * 0.7;
const barAreaWidth = hometownCanvas.width * 0.8;
const barAreaX = (hometownCanvas.width - barAreaWidth) / 2;
const barAreaY = hometownCanvas.height * 0.15;
const barWidth = barAreaWidth / hometownStats.length;
const barMaxHeight = barAreaHeight * 0.8;
const scaleY = barMaxHeight / maxCount;
// 绘制背景网格
ctx.strokeStyle = "#3a3a5a";
ctx.lineWidth = 0.5;
// 水平网格线
for (let i = 1; i <= 5; i++) {
const y = barAreaY + barAreaHeight - (barAreaHeight / 5) * i;
ctx.beginPath();
ctx.moveTo(barAreaX, y);
ctx.lineTo(barAreaX + barAreaWidth, y);
ctx.stroke();
// 刻度标签
ctx.fillStyle = "#a0a0c0";
ctx.font = "12px 'Microsoft YaHei'";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillText(Math.round(maxCount * i / 5).toString(), barAreaX - 8, y);
}
// 绘制柱状图
hometownStats.forEach((item, index) => {
const barHeight = item.count * scaleY;
const x = barAreaX + index * barWidth + barWidth * 0.1;
const y = barAreaY + barAreaHeight - barHeight;
const isHovered = hoveredItem && hoveredItem.type === "hometown" && hoveredItem.index === index;
// 绘制柱体
const gradient = ctx.createLinearGradient(x, y, x, y + barHeight);
gradient.addColorStop(0, Qt.lighter(item.color, 1.2));
gradient.addColorStop(1, item.color);
ctx.fillStyle = gradient;
// 使用手动绘制圆角矩形替代 roundRect
const cornerRadius = 4;
const barWidthAdjusted = barWidth * 0.8;
ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.lineTo(x + barWidthAdjusted - cornerRadius, y);
ctx.quadraticCurveTo(x + barWidthAdjusted, y, x + barWidthAdjusted, y + cornerRadius);
ctx.lineTo(x + barWidthAdjusted, y + barHeight - cornerRadius);
ctx.quadraticCurveTo(x + barWidthAdjusted, y + barHeight, x + barWidthAdjusted - cornerRadius, y + barHeight);
ctx.lineTo(x + cornerRadius, y + barHeight);
ctx.quadraticCurveTo(x, y + barHeight, x, y + barHeight - cornerRadius);
ctx.lineTo(x, y + cornerRadius);
ctx.quadraticCurveTo(x, y, x + cornerRadius, y);
ctx.closePath();
ctx.fill();
// 添加光泽效果
if (isHovered) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
ctx.beginPath();
ctx.moveTo(x + cornerRadius, y);
ctx.lineTo(x + barWidthAdjusted - cornerRadius, y);
ctx.quadraticCurveTo(x + barWidthAdjusted, y, x + barWidthAdjusted, y + cornerRadius);
ctx.lineTo(x + barWidthAdjusted, y + barHeight * 0.3);
ctx.lineTo(x, y + barHeight * 0.3);
ctx.lineTo(x, y + cornerRadius);
ctx.quadraticCurveTo(x, y, x + cornerRadius, y);
ctx.closePath();
ctx.fill();
}
// 绘制边框
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 1;
ctx.stroke();
// 绘制数值
ctx.fillStyle = "#ffcc00";
ctx.font = "bold 14px 'Microsoft YaHei'";
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillText(item.count.toString(), x + barWidthAdjusted / 2, y - 5);
// 绘制标签
ctx.fillStyle = "#e0e0ff";
ctx.font = "12px 'Microsoft YaHei'";
ctx.textBaseline = "top";
ctx.fillText(item.hometown, x + barWidthAdjusted / 2, barAreaY + barAreaHeight + 5);
});
}
function drawGenderChart() {
var ctx = genderCanvas.getContext('2d');
ctx.reset();
const centerX = genderCanvas.width / 2;
const centerY = genderCanvas.height / 2;
const radius = Math.min(genderCanvas.width, genderCanvas.height) * 0.35;
const total = genderStats.male.count + genderStats.female.count;
// 绘制男性部分
const maleAngle = (genderStats.male.count / total) * Math.PI * 2;
const isMaleHovered = hoveredItem && hoveredItem.type === "gender" && hoveredItem.gender === "male";
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, isMaleHovered ? radius * 1.05 : radius, 0, maleAngle);
ctx.closePath();
ctx.fillStyle = genderStats.male.color;
ctx.fill();
// 绘制女性部分
const isFemaleHovered = hoveredItem && hoveredItem.type === "gender" && hoveredItem.gender === "female";
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, isFemaleHovered ? radius * 1.05 : radius, maleAngle, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = genderStats.female.color;
ctx.fill();
// 添加光泽效果
ctx.fillStyle = 'rgba(255, 255, 255, 0.15)';
ctx.beginPath();
ctx.arc(centerX, centerY, radius * 0.8, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
// 绘制中心分隔线
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(0) * radius, centerY + Math.sin(0) * radius);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(centerX + Math.cos(maleAngle) * radius, centerY + Math.sin(maleAngle) * radius);
ctx.stroke();
// 绘制标签
const malePercent = (genderStats.male.count / total * 100).toFixed(1);
const maleLabelX = centerX + Math.cos(maleAngle / 2) * radius * 0.7;
const maleLabelY = centerY + Math.sin(maleAngle / 2) * radius * 0.7;
ctx.fillStyle = "white";
ctx.font = "bold 16px 'Microsoft YaHei'";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(`男生\n${malePercent}%`, maleLabelX, maleLabelY);
const femalePercent = (genderStats.female.count / total * 100).toFixed(1);
const femaleAngle = maleAngle + (Math.PI * 2 - maleAngle) / 2;
const femaleLabelX = centerX + Math.cos(femaleAngle) * radius * 0.7;
const femaleLabelY = centerY + Math.sin(femaleAngle) * radius * 0.7;
ctx.fillText(`女生\n${femalePercent}%`, femaleLabelX, femaleLabelY);
}
// 悬停检测函数
function findHoveredItem(x, y) {
const centerX = collegeCanvas.width / 2;
const centerY = collegeCanvas.height / 2;
const radius = Math.min(collegeCanvas.width, collegeCanvas.height) * 0.35;
// 计算鼠标相对于圆心的角度
const dx = x - centerX;
const dy = y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius * 1.05) return null;
const angle = Math.atan2(dy, dx);
const normalizedAngle = angle < 0 ? angle + Math.PI * 2 : angle;
let currentAngle = 0;
const total = collegeStats.reduce((sum, item) => sum + item.count, 0);
for (let i = 0; i < collegeStats.length; i++) {
const item = collegeStats[i];
const sliceAngle = (item.count / total) * 2 * Math.PI;
if (normalizedAngle >= currentAngle && normalizedAngle < currentAngle + sliceAngle) {
const midAngle = currentAngle + sliceAngle / 2;
const labelX = centerX + Math.cos(midAngle) * radius * 0.8;
const labelY = centerY + Math.sin(midAngle) * radius * 0.8;
return {
type: "college",
index: i,
label: item.college,
value: item.count,
x: labelX,
y: labelY
};
}
currentAngle += sliceAngle;
}
return null;
}
function findHoveredBar(x, y) {
const barAreaHeight = hometownCanvas.height * 0.7;
const barAreaWidth = hometownCanvas.width * 0.8;
const barAreaX = (hometownCanvas.width - barAreaWidth) / 2;
const barAreaY = hometownCanvas.height * 0.15;
const barWidth = barAreaWidth / hometownStats.length;
for (let i = 0; i < hometownStats.length; i++) {
const barX = barAreaX + i * barWidth;
if (x >= barX && x <= barX + barWidth) {
const barY = barAreaY;
return {
type: "hometown",
index: i,
label: hometownStats[i].hometown,
value: hometownStats[i].count,
x: barX + barWidth / 2,
y: barY
};
}
}
return null;
}
function findHoveredGender(x, y) {
const centerX = genderCanvas.width / 2;
const centerY = genderCanvas.height / 2;
const radius = Math.min(genderCanvas.width, genderCanvas.height) * 0.35;
// 计算鼠标相对于圆心的角度
const dx = x - centerX;
const dy = y - centerY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance > radius * 1.05) return null;
const angle = Math.atan2(dy, dx);
const normalizedAngle = angle < 0 ? angle + Math.PI * 2 : angle;
const total = genderStats.male.count + genderStats.female.count;
const maleAngle = (genderStats.male.count / total) * Math.PI * 2;
if (normalizedAngle <= maleAngle) {
return {
type: "gender",
gender: "male",
label: "男生",
value: genderStats.male.count,
x: centerX + Math.cos(maleAngle / 2) * radius * 0.7,
y: centerY + Math.sin(maleAngle / 2) * radius * 0.7
};
} else {
return {
type: "gender",
gender: "female",
label: "女生",
value: genderStats.female.count,
x: centerX + Math.cos(maleAngle + (Math.PI * 2 - maleAngle) / 2) * radius * 0.7,
y: centerY + Math.sin(maleAngle + (Math.PI * 2 - maleAngle) / 2) * radius * 0.7
};
}
}
// 卡片组件
component StatsCard: Rectangle {
property string title
property string value
property string icon
property color color
Layout.preferredWidth: 180
Layout.preferredHeight: 120
radius: 12
color: "#252541"
border.color: "#4a4a7a"
// 悬停效果
Behavior on scale {
NumberAnimation { duration: 200 }
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: parent.scale = 1.05
onExited: parent.scale = 1.0
}
// 装饰边框
Rectangle {
anchors.fill: parent
radius: parent.radius
color: "transparent"
border.color: Qt.lighter(parent.color, 1.3)
border.width: 1
}
// 内部布局
Column {
anchors.centerIn: parent
spacing: 10
// 图标
Rectangle {
width: 50
height: 50
radius: 25
color: Qt.lighter(parent.parent.color, 1.3)
anchors.horizontalCenter: parent.horizontalCenter
Label {
anchors.centerIn: parent
text: parent.parent.parent.icon
font.pixelSize: 24
}
}
// 标题
Label {
text: parent.parent.parent.title
font.pixelSize: 14
color: "#a0a0c0"
anchors.horizontalCenter: parent.horizontalCenter
}
// 数值
Label {
text: parent.parent.parent.value
font.bold: true
font.pixelSize: 24
color: "#ffcc00"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
