<template>
<h2>用户画像
数据</h2>
<ul>
<li><strong>用户名：</strong>{{ profile
.username }}</li>
<li><strong>学习风格：</strong>{{ profile
.learningStyleDisplayName }}</li>
<li><strong>学习目标：</strong>{{ profile
.learningGoal }}</li>
<li><strong>学习偏好：</strong>{{ profile
.learningPreference }}</li>
<li>
<strong>兴趣标签：</strong>
<ul>
<li v
-for="tag in profile
.interestTags" :key="tag
.id">
{{ tag
.name }}
</li>
</ul>
</li>
</ul>
<div class="chart
-container">
<h3>能力分布</h3>
<div id="radar
-chart" style="width: 600px; height: 400px;"></div>
</div>
<
el-button plain @click="center
DialogVisible = true">
用户画像设置
</
el-button>
<
el-dialog
v
-mod
el="center
DialogVisible"
title="用户画像设置"
width="500"
align
-center
>
<
el-form :mod
el="profile" :rules="rules" ref="formRef" lab
el-width="100px">
<
el-form
-item lab
el="逻辑能力：" prop="logicalAbility">
<
el-input
-number
v
-mod
el="profile
.logicalAbility"
:min="0"
:max="100"
></
el-input
-number>
</
el-form
-item>
<
el-form
-item lab
el="语言能力：" prop="verbalAbility">
<
el-input
-number
v
-mod
el="profile
.verbalAbility"
:min="0"
:max="100"
></
el-input
-number>
</
el-form
-item>
<
el-form
-item lab
el="抽象能力：" prop="abstractAbility">
<
el-input
-number
v
-mod
el="profile
.abstractAbility"
:min="0"
:max="100"
></
el-input
-number>
</
el-form
-item>
<
el-form
-item lab
el="记忆力：" prop="memoryAbility">
<
el-input
-number
v
-mod
el="profile
.memoryAbility"
:min="0"
:max="100"
></
el-input
-number>
</
el-form
-item>
<
el-form
-item lab
el="专注力：" prop="concentrationAbility">
<
el-input
-number
v
-mod
el="profile
.concentrationAbility"
:min="0"
:max="100"
></
el-input
-number>
</
el-form
-item>
</
el-form>
<template #footer>
<div class="
dialog-footer">
<
el-button @click="handleCanc
el">取消</
el-button>
<
el-button type="primary" @click="handleSubmit">保存修改</
el-button>
</div>
</template>
</
el-dialog>
</template>
<script setup>
import { onMounted, ref } from "
vue";
import request from "
../
../utils/request";
import * as
echarts from "
echarts"; // 引入
ECharts
const profile = ref({});
const account = ref({});
const interests = ref([]);
const currentSection = ref("profile");
const center
DialogVisible = ref(false);
const handleCanc
el = () => {
center
DialogVisible
.value = false;
};
const handleSubmit = async () => {
center
DialogVisible
.value = false;
console
.log("用户画像
数据：" +
JSON
.stringify(profile
.value));
};
const getProfile = async () => {
profile
.value = await request
.get("/student
-profiles/me");
console
.log("用户画像
数据：" +
JSON
.stringify(profile
.value));
initRadarChart(); // 初始化雷达图
};
onMounted(() => {
getProfile();
});
// 初始化雷达图
const initRadarChart = () => {
const chartDom = document
.get
ElementById("radar
-chart");
const myChart =
echarts.init(chartDom);
const option = {
radar: {
indicator: [
{ name: "逻辑能力", max: 5 },
{ name: "语言能力", max: 5 },
{ name: "抽象能力", max: 5 },
{ name: "记忆力", max: 5 },
{ name: "专注力", max: 5 },
],
},
series: [
{
type: "radar",
data: [
{
value: [
profile
.value
.logicalAbility,
profile
.value
.verbalAbility,
profile
.value
.abstractAbility,
profile
.value
.memoryAbility,
profile
.value
.concentrationAbility,
],
name: "能力分布",
},
],
},
],
};
myChart
.setOption(option);
};
const s
electSection = (section) => {
currentSection
.value = section;
};
const handleEdit = () => {
console
.log("编辑按钮被点击");
};
</script>
<style scoped>
.container {
display: flex;
}
.sidebar {
width: 200px;
padding: 10px;
border
-right: 1px solid #ccc;
}
.sidebar ul {
list
-style
-type: none;
padding: 0;
}
.sidebar li {
cursor: pointer;
padding: 8px 12px;
margin: 5px 0;
border
-radius: 4px;
background
-color: #f9f9f9;
}
.sidebar li:hover {
background
-color: #eaeaea;
}
.sidebar li
.active {
background
-color: #42b983;
color: white;
}
.content {
flex
-grow: 1;
padding: 10px;
}
ul {
list
-style
-type: none;
padding: 0;
}
li {
margin: 5px 0;
}
.chart
-container {
margin
-bottom: 20px;
}
</style>对页面进行美化
本文探讨了在Vue.js中，如何解决在弹出层el-dialog中，由于使用id而非ref获取echarts对应div导致的图表加载失败问题。关键在于使用ref初始化echarts实例并设置选项。解决方法包括确保div使用ref='mychart'，并通过this.$echarts.init进行操作。
扫一扫
8714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
