-
+
-
-
+
-
班级平均成绩走势图
+
+
+ 班级平均成绩走势图
+
-
-
班级成绩统计分析
+
+ 成绩走势趋势分析
班级成绩统计分析
+
+
+ 班级成绩统计分析
+
-
-
-
-
+
+
+
-
-
+
+
-
- 查看成绩
+
+
+
+ 查看成绩
+
-
-
-
-
-
- {{ item.name }}:
- {{ item.value ?? 0 }}
+
+
{b} : {c} ({d}%)", }, legend: { orient: "vertical", - left: "right", + right: "3%", top: "center", - data: ["一般", "优秀", "良好", "不及格"], + itemWidth: 14, + itemHeight: 14, + itemGap: 14, + textStyle: { + color: "#8ec8f5", + fontSize: 13, + }, + formatter: (name) => { + const item = circularData.value.find((d) => d.name === name); + return name + " " + (item?.value || 0) + "人"; + }, }, series: [ { type: "pie", - radius: "70%", + radius: ["45%", "70%"], + center: ["35%", "50%"], + avoidLabelOverlap: true, + itemStyle: { + borderRadius: 6, + borderColor: "rgba(0, 20, 40, 0.9)", + borderWidth: 3, + }, + label: { + show: false, + }, emphasis: { + scale: true, + scaleSize: 8, itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: "rgba(0, 0, 0, 0.5)", + shadowBlur: 20, + shadowColor: "rgba(0, 170, 255, 0.6)", }, }, - data: circularData.value, - // 修改颜色 - color: ["#f7b844", "#51bcb5", "#5d92f7", "#ca5038"], + data: circularData.value.map((item, index) => ({ + ...item, + itemStyle: { + color: getPieColor(index), + }, + })), }, ], }); - // 自适应 - window.addEventListener("resize", () => { - myChart.resize(); - }); +}; + +// 饼图颜色配置 +const getPieColor = (index) => { + const colors = ["#f7b844", "#51bcb5", "#5d92f7", "#e05545"]; + return colors[index % colors.length]; }; // 获取班级成绩走势函数功能函数 const getClassGradeTrend = () => { @@ -195,129 +332,351 @@ const getClassList = () => { }; onMounted(() => { getClassGradeTrend(); - getClassGradeStatistics() - getClassList() + getClassGradeStatistics(); + getClassList(); initstatus.value = true; + // 等布局稳定后再 resize 一次，避免高度百分比场景下 ECharts 拿不到正确尺寸 + requestAnimationFrame(() => { + trendChart?.resize(); + statisticsChart?.resize(); + }); +}); + +const handleResize = () => { + trendChart?.resize(); + statisticsChart?.resize(); +}; +window.addEventListener("resize", handleResize); +onBeforeUnmount(() => { + window.removeEventListener("resize", handleResize); + trendChart?.dispose(); + statisticsChart?.dispose(); + trendChart = null; + statisticsChart = null; }); -
+
@@ -60,6 +69,8 @@ const classParams = ref({
time: "",
});
const initstatus = ref(false);
+let trendChart = null;
+let statisticsChart = null;
const circularData = ref([
{ value: 0, name: "一般", key: "generalCount" },
{ value: 0, name: "优秀", key: "excellentCount" },
@@ -71,75 +82,201 @@ const circularData2 = ref([
{ score: 0, name: "最低分", key: "minScore" },
{ score: 0, name: "平均分", key: "averageScore" },
]);
+
+// 成绩图标样式
+const getScoreIconClass = (name) => {
+ const iconMap = {
+ 最高分: "icon-max",
+ 最低分: "icon-min",
+ 平均分: "icon-avg",
+ };
+ return iconMap[name] || "";
+};
+
// 获取成绩走势图数据
const getTrendData = async () => {
- var myinde = echarts.init(document.getElementById("trend"));
+ trendChart = trendChart || echarts.init(document.getElementById("trend"));
+ const myinde = trendChart;
myinde.setOption({
+ backgroundColor: "transparent",
tooltip: {
trigger: "axis",
+ backgroundColor: "rgba(0, 20, 40, 0.95)",
+ borderColor: "rgba(0, 170, 255, 0.5)",
+ borderWidth: 1,
+ textStyle: {
+ color: "#e0f0ff",
+ fontSize: 13,
+ },
+ axisPointer: {
+ type: "cross",
+ lineStyle: {
+ color: "rgba(0, 170, 255, 0.4)",
+ },
+ },
},
legend: {
data: className.value,
+ textStyle: {
+ color: "#8ec8f5",
+ fontSize: 12,
+ },
+ top: 5,
+ itemWidth: 20,
+ itemHeight: 10,
},
grid: {
- left: "4%",
+ left: "3%",
right: "4%",
- bottom: "1%",
+ bottom: "3%",
+ top: "15%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: classTime.value,
+ axisLine: {
+ lineStyle: {
+ color: "rgba(0, 170, 255, 0.4)",
+ },
+ },
+ axisLabel: {
+ color: "#6aabde",
+ fontSize: 11,
+ },
+ axisTick: {
+ show: false,
+ },
},
yAxis: {
type: "value",
- //显示0~100
min: 0,
max: 100,
+ splitLine: {
+ lineStyle: {
+ color: "rgba(0, 170, 255, 0.15)",
+ type: "dashed",
+ },
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#6aabde",
+ fontSize: 11,
+ },
},
- series: classList.value,
- });
- // 自适应
- window.addEventListener("resize", () => {
- myinde.resize();
+ series: classList.value.map((item, index) => ({
+ ...item,
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ color: getLineColor(index),
+ },
+ itemStyle: {
+ color: getLineColor(index),
+ },
+ areaStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: getAreaColor(index, 0.35) },
+ { offset: 1, color: getAreaColor(index, 0.02) },
+ ],
+ },
+ },
+ symbol: "circle",
+ symbolSize: 6,
+ })),
});
};
+
+// 折线图颜色配置
+const getLineColor = (index) => {
+ const colors = ["#00aaff", "#00ff88", "#ff7c7c", "#ffd93d", "#a78bfa", "#22d3ee"];
+ return colors[index % colors.length];
+};
+
+const getAreaColor = (index, alpha) => {
+ const colors = ["rgba(0, 170, 255,", "rgba(0, 255, 136,", "rgba(255, 124, 124,", "rgba(255, 217, 61,", "rgba(167, 139, 250,", "rgba(34, 211, 238,"];
+ return colors[index % colors.length] + alpha + ")";
+};
+
// 成绩统计分析
const getStatisticsData = async () => {
- var myChart = echarts.init(document.getElementById("statistics"));
+ statisticsChart = statisticsChart || echarts.init(document.getElementById("statistics"));
+ const myChart = statisticsChart;
myChart.setOption({
+ backgroundColor: "transparent",
tooltip: {
trigger: "item",
+ backgroundColor: "rgba(0, 20, 40, 0.95)",
+ borderColor: "rgba(0, 170, 255, 0.5)",
+ borderWidth: 1,
+ textStyle: {
+ color: "#e0f0ff",
+ fontSize: 13,
+ },
formatter: "{a}
+
+
+ {{ item.name }}
+ {{ item.value ?? 0 }}
{b} : {c} ({d}%)", }, legend: { orient: "vertical", - left: "right", + right: "3%", top: "center", - data: ["一般", "优秀", "良好", "不及格"], + itemWidth: 14, + itemHeight: 14, + itemGap: 14, + textStyle: { + color: "#8ec8f5", + fontSize: 13, + }, + formatter: (name) => { + const item = circularData.value.find((d) => d.name === name); + return name + " " + (item?.value || 0) + "人"; + }, }, series: [ { type: "pie", - radius: "70%", + radius: ["45%", "70%"], + center: ["35%", "50%"], + avoidLabelOverlap: true, + itemStyle: { + borderRadius: 6, + borderColor: "rgba(0, 20, 40, 0.9)", + borderWidth: 3, + }, + label: { + show: false, + }, emphasis: { + scale: true, + scaleSize: 8, itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: "rgba(0, 0, 0, 0.5)", + shadowBlur: 20, + shadowColor: "rgba(0, 170, 255, 0.6)", }, }, - data: circularData.value, - // 修改颜色 - color: ["#f7b844", "#51bcb5", "#5d92f7", "#ca5038"], + data: circularData.value.map((item, index) => ({ + ...item, + itemStyle: { + color: getPieColor(index), + }, + })), }, ], }); - // 自适应 - window.addEventListener("resize", () => { - myChart.resize(); - }); +}; + +// 饼图颜色配置 +const getPieColor = (index) => { + const colors = ["#f7b844", "#51bcb5", "#5d92f7", "#e05545"]; + return colors[index % colors.length]; }; // 获取班级成绩走势函数功能函数 const getClassGradeTrend = () => { @@ -195,129 +332,351 @@ const getClassList = () => { }; onMounted(() => { getClassGradeTrend(); - getClassGradeStatistics() - getClassList() + getClassGradeStatistics(); + getClassList(); initstatus.value = true; + // 等布局稳定后再 resize 一次，避免高度百分比场景下 ECharts 拿不到正确尺寸 + requestAnimationFrame(() => { + trendChart?.resize(); + statisticsChart?.resize(); + }); +}); + +const handleResize = () => { + trendChart?.resize(); + statisticsChart?.resize(); +}; +window.addEventListener("resize", handleResize); +onBeforeUnmount(() => { + window.removeEventListener("resize", handleResize); + trendChart?.dispose(); + statisticsChart?.dispose(); + trendChart = null; + statisticsChart = null; }); -