163 lines
3.4 KiB
Vue
163 lines
3.4 KiB
Vue
<template>
|
|
<view class="bg-white mx-[24rpx] rounded-[20rpx] pb-[20rpx]">
|
|
<view class="px-[24rpx] h-[368rpx] z-1">
|
|
<LEchart ref="echart" :customStyle="`z-index:1;`"></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)
|
|
|
|
interface IndicatorItem {
|
|
name: string
|
|
max: number
|
|
}
|
|
|
|
interface PicChartsData {
|
|
indicator: IndicatorItem[]
|
|
radars: number[]
|
|
}
|
|
|
|
const props = defineProps({
|
|
picCharts: {
|
|
type: Object as () => PicChartsData,
|
|
default: () => ({
|
|
indicator: [],
|
|
radars: [],
|
|
}),
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
updateChart()
|
|
})
|
|
|
|
watch(
|
|
() => props.picCharts,
|
|
(newVal) => {
|
|
if (newVal && newVal.indicator && newVal.indicator.length > 0) {
|
|
updateChart()
|
|
}
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
const updateChart = () => {
|
|
echart.value.init(echarts, (chart) => {
|
|
// 提取职业锚名称，去除括号内的缩写
|
|
const categories = props.picCharts.indicator.map((item) => {
|
|
const match = item.name.match(/(.*?)\([^)]*\)/)
|
|
return match ? match[1].trim() : item.name
|
|
})
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
grid: {
|
|
top: 60,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: categories,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#E0E0E0',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#666',
|
|
fontSize: 12,
|
|
interval: 0,
|
|
rotate: 45,
|
|
formatter: function (value) {
|
|
// 处理长文本
|
|
if (value.length > 4) {
|
|
return value.substring(0, 4) + '...'
|
|
}
|
|
return value
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '分数',
|
|
min: 0,
|
|
max: 30,
|
|
interval: 5,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#E0E0E0',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#E8E8E8',
|
|
type: 'solid',
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '得分',
|
|
type: 'bar',
|
|
barWidth: '20',
|
|
itemStyle: {
|
|
color: function (params) {
|
|
// 为不同柱子设置不同颜色
|
|
const colorList = [
|
|
'#1580FF',
|
|
'#F9AA5B',
|
|
'#5470c6',
|
|
'#91cc75',
|
|
'#fac858',
|
|
'#ee6666',
|
|
'#73c0de',
|
|
'#3ba272',
|
|
]
|
|
return colorList[params.dataIndex % colorList.length]
|
|
},
|
|
borderRadius: [4, 4, 0, 0],
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#666',
|
|
fontSize: 12,
|
|
},
|
|
data: props.picCharts.radars,
|
|
},
|
|
],
|
|
}
|
|
|
|
chart.setOption(option)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|