功能介绍
后端传给前端用户每天的历史记录，需要前端统计近24小时、近七天、近三十天的数据画出Echarts柱形图，柱形图x轴为近24小时、近七天、近三十天的时间，画图数据为统计的数量。
逻辑梳理
- 获取并引入Echarts（略）
- 为了切换不同时间的柱形图，需要在template中添加三个按钮，并定义有宽度和高度的父容器（画图的位置）
- 在data中定义画图所需要的数据
- 获取当前时间的近24小时作为x轴数据，处理后端传来的数据，找出近24小时的数据并统计数量，将数量作为画图所需要的数据，七天、三十天类似
- 使用Echarts设置动态数据的柱状图
代码部分
在template中：
<div class="button">
<el-button @click="changeDay()">24h</el-button>
<el-button @click="changeWeek()">7days</el-button>
<el-button @click="changeMonth()">30days</el-button>
</div>
<div id="chart" class="grid-content bg-purple-dark"></div>
在data中定义数据,DayData代表近24小时的所需要的x轴数据和画图数据的集合，sDAxisData代表近24小时的画图数据集合，xDAxisData代表近24小时的时间集合：
DayData: [],
WeekData: [],
MonthData: [],
sDAxisData: [],
xDAxisData: [],
sWAxisData: [],
xWAxisData: [],
sMAxisData: [],
xMAxisData: [],
获取近24小时、近七天、近三十天的时间：
//生成两位数的时间格式，如9：01变成09：01
add0(m) {
return m < 10 ? "0" + m : m;
},
// 获取近24小时
getDayDate() {
var myDate = new Date(); // 获取今天日期
myDate.setDate(myDate.getDate());
var dateTemp1 =
myDate.getFullYear() +
"-" +
this.add0(myDate.getMonth() + 1) +
"-" +
this.add0(myDate.getDate()) +
"\xa0";
for (var i = 0; i <= 24; i++) {
var dateTemp2 = this.add0(i);
var key = dateTemp1 + dateTemp2;
var value = 0;
this.DayData[key] = value;
}
this.xDAxisData = Object.keys(this.DayData);
// console.log(this.DayData);
},
// 获取当前日期的前7天
getWeekDate() {
var myDate = new Date(); // 获取今天日期
myDate.setDate(myDate.getDate() - 6);
var dateTemp;
var flag = 1;
for (var i = 0; i < 7; i++) {
dateTemp =
myDate.getFullYear() +
"-" +
this.add0(myDate.getMonth() + 1) +
"-" +
this.add0(myDate.getDate());
var key = dateTemp;
var value = 0;
this.WeekData[key] = value;
// console.log(this.WeekData)
myDate.setDate(myDate.getDate() + flag);
}
this.xWAxisData = Object.keys(this.WeekData);
},
getMonthDate() {
var mDate = new Date(); // 获取今天日期
mDate.setDate(mDate.getDate() - 29);
var dateTempM;
var flag = 1;
for (var i = 0; i < 30; i++) {
dateTempM =
mDate.getFullYear() +
"-" +
this.add0(mDate.getMonth() + 1) +
"-" +
this.add0(mDate.getDate());
var key = dateTempM;
var value = 0;
this.MonthData[key] = value;
// console.log(this.MonthData,"this.MonthData")
mDate.setDate(mDate.getDate() + flag);
}
this.xMAxisData = Object.keys(this.MonthData);
},
生成的数据格式：
根据后端传入的数据格式获取用户使用的时间
// 后端传的时间精确到时 如2023-03-07 17
var timeH =
resultData[i].createOn.split("T")[0] +
"\xa0" +
resultData[i].createOn.split("T")[1].substr(0, 2);
// console.log(timeH);
// 画图数据，匹配近24小时每个小时和后端传来的每个小时 // 若后端的使用时间和近24小时的每个时间匹配，则数量加一
if (Object.keys(this.DayData).indexOf(timeH) > -1) {
this.DayData[timeH]++;
}
//画图数据即数量
this.sDAxisData = Object.values(this.DayData);
// console.log("this.DayData", this.DayData);
// 后端传的时间精确到日，如 2023-03-07
var time = resultData[i].createOn.split("T")[0];
if (Object.keys(this.WeekData).indexOf(time) > -1) {
this.WeekData[time]++;
}
this.sWAxisData = Object.values(this.WeekData);
if (Object.keys(this.MonthData).indexOf(time) > -1) {
this.MonthData[time]++;
}
this.sMAxisData = Object.values(this.MonthData);
若获取总使用量：
// 今天总使用量
this.today = this.WeekData[todate];
// 7天总使用量
this.week = this.sum(Object.values(this.WeekData));
// console.log(this.sum(Object.values(this.WeekData)));
// 30天总使用量
this.month = this.sum(Object.values(this.MonthData));
// console.log(this.MonthData);
// 相加
sum(arr) {
let sum = 0;
arr.forEach(function (item) {
sum += item;
});
return sum;
},
Echarts柱形图：
// 柱状图
getEchartData(x, s) {
var myChart = this.$echarts.init(document.getElementById("chart"));
const option = {
title: {
text: "visits",
left: "center",
},
// 提示框
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
// 工具箱
toolbox: {
show: true,
feature: {
magicType: { type: ["line", "bar"] },
restore: {},
saveAsImage: {},
},
},
// 图表的位置
grid: {
left: "5%",
bottom: "5%",
top: "12%",
},
// 放大缩小
dataZoom: [
{
id: "dataZoomX",
type: "inside",
xAxisIndex: [0],
filterMode: "none",
start: 0,
end: 100,
},
],
// x轴数据
xAxis: {
type: "category",
data: x,
},
yAxis: {
type: "value",
// splitLine:false
},
// 画图数据
series: [{ name: "visits", data: s || 0, type: "bar" }]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
this.$on("hook:destroyed", () => {
window.removeEventListener("resize", function () {
myChart.resize();
});
});
},
按钮点击事件，将画图需要用到的数据传入Echarts设置柱形图的方法中即可
// 点击button触发
changeDay() {
this.getDayDate();
//在时后面加了个“00”，由13改为了13：00
for (var i = 0; i < this.xDAxisData.length; i++) {
this.xDAxisData[i] = this.xDAxisData[i].split("\xa0")[1] + ":00";
}
this.getEchartData(this.xDAxisData, this.sDAxisData);
},
changeWeek() {
this.getEchartData(this.xWAxisData, this.sWAxisData);
},
changeMonth() {
this.getEchartData(this.xMAxisData, this.sMAxisData);
},
成果展示（默认近七天）：
不全面的地方欢迎指出~
