苍穹外卖-DAY11

一、Apache Ecaht

Apache ECharts 是一个基于 JavaScript 的开源可视化图表库。它最早由百度开发，后来捐赠给了 Apache 软件基金会，现在是 Apache 的顶级项目。

它在前端开发中非常流行，特别是对于后台管理系统（如你正在做的 sky-take-out 项目）的数据大屏和报表展示。

以下是关于 Apache ECharts 的详细解释，包括核心概念、优势以及如何使用。

1. 核心优势

  • 开源免费：完全免费，遵循 Apache 2.0 协议。
  • 图表类型丰富：不仅支持基础的折线图、柱状图、饼图，还支持地图、热力图、雷达图、关系图（Graph）、K线图、3D 图表等。
  • 高性能：基于 ZRender（一个轻量级的 Canvas 类库），能够流畅展示成千上万条数据，甚至支持千万级数据的渲染。
  • 交互性强：自带缩放（Zoom）、漫游（Roam）、图例开关、数据区域缩放、拖拽重计算等交互功能。
  • 配置式驱动：你只需要定义一个 JSON 格式的配置对象（option），ECharts 就会自动渲染出图表，无需关心底层的绘图逻辑。

2. 核心概念

使用 ECharts 基本上就是在构建一个 option 对象。理解以下几个属性至关重要：

  • title (标题): 图表的标题。
  • tooltip (提示框): 鼠标悬停在图表元素上时显示的信息框。
  • legend (图例): 用于筛选系列的分类（例如点击图例可以隐藏某条折线）。
  • xAxis / yAxis (坐标轴): 直角坐标系中的 X 轴和 Y 轴配置。
  • series (系列): 最关键的部分。定义了数据是什么，以及用什么类型的图表（type）来展示（如 type: 'bar' 是柱状图，type: 'line' 是折线图）。
  • grid (绘图网格): 控制图表在容器中的位置和内边距。

3. 快速上手代码示例

步骤：

  1. 准备一个有宽高的 DOM 容器。
  2. 引入 ECharts 库。
  3. 初始化 ECharts 实例。
  4. 配置 option 并设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 2. 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 3. 指定图表的配置项和数据 (核心逻辑)
        var option = {
            title: {
                text: '外卖订单统计'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {}, // y轴通常不需要配置data，会自动根据数值生成刻度
            series: [
                {
                    name: '销量',
                    type: 'bar', // 这里指定为柱状图
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 4. 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

4. 在 Vue 项目中使用

既然你在做 Java 后端项目，前端很可能使用的是 Vue.js。在 Vue 中使用 ECharts 通常有两种方式：

方式一：直接使用

在组件的 mounted 生命周期钩子中初始化：

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const chartDom = this.$refs.chart;
    const myChart = echarts.init(chartDom);
    myChart.setOption({
      // ... 配置项
    });
    
    // 监听窗口大小变化，实现图表自适应
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
}
</script>

方式二：使用封装组件

社区有封装好的库，如 vue-echarts，可以更方便地以组件形式使用。

5. 高级功能简述

  1. 多图联动 (Connect): 可以让多个图表共享 tooltip 或缩放。
  2. 动态数据: 可以通过 setOption 动态更新数据，ECharts 会自动寻找差异并执行动画过渡。
  3. 自定义主题: 可以在官网的主题构建工具中设计配色，下载 JSON 后导入使用。
  4. 地图可视化: 支持中国地图、世界地图以及各省市地图，常用于展示地域分布数据（如全国外卖订单热力图）。

官方网站

1
https://echarts.apache.org/zh/index.html

dateList

1
2
3
4
5
6
List<LocalDate> list = new ArrayList<>();
LocalDate currentDate = begin;
while (!currentDate.isAfter(end)) {
    list.add(currentDate);
    currentDate = currentDate.plusDays(1);
}

通过范围获取dataList

二、springboot中时间相关接口

1.时间三剑客（数据类型）

类型 名字 存什么？ 例子 适用场景
LocalDate 本地日期 只存日期 (年月日) 2023-10-01 生日、入职日期、节假日
LocalTime 本地时间 只存时间 (时分秒) 12:30:05 闹钟、午休开始时间
LocalDateTime 本地日期时间 都存 (日期+时间) 2023-10-01 12:30:05 订单创建时间、打卡记录

一句话总结： 90% 的业务场景，你直接用 LocalDateTime 准没错。

2.DateTimeFormatter

DateTimeFormatter。它的作用就是在“时间对象”和“字符串”之间做转换。

  • 把时间变成字符串 (Format)： 2023-10-01 12:00:00 (对象) -> "2023/10/01" (字符串)
  • 把字符串变成时间 (Parse)： "2023-10-01" (字符串) -> 2023-10-01 (对象)

3.springboot中配置类全局定义

@Configuration 配置类。

最彻底的全局配置代码

你可以直接把这段代码复制到你的项目中（新建一个类放进去）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import com.fasterxml.jackson.datatype.jsr310.deser.LocalDateTimeDeserializer;
import org.springframework.boot.autoconfigure.jackson.Jackson2ObjectMapperBuilderCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

@Configuration // 1. 这是一个配置类
public class LocalDateTimeConfig {

    private static final String TIME_PATTERN = "yyyy-MM-dd HH:mm:ss";

    @Bean
    public Jackson2ObjectMapperBuilderCustomizer jacksonCustomizer() {
        return builder -> {
            DateTimeFormatter formatter = DateTimeFormatter.ofPattern(TIME_PATTERN);

            // 2. 告诉 Spring：遇到 LocalDateTime 怎么序列化（出参：转成字符串）
            builder.serializerByType(LocalDateTime.class, new LocalDateTimeSerializer(formatter));
            
            // 3. 告诉 Spring：遇到 LocalDateTime 怎么反序列化（入参：字符串转对象）
            builder.deserializerByType(LocalDateTime.class, new LocalDateTimeDeserializer(formatter));
        };
    }
}

配置后的效果：

  • 以前： 你得在 User 类的 createTime 字段上加 @JsonFormat(pattern=...)。
  • 现在： 什么都不用加！只要字段类型是 LocalDateTime，Spring Boot 就会自动根据上面的配置，把它处理成 yyyy-MM-dd HH:mm:ss。

4.注解区别

这俩确实是“最容易搞混”的难兄难弟。别被名字忽悠了，它俩的区别其实特别简单，就看你的数据“长在哪儿”。

一句话口诀：@JsonFormat 管肚子（Body），@DateTimeFormat 管帽子（URL/表单）。

@JsonFormat (Jackson 库提供)

它是处理 JSON 数据 的。只要你的接口涉及到 JSON 格式（不管是发出去，还是收进来），就是它的地盘。

  • 场景：
    • 出参：后端把对象转成 JSON 返回给前端时（序列化）。
    • 入参：前端发 POST/PUT 请求，把 JSON 数据放在 Body 里传给后端时（反序列化）。
  • 位置：通常加在实体类（DTO/POJO）的 字段 上。
1
2
3
4
5
6
7
8
9
10
public class UserDTO {
    // 前端传 JSON: {"birthday": "2023-10-01"}
    // 后端返 JSON: {"birthday": "2023-10-01"}
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private LocalDate birthday;
}

// Controller
@PostMapping("/add")
public UserDTO add(@RequestBody UserDTO user) { ... } // 必须是用 @RequestBody 接收

@DateTimeFormat (Spring 框架提供)

它是处理 非 JSON 数据 的。也就是那些挂在 URL 后面，或者用普通表单提交的数据。

  • 场景：
    • 入参：前端发 GET 请求，参数在 URL 问号后面（如 ?date=2023-10-01）。
    • 入参：前端用普通 <form> 表单提交（application/x-www-form-urlencoded）。
  • 位置：可以加在 Controller 方法的参数 前面，也可以加在实体类的字段上（如果这个实体是用作表单接收对象）。
1
2
3
4
5
6
7
// Controller
@GetMapping("/search")
public List<User> search(
    // URL 是这样：/search?startDate=2023-10-01
    // 如果不加这个注解，Spring 可能会报错说 String 转不成 LocalDate
    @DateTimeFormat(pattern = "yyyy-MM-dd") LocalDate startDate
) { ... }
特性 @JsonFormat @DateTimeFormat
出身 Jackson 库 (第三方) Spring 框架 (亲儿子)
管辖范围 JSON Body (请求体/响应体) URL 参数 (Query Param) 或 表单
典型请求 POST (带 JSON), PUT GET (带参数), 普通表单 POST
关键注解配合 必须配合 @RequestBody 才会生效 配合 @RequestParam 或直接对象接收
常用程度 ⭐⭐⭐⭐⭐ (因为现在前后端分离都用 JSON) ⭐⭐⭐ (老项目或简单的查询接口用)

配置了全局的时间转换器（Configuration），那么：

  • @JsonFormat` 基本就可以退休了（全局搞定 JSON）
  • 但 @DateTimeFormat 在写 GET 请求的 Controller 参数时，可能偶尔还得用一下