在业务开发中，经常需要统计最近三十天的相关数据并以柱状图形式展示，方便运营人员直观了解数据波动情况。实现这个功能主要分为两个核心步骤，一是从数据库中精准查询出最近三十天的数据，二是将查询到的数据渲染成柱状图。
一、从数据库查询最近三十天的数据
不同数据库的时间函数略有差异，下面分别介绍常见数据库的查询写法。
1. MySQL数据库查询
MySQL可以使用DATE_SUB函数计算三十天前的日期，再结合时间字段进行筛选：
-- 假设表名为order_record，时间字段为create_time，统计每天的订单量
SELECT
DATE(create_time) AS day,
COUNT(*) AS order_count
FROM order_record
WHERE create_time >= DATE_SUB(CURDATE(), INTERVAL 30 DAY)
GROUP BY DATE(create_time)
ORDER BY day ASC;
2. PostgreSQL数据库查询
PostgreSQL使用NOW()结合INTERVAL计算时间范围：
-- 同样统计order_record表最近三十天的每日订单量
SELECT
DATE(create_time) AS day,
COUNT(*) AS order_count
FROM order_record
WHERE create_time >= NOW() - INTERVAL '30 days'
GROUP BY DATE(create_time)
ORDER BY day ASC;
3. 查询结果说明
上述查询会返回两个字段，day是日期，order_count是该日期对应的统计数值，后续生成柱状图会直接使用这两个字段的数据。
二、生成柱状图的实现步骤
这里使用前端常用的ECharts图表库来实现柱状图，需要先引入ECharts资源。
1. 准备HTML容器
首先在页面中准备一个用来放置柱状图的DOM元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>最近三十天数据统计</title>
<!-- 引入ECharts -->
<script src="https://ipipp.com/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<div id="barChart" style="width: 100%; height: 400px;"></div>
</body>
</html>
2. 处理后端返回的数据
假设后端接口返回的数据格式如下，前端需要先处理成柱状图需要的数组格式：
{
"code": 0,
"data": [
{"day": "2024-05-01", "order_count": 12},
{"day": "2024-05-02", "order_count": 15},
// 省略其他日期数据
]
}
前端处理数据的代码：
// 假设已经从接口获取到res数据
const res = {
code: 0,
data: [
{day: "2024-05-01", order_count: 12},
{day: "2024-05-02", order_count: 15},
{day: "2024-05-03", order_count: 10}
]
};
// 提取日期数组和数值数组
const dayList = res.data.map(item => item.day);
const countList = res.data.map(item => item.order_count);
3. 初始化柱状图
使用处理后的数据初始化ECharts柱状图：
// 初始化图表实例
const chartDom = document.getElementById('barChart');
const myChart = echarts.init(chartDom);
// 配置项
const option = {
title: {
text: '最近三十天每日订单量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: dayList,
axisLabel: {
rotate: 45 // 日期过长时旋转显示
}
},
yAxis: {
type: 'value',
name: '订单量'
},
series: [
{
name: '订单量',
type: 'bar',
data: countList,
itemStyle: {
color: '#5470c6'
}
}
]
};
// 设置配置项并渲染图表
myChart.setOption(option);
// 窗口大小变化时重绘图表
window.addEventListener('resize', function() {
myChart.resize();
});
三、注意事项
- 数据库查询时要确保时间字段有索引，避免全表扫描影响查询性能，尤其是数据量较大的表。
- 如果某天没有数据，查询结果中可能不会返回该日期的记录，前端需要做补零处理，保证三十天的日期完整。
- 柱状图的颜色、标题、提示框等配置可以根据实际需求调整，ECharts官方文档有详细的配置项说明。
如果使用的是其他后端语言，只需要按照对应数据库的语法编写查询语句，前端处理逻辑基本一致，只需要调整数据获取的接口调用方式即可。