前言

在数字化时代，电影票房数据的分析与展示对于制作方、发行方及市场研究人员至关重要。及时、直观地呈现票房的时序变化，有助于把握市场动态并制定策略。

本项目利用 Spring Boot 构建后端服务，结合 Leaflet 地图库与时间轴组件，实现了一个能够直观展示电影票房时序变化的系统。以热门影片《哪吒 2》为例，通过 Spring Boot 搭建后端 API，为前端提供稳定的数据支持；前端则采用 Leaflet 结合时序可视化技术，将不同地区、不同时间段的票房数据以动态地图形式呈现。这种方式不仅展示了地域差异和时间趋势，还允许用户交互操作，深入了解具体变化情况。

文章配图

一、票房数据

1、原始表格

本次原始数据采用手工采集方式整理成 Excel 表格。从灯塔专业版 APP 获取相应数据后，进行清洗和结构化处理。

文章配图

为了便于存储和查询，我们根据这张 Excel 设计了物理表。

2、数据库设计

电影票房的对应物理数据库表结构如下。这里为了演示方便，仅设计针对《哪吒 2》的业务表。如果要保存其他电影的数据，则需要做扩展兼容。

文章配图

使用票房表和省份空间表关联查询的 SQL 如下：

SELECT t1.*, st_asgeojson ( t2.geom ) geomJson 
FROM biz_nezha_box_office t1, biz_province t2 
WHERE t1.province_code = t2.code;

在 SQL 客户端执行以后可以看到以下结果：

文章配图

二、Leaflet 时序实现

Spring Boot 后台接口设计与常规 RESTful API 无异，重点在于如何在 Leaflet 中对时序数据进行展示。我们将讲解时序组件的使用、接入流程以及如何针对每天的票房实时构建 ColorMap 实例。

1、时序展示组件

这里引入一个新的组件 leaflet-timeline-slider.js。

文章配图

该组件的基本属性配置如下：

position: 'bottomright', 
timelineItems: ["Today", "Tomorrow", "The Next Day"], 
changeMap: function({label, value, map}) { 
    console.log("You are not using the value or label from the timeline to change the map."); 
}, 
extraChangeMapParams: {}, 
initializeChange: true, 
thumbHeight: "4.5px", 
labelWidth: "80px"

参数说明：

序号	参数	说明
1	position	展示位置，如 bottomright
2	timelineItems	时间轴信息
3	changeMap	地图更新回调方法
4	extraChangeMapParams	扩展参数，不必要可以不用

2、时序组件接入

在 Leaflet 中使用时序组件的步骤如下：

首先引入时序组件脚本：

<!-- leaflet-timeline-slider.js --> 
<script th:src="@{/js/plugins/timeline/leaflet-timeline-slider.js}"></script>

第二步是设置控制组件，将电影上映十四天的日期作为坐标轴数据传入：

//初始化时间轴的控制单元 
L.control.timelineSlider({
    timelineItems: ["250129", "250130", "250131", "250201", "250202", "250203",
                   "250204","250205", "250206", "250207", "250208", "250209", 
                   "250210","250211"], 
    changeMap: getDataAddMarkers, 
    extraChangeMapParams: {exclamation: "params"} 
}).addTo(mymap);

这里不需要每次切换时间都重新发起请求，因为后台接口已经一次性返回了全部数据。核心方法是定义一个 ajax 请求来获取相应的数据：

function showBoxOffice(){ 
    $.ajax({ 
        type:"get", 
        url:prefix + "/list", 
        data:{}, 
        dataType:"json", 
        async: false, // 设置为 false 以同步执行 
        cache:false, 
        processData:false, 
        success:function(result){ 
            if(result.code == web_status.SUCCESS){ 
                showData = result.data; 
            } 
        }, 
        error:function(){ 
            $.modal.alertWarning("获取空间信息失败"); 
        } 
    }); 
}

最后来看时间轴控件中点击切换不同日期时绑定的函数逻辑：

getDataAddMarkers = function( {label, value, map, exclamation} ) { 
    $("#day").html(value); 
    showLayerGroup.clearLayers(); 
    var legendData = new Array(); 
    var valueArray = new Array(); 
    
    // 收集当日所有省份票房数据用于计算色阶范围 
    for(var i = 0;i< showData.length;i++){ 
        var boxofficeValue = showData[i]["day" + value]; 
        valueArray.push(boxofficeValue); 
    } 
    
    // 排序以便找到最大值 
    valueArray.sort(function(a,b){ return a -b; }); 
    var maxValue = valueArray[valueArray.length - 1]; 
    
    // 动态生成颜色方案 
    DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 0,maxValue , 
        [new Color(35, 168, 231), new Color(19, 205, 84), 
         new Color(226, 229, 10), new Color(225,56,56), new Color(255,0,0)]); 
    
    for(var i = 0;i< showData.length;i++){ 
        var areaData = showData[i]; 
        var boxofficeValue = areaData["day" + value]; 
        var color = makeColor(boxofficeValue,0,maxValue,DIY_BLUE_GREEN_YELLOW_RED_SCHEME); 
        var content = areaData.provinceName + "<br/>"+boxofficeValue+"万元"; 
        var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson), {style: {color:color,fillColor:color,weight:2,"opacity":0.8, fillOpacity: 0.8 }}).bindPopup(content).addTo(showLayerGroup); 
        
        legendData.push({ 
            label: "\xa0\xa0"+areaData.provinceName + "\r\n\xa0\xa0" +boxofficeValue, 
            type: "rectangle", radius: 12, color: color, fillColor: color, 
            fillOpacity: 0.8, weight: 2}); 
    } 
    initLegend(legendData); 
};

3、每日票房 Color 生成

由于每天的电影实时票房都会有所不同，因此在生成色带对象时也需要动态生成。主要原理是在循环时先获取所有省份的票房信息，然后进行升序排序，取数组最后一个元素即为最大值，以此为基础动态生成 colormap。

三、成果展示

本节对票房 14 日的时序结果进行可视化展示，并结合时间分析票房的空间时序分布。

1、总体展示

经过代码实现后，界面中增加了一个带有时间轴的筛选组件。

文章配图

地图底部初始化了从 2025 年 1 月 29 日到 2025 年 2 月 11 日一共 14 天的票房时序空间展示效果，可以通过鼠标点击切换不同的时间票房展示。

2、时序票房分布

通过上图可以看到，在电影上映的首日，票房收入基本来自于沿海和长三角地区，贡献非常大，也从侧面说明这些地区的休闲活动中电影是一种比较重要的方式。

文章配图

电影上映三天后，东南沿海地区的票房依然给力，而西北和西南地区的票房依然在春节假期中。其中江苏省在前 5 日的票房贡献中稳居 TOP1，广东省紧随其后。而从 2 月 4 号开始，也就是初七开始，广东省的票房超越江苏。联系到春节假期可知，初七了，很多朋友都回工作地点上班了，由此可以得知，人口的流动也是往江浙广东流动的。

文章配图

随着时间的推移，来到 2025 年 2 月 11 日，随着口碑的不断上涨，山东省的票房贡献来到了 top2，超越江苏省。

文章配图

这一波人口大省的红利同步展示了出来，比如河南也比较耀眼。这回应该是本地的学生或者还在放假中的大学生的贡献比较多吧。

四、总结

以上就是本文的主要内容。本研究旨在利用 Spring Boot 和 Leaflet 的强大功能，构建一个能够直观展示电影票房时序变化的系统。通过对《哪吒 2》票房数据的收集和整理，利用 Spring Boot 框架搭建后端服务，实现数据的存储、处理和 API 接口的开发，为前端展示提供稳定的数据支持。在前端部分，采用 Leaflet 地图库结合时序数据可视化技术，将《哪吒 2》在不同地区、不同时间段的票房数据以动态地图的形式呈现出来。哪吒代表的中国文化的崛起，不仅是电影的崛起，更是思想的崛起，期待后续更多优秀作品的诞生。

Java大前端java

基于 SpringBoot 和 Leaflet 的电影票房时序可视化

综述由AI生成项目采用 Spring Boot 后端配合 Leaflet 前端，实现了电影票房的时空可视化。通过 PostGIS 管理地理数据，利用时间轴组件动态切换日期，实时计算票房最大值并生成对应的颜色映射方案。前端无需重复请求接口，直接切换本地数据渲染不同日期的区域票房分布，直观展示了票房随时间的地域变化趋势及人口流动影响。

SparkGeek发布于 2026/3/22更新于 2026/4/272 浏览

前言

文章配图

一、票房数据

1、原始表格

本次原始数据采用手工采集方式整理成 Excel 表格。从灯塔专业版 APP 获取相应数据后，进行清洗和结构化处理。

文章配图

为了便于存储和查询，我们根据这张 Excel 设计了物理表。

2、数据库设计

电影票房的对应物理数据库表结构如下。这里为了演示方便，仅设计针对《哪吒 2》的业务表。如果要保存其他电影的数据，则需要做扩展兼容。

文章配图

使用票房表和省份空间表关联查询的 SQL 如下：

SELECT t1.*, st_asgeojson ( t2.geom ) geomJson 
FROM biz_nezha_box_office t1, biz_province t2 
WHERE t1.province_code = t2.code;

在 SQL 客户端执行以后可以看到以下结果：

文章配图

二、Leaflet 时序实现

1、时序展示组件

这里引入一个新的组件 leaflet-timeline-slider.js。

文章配图

该组件的基本属性配置如下：

position: 'bottomright', 
timelineItems: ["Today", "Tomorrow", "The Next Day"], 
changeMap: function({label, value, map}) { 
    console.log("You are not using the value or label from the timeline to change the map."); 
}, 
extraChangeMapParams: {}, 
initializeChange: true, 
thumbHeight: "4.5px", 
labelWidth: "80px"

参数说明：

序号	参数	说明
1	position	展示位置，如 bottomright
2	timelineItems	时间轴信息
3	changeMap	地图更新回调方法
4	extraChangeMapParams	扩展参数，不必要可以不用

2、时序组件接入

在 Leaflet 中使用时序组件的步骤如下：

首先引入时序组件脚本：

<!-- leaflet-timeline-slider.js --> 
<script th:src="@{/js/plugins/timeline/leaflet-timeline-slider.js}"></script>

第二步是设置控制组件，将电影上映十四天的日期作为坐标轴数据传入：

//初始化时间轴的控制单元 
L.control.timelineSlider({
    timelineItems: ["250129", "250130", "250131", "250201", "250202", "250203",
                   "250204","250205", "250206", "250207", "250208", "250209", 
                   "250210","250211"], 
    changeMap: getDataAddMarkers, 
    extraChangeMapParams: {exclamation: "params"} 
}).addTo(mymap);

这里不需要每次切换时间都重新发起请求，因为后台接口已经一次性返回了全部数据。核心方法是定义一个 ajax 请求来获取相应的数据：

function showBoxOffice(){ 
    $.ajax({ 
        type:"get", 
        url:prefix + "/list", 
        data:{}, 
        dataType:"json", 
        async: false, // 设置为 false 以同步执行 
        cache:false, 
        processData:false, 
        success:function(result){ 
            if(result.code == web_status.SUCCESS){ 
                showData = result.data; 
            } 
        }, 
        error:function(){ 
            $.modal.alertWarning("获取空间信息失败"); 
        } 
    }); 
}

最后来看时间轴控件中点击切换不同日期时绑定的函数逻辑：

getDataAddMarkers = function( {label, value, map, exclamation} ) { 
    $("#day").html(value); 
    showLayerGroup.clearLayers(); 
    var legendData = new Array(); 
    var valueArray = new Array(); 
    
    // 收集当日所有省份票房数据用于计算色阶范围 
    for(var i = 0;i< showData.length;i++){ 
        var boxofficeValue = showData[i]["day" + value]; 
        valueArray.push(boxofficeValue); 
    } 
    
    // 排序以便找到最大值 
    valueArray.sort(function(a,b){ return a -b; }); 
    var maxValue = valueArray[valueArray.length - 1]; 
    
    // 动态生成颜色方案 
    DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 0,maxValue , 
        [new Color(35, 168, 231), new Color(19, 205, 84), 
         new Color(226, 229, 10), new Color(225,56,56), new Color(255,0,0)]); 
    
    for(var i = 0;i< showData.length;i++){ 
        var areaData = showData[i]; 
        var boxofficeValue = areaData["day" + value]; 
        var color = makeColor(boxofficeValue,0,maxValue,DIY_BLUE_GREEN_YELLOW_RED_SCHEME); 
        var content = areaData.provinceName + "<br/>"+boxofficeValue+"万元"; 
        var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson), {style: {color:color,fillColor:color,weight:2,"opacity":0.8, fillOpacity: 0.8 }}).bindPopup(content).addTo(showLayerGroup); 
        
        legendData.push({ 
            label: "\xa0\xa0"+areaData.provinceName + "\r\n\xa0\xa0" +boxofficeValue, 
            type: "rectangle", radius: 12, color: color, fillColor: color, 
            fillOpacity: 0.8, weight: 2}); 
    } 
    initLegend(legendData); 
};

3、每日票房 Color 生成

三、成果展示

本节对票房 14 日的时序结果进行可视化展示，并结合时间分析票房的空间时序分布。

1、总体展示

经过代码实现后，界面中增加了一个带有时间轴的筛选组件。

文章配图

地图底部初始化了从 2025 年 1 月 29 日到 2025 年 2 月 11 日一共 14 天的票房时序空间展示效果，可以通过鼠标点击切换不同的时间票房展示。

2、时序票房分布

文章配图

随着时间的推移，来到 2025 年 2 月 11 日，随着口碑的不断上涨，山东省的票房贡献来到了 top2，超越江苏省。

文章配图

这一波人口大省的红利同步展示了出来，比如河南也比较耀眼。这回应该是本地的学生或者还在放假中的大学生的贡献比较多吧。

基于 SpringBoot 和 Leaflet 的电影票房时序可视化

前言

一、票房数据

1、原始表格

2、数据库设计

二、Leaflet 时序实现

1、时序展示组件

2、时序组件接入

3、每日票房 Color 生成

三、成果展示

1、总体展示

2、时序票房分布

四、总结

基于 SpringBoot 和 Leaflet 的电影票房时序可视化

前言

一、票房数据

1、原始表格

2、数据库设计

二、Leaflet 时序实现

1、时序展示组件

2、时序组件接入

3、每日票房 Color 生成

三、成果展示

1、总体展示

2、时序票房分布

四、总结

更多推荐文章

相关免费在线工具

更多推荐文章

相关免费在线工具

基于 SpringBoot 和 Leaflet 的电影票房时序可视化

前言

一、票房数据

1、原始表格

2、数据库设计

二、Leaflet 时序实现

1、时序展示组件

2、时序组件接入

3、每日票房 Color 生成

三、成果展示

1、总体展示

2、时序票房分布

四、总结

基于 SpringBoot 和 Leaflet 的电影票房时序可视化

前言

一、票房数据

1、原始表格

2、数据库设计

二、Leaflet 时序实现

1、时序展示组件

2、时序组件接入

3、每日票房 Color 生成

三、成果展示

1、总体展示

2、时序票房分布

四、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具