如果数据名称重复超过20,如何显示,则不显示。名称已经显示时,它应该仅显示一个数据
list.component.ts
gaugeChart() {
this.gaugeOption = [];
this.global.getData(`/services/getData.php`)
.pipe(take(1))
.subscribe((res: any) => {
this.rowData = res;
this.rowData.forEach((room) => {
this.gaugeOption.push({
title: {
text: room.sensor,
left: '5%',
top: '5%',
textStyle: {
fontSize: 18,
}
},
tooltip: {
formatter: "{a} <br/>{b} : {c}°"
},
toolbox: {
show: true,
feature: {
mark: { show: false },
restore: { show: false },
saveAsImage: { show: false }
}
},
series: [
{
name: 'Temperature',
type: 'gauge',
center: ['40%', '70%'],
splitNumber: 10,
radius: '70%',
axisLine: {
lineStyle: {
color: [[0.2, '#48b'], [0.8, '#228b22'], [1, '#ff0000']],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
title: {
show: true,
offsetCenter: [0, '65%'],
textStyle: {
fontWeight: 'bolder'
}
},
detail: {
formatter: '{value}°',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{ value: room.temperature, name: "Temperature" }]
}
]
});
});
list.component.html
<ul class="cards">
<li class="cards__item" *ngFor="let data of gaugeOption; let i = index">
<div class="card">
<div echarts [options]="data" id="{{'chart-' + i}}" [autoResize]="true"></div>
</div>
</li>
<li>
</ul>
输出将显示所有20个重复的名称,即Room 1
。
如果有20条重复记录,则应仅显示一个名称。