109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<template>
|
|
<view
|
|
class="radar-chart-placeholder mx-[24rpx] bg-white chart-class h-[500rpx] flex items-center justify-center"
|
|
>
|
|
<view class="h-[415rpx] w-full z-1">
|
|
<LEchart ref="echart"></LEchart>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import LEchart from '@/pages-evaluation-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
|
|
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
|
const echart = ref(null)
|
|
const props = defineProps({
|
|
picData: {
|
|
type: Object,
|
|
default: () => ({
|
|
indicator: [],
|
|
radars: [],
|
|
}),
|
|
},
|
|
})
|
|
|
|
// 处理标签名称的映射
|
|
const nameMap: Record<string, string> = {
|
|
A: '艺术型(A)',
|
|
R: '现实型(R)',
|
|
I: '研究型(I)',
|
|
S: '社会型(S)',
|
|
E: '企业型(E)',
|
|
C: '常规型(C)',
|
|
}
|
|
|
|
// 转换 indicator 数据
|
|
const formatIndicator = computed(() => {
|
|
return props.picData.indicator.map((item) => ({
|
|
name: nameMap[item.name] || item.name,
|
|
max: item.max,
|
|
}))
|
|
})
|
|
|
|
watch(
|
|
() => props.picData,
|
|
(newV) => {
|
|
if (newV.radars.length > 0) {
|
|
echart.value.init(echarts, (chart) => {
|
|
let option = {
|
|
legend: {
|
|
show: false,
|
|
data: ['Allocated Budget', 'Actual Spending'],
|
|
},
|
|
radar: {
|
|
indicator: formatIndicator.value,
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '职业兴趣评测',
|
|
type: 'radar',
|
|
data: [
|
|
{
|
|
value: props.picData.radars,
|
|
name: '测评结果',
|
|
itemStyle: {
|
|
color: '#1580FF',
|
|
},
|
|
areaStyle: {
|
|
color: 'rgba(21,128,255,0.2)',
|
|
},
|
|
lineStyle: {
|
|
width: 2,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
chart.setOption(option)
|
|
})
|
|
}
|
|
},
|
|
)
|
|
|
|
onBeforeMount(() => {
|
|
if (echart.value) {
|
|
echart.value.dispose()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-class {
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
</style>
|