因公司业务需求，需要做一份订单相关的折线图，
如果其中有一天没有订单的话，这一天就是空缺的，在绘制折线图的时候是不允许的，所有要求把没有订单数据的日期也要在图表显示。
使用技术vue3.0+springboot2.0 ,本次做一个粗略的记录，以便后期查阅和帮助有需要的人。
效果图:
主要展示目的: 当月订单每日的订单数量及每日订单总金额,如当日没有订单 依旧展示日期,且数量和金额均为0.
先来看下主要sql:
SELECT
sum(money) AS totalMoney,
sum(count) AS totalCount,
date_format(createTime, '%m-%d') AS orderTime
FROM
(
SELECT
SUM(tos.actuallyMoney) money,
count(*) count,
date_format(tos.createTime, '%Y-%m-%d') createTime
FROM
tb_order_shop tos
WHERE
tos.`status` = 'A'
AND tos.payStatus = 2
AND DATE_FORMAT(tos.createTime, '%Y%m') = DATE_FORMAT(CURDATE(), '%Y%m')
GROUP BY
tos.createTime
UNION ALL
SELECT
@money := 0.00 AS money,
@count := 0 AS count,
createTime
FROM
(
SELECT
@num :=@num + 1 AS number,
date_format(
adddate(
DATE_ADD(
curdate(),
INTERVAL - DAY (curdate()) + 1 DAY
),
INTERVAL @num DAY
),
'%Y-%m-%d'
) AS createTime
FROM
tb_order_shop,
(SELECT @num :=- 1) t
WHERE
adddate(
DATE_ADD(
curdate(),
INTERVAL - DAY (curdate()) + 1 DAY
),
INTERVAL @num DAY
) < date_format(NOW(), '%Y-%m-%d')
ORDER BY
createTime
) date
) shopOrder
GROUP BY
shopOrder.createTime
ORDER BY
createTime
查询结果:
前端Vue代码：
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template> <script>
export default {
data: function () {
return {
chartData: {
columns: ['日期', '下单用户', '总金额'],
rows: []
}
}
},
mounted() {
this.getOrderInfo();
},
methods:{
getOrderInfo(){
this.$ajax({
method: "post",
url: "/home/getLineChartInfo"
}).then(response => {
let res = response.data;
if (res.message == "success") {
this.chartData.rows = res.data;
}
});
}
}
};
</script>
以上只是个人开发方法
如果您有好的方法可以在此文章下进行评论。