[vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

因公司业务需求，需要做一份订单相关的折线图，

 

 

如果其中有一天没有订单的话，这一天就是空缺的，在绘制折线图的时候是不允许的，所有要求把没有订单数据的日期也要在图表显示。

使用技术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>

以上只是个人开发方法

如果您有好的方法可以在此文章下进行评论。