1.HTML代码
<el-table
:ref="'table'"
v-loading="loading"
:data="tableDate"
:border="true"
tooltip-effect="dark"
class="data-table"
>
<el-table-column align="center" type="index" label="序号" width="50" />
<el-table-column
align="center"
prop="student.phone"
label="手机号"
min-width="100"
/>
<el-table-column
align="center"
prop="evaluationGrade"
label="测评等级"
min-width="50"
/>
<el-table-column
align="center"
prop="resultRadarUrl"
label="测评结果雷达图"
min-width="150"
>
<template slot-scope="{ row }">
<div
class="echartsClass"
:ref="'echarts-radar' + row.id"
style="text-align: center"
></div>
</template>
</el-table-column>
<el-table-column label="结果详情" min-width="70" align="center">
<template slot-scope="scope">
<el-button
type="text"
v-btnpermission="'stuanswer.details'"
@click="updaterow(scope)"
size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
2.获取列表数据方法(data中的变量声明此处忽略)
getanswerList() {
if (this.daterange == null) {
this.daterange = [];
}
let startTime = this.format(this.daterange[0], "yyyy-mm-dd");
let endTime = this.format(this.daterange[1], "yyyy-mm-dd");
reqanswerList( // 调用接口方法
this.form.assessmentName,
this.form.stageName,
this.form.phone,
startTime,
endTime,
this.form.page,
this.form.pageSize
).then((res) => {
this.tableDate = res.data.data.map((item) => {
item.evaluationGrade = item.grade ? item.grade.gradeName : "";
item.evaluationStage = item.stage ? item.stage.stageName : "";
item.resultRadarUrl = item.resultRadarUrl? JSON.parse(item.resultRadarUrl) : [];
// 重点在这 雷达图
if (item.resultRadarUrl.length) {
const options = {
// 拐点颜色
color: "rgba(150, 108, 172)",
tooltip: {},
legend: {},
radar: {
name: {},
radius: 50,
indicator: item.resultRadarUrl.map((val) => {
return {
name: val.knowledgeName,
max: val.totalScore,
};
}),
},
series: [
{
symbol: "none",
name: "",
type: "radar",
areaStyle: {
color: "rgba(150, 108, 172, 0.8)",
},
// 线条颜色
lineStyle: {
color: "rgba(150, 108, 172)",
},
data: [
{
value: item.resultRadarUrl.map((val) =>
val.score * 1 > 0 ? val.score * 1 : 1
),
name: ""
}
]
}
]
};
this.$nextTick().then(() => {
echarts
.init(this.$refs["echarts-radar" + item.id])
.setOption(options, true);
});
}
return item;
});
this.form.total = res.data.total;
this.loading = false;
});
},
3.效果图
因项目需求,通过多方查找资料与交流所得。如有侵权,请联系删除!