#鸿蒙通关秘籍#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?

鸿蒙
3天前
浏览
收藏 0
回答 0
待解决
相关问题
HarmonyOS 雷达组件
92浏览 • 1回复 待解决