[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>

以上只是個人開發方法

如果您有好的方法可以在此文章下進行評論。