<template>
<e-charts :option="option" autoresize style="height: 220px" class="echarts" @click="handleChartClick" />
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { computed } from "vue";
const emit = defineEmits(["chooseReportId"]);
const props = defineProps({
dataList: {
type: Array as () => Array<{ reportId: number; result: number; username: string }>,
required: true
},
min: {
type: Number,
default: 0
},
average: {
type: Number,
default: 0
}
});
// 声明值
const option = computed(() => {
// 数据格式改为 [index, result]
const data = props.dataList.map((item, index) => [index, item.result]);
return {
xAxis: {
type: "category",
data: props.dataList.map((_, index) => `${index}`), // 仍然显示索引
name: "学生编号",
nameLocation: "middle",
nameGap: 20,
axisLabel: {
fontSize: 7,
rotate: 45,
interval: (index) => {
const total = props.dataList.length - 1;
return index % 10 === 0 || index === total;
},
formatter: (value, index) => {
const total = props.dataList.length - 1;
return index % 10 === 0 || index === total ? value : "";
}
}
},
yAxis: {
type: "value",
name: "达成情况",
nameLocation: "middle",
nameGap: 20,
min: props.min,
max: 1,
interval: 0.4,
axisLabel: {
fontSize: 7
},
axisLine: {
show: true
},
splitLine: {
lineStyle: {
type: "dashed"
}
}
},
series: [
{
type: "scatter",
symbol: "diamond",
symbolSize: 12,
data: data,
itemStyle: {
color: "#5470c6"
},
markLine: {
data: [
// 平均线（红色实线）
{
type: "average",
name: "平均值",
lineStyle: {
color: "#ff0000",
width: 2,
type: "solid"
}
},
// 合格线（黄色实线）
[
{
coord: [0, 0.6],
lineStyle: {
color: "yellow",
width: 2,
type: "solid"
}
},
{
coord: [props.dataList.length - 1, 0.6],
label: {
show: true,
position: "insideMiddle",
fontSize: 7,
formatter: "合格线"
}
}
]
],
symbol: ["none", "none"],
silent: true
},
tooltip: {
formatter: (params: any) => {
const student = props.dataList[params.value[0]];
return `学生的达成率是 ${student.result.toFixed(2)}!!!`;
},
confine: true
}
}
]
};
});
// 点击图表获取学生 ID
const handleChartClick = (params: any) => {
const clickedIndex = params.value[0]; // 获取点击的索引
const ID = props.dataList[clickedIndex]?.reportId || null; // 获取对应的学生数据
if (!ID) {
return ElMessage.error("报告未生成!");
} else {
emit("chooseReportId", ID);
}
};
</script>
<style>
@media print {
.echarts {
width: 100% !important;
margin-left: -5% !important;
padding-bottom: 100px !important;
}
}
</style>
：需求当鼠标hover在每一个点上的时候，都需要显示出当前Y坐标值
最新发布
博客内容提及从0开始，但信息有限，未明确具体领域。推测可能是在信息技术某方面开启新的探索。
扫一扫
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
