HarmonyOS 鸿蒙Next Mc Charts中的雷达图McRadarChart
HarmonyOS 鸿蒙Next Mc Charts中的雷达图McRadarChart
import { McRadarChart, Options } from ‘@mcui/mccharts’
interface nameType {
name: string
}
export class RadarData {
inspectTypeName: string = ‘’;
partScoreRate: number = 0;
}
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？
更多关于HarmonyOS 鸿蒙Next Mc Charts中的雷达图McRadarChart的实战教程也可以访问 https://www.itying.com/category-93-b0.html
你mock的数据相当于是第一次加载直接渲染出来的，而接口返回的数据是监听到值变化重新触发UI渲染，这里第一感觉是要使用[@Observed](/user/Observed)/[@ObjectLink](/user/ObjectLink)装饰器来监听对象数组值的变化
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5
更多关于HarmonyOS 鸿蒙Next Mc Charts中的雷达图McRadarChart的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，Next Mc Charts库提供了丰富的图表绘制功能，其中McRadarChart用于绘制雷达图。雷达图，又称蜘蛛网图或星形图，是一种用于显示多维数据的图形表示方法，每个维度由雷达图上的一个轴表示，数据点连接形成多边形。
使用McRadarChart时，首先需要确保已正确引入Next Mc Charts库，并在项目中配置好相关依赖。接下来，可以按照以下步骤创建和配置雷达图：
- 初始化McRadarChart实例，并设置其大小、边距等基本属性。
- 配置数据集，包括设置各维度的标签和数据值。
- 自定义雷达图的样式，如线条颜色、填充颜色、标签样式等。
- 将数据集绑定到McRadarChart实例，并调用渲染方法生成雷达图。
在开发过程中，如果遇到数据不显示、样式不生效等问题，建议检查数据集配置是否正确、样式设置是否覆盖、以及是否有其他代码影响了图表渲染。同时，确保使用的Next Mc Charts版本与HarmonyOS系统兼容。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
