<div id="radar-chart" style="width: 400px;"></div>
<script>
export default{
data(){
return {}
},
mounted(){
this.init()
},
methods:{
init () {
const radarChart = this.$echarts.init(document.getElementById('radar-chart'), null, {renderer: 'svg'})
let option = {
radar: [{
center:['50%','50%'],
radius: '75%',
name: {
formatter: '{value}',
textStyle: {
fontSize: 12,
color: '#888'
}
},
indicator: [
{ name: "A", max: 10 ,axisLine:{lineStyle:{color:'#888'}}},
{ name: "B", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "C", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "D", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "E", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "F", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "G", max: 10 ,axisLabel:{show:false},axisTick:{show:false}},
{ name: "H", max: 10 ,axisLabel:{show:false},axisTick:{show:false}}
],
nameGap: 12,
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
},
},
axisTick:{
show:true,
length:3
},
splitNumber: 5,
axisLabel: {
show:true,
color:'#888',
fontSize:10,
margin:10
},
splitLine: {
lineStyle: {
color:"#e4e4e4"
}
},
splitArea: {
areaStyle: {
color: ['#fff'],
}
}
}],
series: [{
name: "评估",
type: "radar",
data: [{
value: [7.7, 5, 6.6, 7.3, 6.7, 8, 5, 6.7],
name: "评估",
symbolSize:5,
itemStyle: {
normal: {
borderColor: '#1890FF',
borderWidth: 1,
color: "#fff"
}
},
lineStyle:{
color:'#1890FF',
width:1.5
},
areaStyle: {
normal: {
color: 'rgba(24,144,255,0.3)'
}
}
}],
}]
}
radarChart.clear();
setTimeout(()=>{radarChart.setOption(option)},100)
}
}
}
</script>