雷達圖
<template>
<div class="card-chart-radar">
<chart :options="option" ref="leaderEduBar" autoresize />
<p class="chart-empty" v-if="!chartData">本單位暫時沒有開啓能力模型</p>
</div>
</template>
配置
option: {
grid: {
position: "center"
},
tooltip: {
//雷達圖的tooltip不會超出div,也可以設置position屬性,position定位的tooltip 不會隨着鼠標移動而位置變化,不友好
confine: true,
enterable: true //鼠標是否可以移動到tooltip區域內
},
legend: {
x: "right",
y: "24px",
icon: "circle",
orient: "vertical",
data: ["崗位", "個人"],
align: "left",
itemGap: 20,
itemWidth: 8
},
radar: [
{
indicator: [
{ text: "知識", max: 100 },
{ text: "廉潔", max: 100 },
{ text: "業績", max: 100 },
{ text: "技能", max: 100 },
{ text: "素質", max: 100 }
],
center: ["40%", "55%"], // 調位置
radius: 90, // 調大小
splitNumber: 7, // 雷達圖圈數設置
name: {
textStyle: {
color: "#838D9E"
}
},
// 設置雷達圖中間射線的顏色
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0.15)"
}
},
splitArea: {
show: false,
areaStyle: {
color: "rgba(255,255,255,0)" // 圖表背景的顏色
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: "rgba(0,0,0,0.15)" // 設置網格的顏色
}
}
}
],
series: [
{
type: "radar",
grid: { containLabel: true },
tooltip: {
trigger: "item"
},
//設置拐點顏色
areaStyle: {
normal: {
width: 1,
opacity: 0.2
}
},
symbol: "circle", // 拐點樣式
symbolSize: 6, // 拐點大小
itemStyle: {
normal: { areaStyle: { type: "default" }, color: ["#1FC48D", "3F8FFF"] }
},
data: [
{
value: [],
name: "崗位",
itemStyle: {
normal: {
color: "#1FC48D",
lineStyle: {
color: "#1FC48D"
}
}
}
},
{
value: [],
name: "個人",
itemStyle: {
normal: {
color: "#3F8FFF",
lineStyle: {
color: "#3F8FFF"
}
}
}
}
]
}
]
}