#鸿蒙通关秘籍#Mc Charts中的雷达图McRadarChart
import { McRadarChart, Options } from '@mcui/mccharts'
interface nameType {
name: string
}
export class RadarData {
inspectTypeName: string = '';
partScoreRate: number = 0;
}
@Entry
@Component
struct Index {
@State name11: nameType[] = []
@State RadarData:RadarData[]=[
{
"inspectTypeName": "人员",
"partScoreRate": 80
},
{
"inspectTypeName": "商品",
"partScoreRate": 91.11
},
{
"inspectTypeName": "店容",
"partScoreRate": 100
}
]
@State defOption: Options = new Options({
color:[],
title: {
show: true,
text: '基础雷达',
right: 20,
top: 30
},
radar: {
indicator:this.name11,
},
series: [
{
data:this.RadarData.map(i=>i.partScoreRate),
areaStyle:{
show:true,
color:'rgba(0,165,124,0.3)'
}
}
],
tooltip:{
show:true,
backgroundColor:'#FFFFFF'
}
})
aboutToAppear() {
for (let i = 0; i < this.RadarData.length; i++) {
const element = this.RadarData[i];
this.name11.push({name:element.inspectTypeName})
}
}
build() {
Row() {
McRadarChart({
options: this.defOption
})
}
.height('50%')
}
}
如上给mock数据,图形可以显示。但是正常来写的话数据是接口返回的,一样的写法,接口返回的数据是存在的,能打印出来,但是图形(雷达图)不显示,why?