javascript - 如何以角度过滤每周的echarts折线图
问题描述
如何每周以角度过滤 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
输出应该是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
记录,日期相同但时间不同。输出应该只有 ```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
根据定义,是一组唯一值。因此,您可以从记录中获取没有时间的日期并将它们添加到集合中。您最终会得到一个唯一日期列表。
推荐阅读
- javascript - Firebase Auth State Persistence vanilla JS
- python - 我可以在 Visual Studio Code 中同时使用 Python 2 和 Python3 吗?
- merge - Jsonnet 中的 + 运算符和 std.mergePatch 有什么区别?
- c - 'g' 在此函数中使用未初始化 [-Wuninitialized]
- python - 如何在我们绘制列表平均值并显示其余范围的列表中绘制键的字典? [Python]
- python - 更快的 datetime.strptime
- php - Magento 2 搜索显示 404 Not Found
- jquery - JQuery 文本搜索:无法获得正确的标签/元素来搜索表格文本
- azure-service-fabric - Service Fabric - 如何在我的本地开发集群上启用 BackupRestoreService
- bluetooth - BLE 设备中可能的连接数