[英]How to filter the echarts line chart per week in angular
angular中每周如何过滤echarts折线图。 目前它显示所有记录示例2019-10-27 10:15:00, 2019-10-27 10:15:30, 2019-10-27 10:16:00, 2019-10-27 10:19:00
。 应该是2019-10-27
如果有2019-28-10 00:00:15, 2019-28-10 00:10:00
output 应该是2019-10-27, 2019-10-28
。
这是代码list.component.html
<button nz-button nzType="default" (click)="dataFilter('prevWeek')">Previous week</button>
<button nz-button nzType="default" (click)="dataFilter('currWeek')">Current week</button>
<button nz-button nzType="default" (click)="dataFilter('all')">All</button>
<div echarts [options]="trendOption" id="trendChart" [autoResize]="true" style="height: 280px;"></div>
list.component.ts
dataFilter(event: any) {
switch (event) {
case 'prevWeek':
console.log('diplay the previous/last week');
break;
case 'currWeek':
console.log('display current week list')
break;
case 'all':
console.log('display all records');
break;
default: break;
}
}
getRoomTrend() {
const _THIS = this;
const dateTime: any = [];
const tempY: any = [];
const humidY: any = [];
this.global
.getData(`/conditions?length=100&sensor=${this.roomTitle}`)
.pipe(take(1))
.subscribe((res: any) => {
const record = res['data'];
for (let i = record.length - 1; i >= 0; i--) {
const date = format(record[i].date, 'MM/DD/YYYY[\n]HH:mm');
const temperature = parseFloat(record[i].temperature);
const humidity = parseFloat(record[i].humidity);
dateTime.push(date);
tempY.push(temperature);
humidY.push(humidity);
}
if (this.initialLoad.trendStatus) {
this.trendOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
top: '10',
data: ['Temperature', 'Humidity']
},
grid: {
left: '3%',
bottom: '15%',
containLabel: true
},
dataZoom: [
{
minValueSpan: 4,
startValue: record.length - 3
},
{
type: 'inside'
}
],
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
data: dateTime
},
yAxis: [
{
type: 'value',
boundaryGap: [0, '100%'],
axisLabel: {
formatter: '{value} °'
},
splitLine: {
show: false
}
},
{
type: 'value',
boundaryGap: [0, '100%'],
position: 'right',
axisLabel: {
formatter: '{value} °'
},
splitLine: {
show: false
}
}
],
series: [
{
name: 'Temperature',
type: 'line',
color: '#006ec7',
data: tempY
},
{
name: 'Humidity',
type: 'line',
color: '#8c0000',
data: humidY
}
]
};
}
});
}
例如我有30,000
记录,日期相同但时间不同。 output 应该只是 ```2019-15-10, 2019-18-10, 2019-22-10。 提前致谢。
let uniqueDates = new Set();
record.forEach(value => {
let date = new Date(value.date.getFullYear(), value.date.getMonth(), value.date.getDate());
uniqueDates.add(date);
});
根据定义Set
是一组唯一值。 因此,您可以从记录中获取没有时间的日期并将它们添加到集合中。 您最终会得到一个唯一日期列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.