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

以上只是个人开发方法

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