目錄

前言

一、票房數(shù)據(jù)

1、原始表格

2、數(shù)據(jù)庫設(shè)計(jì)

二、Leaflet時(shí)序?qū)崿F(xiàn)

1、時(shí)序展示組件

2、時(shí)序組件接入

3、每日票房Color生成

三、成果展示

1、總體展示

2、時(shí)序票房分布

四、總結(jié)

---

前言

????????在當(dāng)今數(shù)字化時(shí)代，電影產(chǎn)業(yè)蓬勃發(fā)展，電影票房數(shù)據(jù)的分析與展示對(duì)于電影制作方、發(fā)行方以及市場(chǎng)研究人員等具有至關(guān)重要的意義。及時(shí)、準(zhǔn)確且直觀地呈現(xiàn)電影票房的時(shí)序變化，能夠幫助相關(guān)從業(yè)者更好地把握市場(chǎng)動(dòng)態(tài)，制定營銷策略，預(yù)測(cè)電影的商業(yè)前景，也能為觀眾提供參考，了解影片的受歡迎程度。Spring Boot 作為一款流行的 Java 開發(fā)框架，以其簡潔、高效的特性，為快速開發(fā)企業(yè)級(jí)應(yīng)用提供了強(qiáng)大的支持。它極大地簡化了應(yīng)用程序的配置和部署過程，使得開發(fā)者能夠更加專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。而 Leaflet 作為一種廣泛使用的開源 JavaScript 地圖庫，以其輕量級(jí)、功能豐富和易于集成的優(yōu)勢(shì)，成為了在網(wǎng)頁上展示地理數(shù)據(jù)和地圖信息的首選工具之一。

????????本研究旨在利用 Spring Boot 和 Leaflet 的強(qiáng)大功能，構(gòu)建一個(gè)能夠直觀展示電影票房時(shí)序變化的系統(tǒng)，以熱門影片《哪吒 2》為例進(jìn)行深入探索?！赌倪?2》作為一部備受矚目的電影，在市場(chǎng)中具有廣泛的影響力和較高的關(guān)注度，其票房數(shù)據(jù)的變化能夠很好地反映電影市場(chǎng)的動(dòng)態(tài)特征。

????????通過對(duì)《哪吒 2》票房數(shù)據(jù)的收集和整理，利用 Spring Boot 框架搭建后端服務(wù)，實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)、處理和 API 接口的開發(fā)，為前端展示提供穩(wěn)定的數(shù)據(jù)支持。在前端部分，采用 Leaflet 地圖庫結(jié)合時(shí)序數(shù)據(jù)可視化技術(shù)，將《哪吒 2》在不同地區(qū)、不同時(shí)間段的票房數(shù)據(jù)以動(dòng)態(tài)地圖和圖表的形式呈現(xiàn)出來。這樣的展示方式不僅能夠直觀地展示票房的地域差異和時(shí)間趨勢(shì)，還能夠讓用戶通過交互操作，深入了解電影票房的具體變化情況，從而為電影行業(yè)的決策者和研究人員提供有價(jià)值的參考依據(jù)，也為電影愛好者帶來更加豐富的觀影信息體驗(yàn)。在此背景下，本前言將詳細(xì)闡述基于 Spring Boot 和 Leaflet 的電影票房時(shí)序展示研究的背景、意義和目標(biāo)，為后續(xù)的研究內(nèi)容展開奠定堅(jiān)實(shí)的基礎(chǔ)。

一、票房數(shù)據(jù)

????????在上一篇博客中，我們對(duì)全國的總票房信息進(jìn)行了整體的展示，基于SpringBoot和PostGIS的電影票房分省貢獻(xiàn)排行榜-以《哪吒之魔童鬧?！窞槔＿@篇文章內(nèi)容主要是講解一個(gè)整體的展示，票房數(shù)據(jù)是非常適合帶時(shí)序展示的，即每天的票房都不一樣。關(guān)于數(shù)據(jù)的搜集，雖然在上一篇博客中已經(jīng)進(jìn)行講解，這里再次對(duì)基礎(chǔ)數(shù)據(jù)進(jìn)行簡單的講解。

1、原始表格

????????本次原始數(shù)據(jù)采用原始手工采集的方式，當(dāng)然如果有相關(guān)接口的朋友也可以使用在線API的方式來獲取。從燈塔專業(yè)版APP上獲取相應(yīng)的數(shù)據(jù)后，整理成相應(yīng)的Excel，表格數(shù)據(jù)如下：

?????????同時(shí)，為了使用方便，我們也根據(jù)這張Excel設(shè)計(jì)了物理表，用于存儲(chǔ)對(duì)應(yīng)的數(shù)據(jù)。

2、數(shù)據(jù)庫設(shè)計(jì)

????????電影票房的對(duì)應(yīng)物理數(shù)據(jù)庫表結(jié)構(gòu)如下，這里為了演示方便，僅設(shè)計(jì)針對(duì)哪吒2的業(yè)務(wù)表，如果要保存其它的電影的數(shù)據(jù)，則需要做一些展示的擴(kuò)展兼容，這里不進(jìn)行擴(kuò)展。

????????使用票房和省份空間表關(guān)聯(lián)查詢的sql如下所示：

SELECTt1.*,st_asgeojson ( t2.geom ) geomJson 
FROMbiz_nezha_box_office t1,biz_province t2 
WHEREt1.province_code = t2.code;

????????在SQL客戶端中執(zhí)行以后可以看到以下結(jié)果：

二、Leaflet時(shí)序?qū)崿F(xiàn)

? ? ? ? 對(duì)于SpringBoot的后臺(tái)接口設(shè)計(jì)接口與之前的博客內(nèi)容相同，使用同一個(gè)接口來進(jìn)行數(shù)據(jù)的返回，因此這里不再進(jìn)行贅述。這里重點(diǎn)如何在Leaflet中對(duì)時(shí)序數(shù)據(jù)進(jìn)行展示。主要講解時(shí)序組件、如何接入以及如何針對(duì)每天的票房來實(shí)時(shí)構(gòu)建ColorMap實(shí)例。通過本節(jié)，希望能掌握時(shí)序組件的靈活使用。

1、時(shí)序展示組件

????????這里使用一個(gè)新的使用組件，即時(shí)間組件，leaflet-timeline-slider.js。

????????關(guān)于組件的更多知識(shí)，可以使用搜索引擎或者AI來查詢相關(guān)的知識(shí)。下面將介紹幾個(gè)基本的屬性，如下：

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",

????????參數(shù)說明如下：

序號(hào)	參數(shù)	說明
1	position	展示位置，如bottomright
2	timelineItems	時(shí)間軸信息
3	changeMap	地圖更新回調(diào)方法
4	extraChangeMapParams	擴(kuò)展參數(shù)，不必要可以不用

2、時(shí)序組件接入

????????在Leaflet當(dāng)中使用時(shí)序組件的步驟如下，首先先引入時(shí)序組件，腳本如下：

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

????????第二步是設(shè)置控制組件，這里將電影上映十四天的日期作為坐標(biāo)軸數(shù)據(jù)傳入，代碼如下：

//初始化時(shí)間軸的控制單元
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); 

?????????首先來看一下數(shù)據(jù)接口，通過接口可以發(fā)現(xiàn)，后臺(tái)接口已經(jīng)將全部數(shù)據(jù)都返回給了前端，因此在切換時(shí)間的時(shí)候，只需要替換相應(yīng)的票房數(shù)據(jù)即可，而無需重新發(fā)起請(qǐng)求。

????????由此，需要定義一個(gè)ajax請(qǐng)求來獲取相應(yīng)的數(shù)據(jù)，核心方法如下：

function showBoxOffice(){$.ajax({  type:"get",  url:prefix + "/list",  data:{},  dataType:"json",async: false, // 設(shè)置為 false 以同步執(zhí)行cache:false,processData:false,success:function(result){if(result.code == web_status.SUCCESS){showData = result.data;}},error:function(){$.modal.alertWarning("獲取空間信息失敗");}});
}

????????最后來看一下在時(shí)間軸控件中點(diǎn)擊切換不同的日期時(shí)，綁定的函數(shù)代碼如下：

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 = ccolor = 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生成

????????由于每天的電影實(shí)時(shí)票房都會(huì)有所不同，因此在生成色帶對(duì)象時(shí)也需要?jiǎng)討B(tài)生成，在前面的接入代碼中已經(jīng)有有了講解，主要的原理就是循環(huán)時(shí)，先獲取所有省份的票房信息，然后進(jìn)行排序，默認(rèn)是升序的即最大的在最后面，因此我們只需要取數(shù)組中最后一個(gè)元素即可，方法如下：

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;
});
//根據(jù)實(shí)時(shí)的值動(dòng)態(tài)生成colormap
var maxValue = valueArray[valueArray.length - 1];

三、成果展示

????????本節(jié)對(duì)票房14日的時(shí)序結(jié)果進(jìn)行可視化展示，并且結(jié)合時(shí)間來對(duì)票房的空間時(shí)序分布做一個(gè)簡單的分析講解。

1、總體展示

????????經(jīng)過上一節(jié)的代碼實(shí)現(xiàn)后，在界面中就實(shí)現(xiàn)了一個(gè)增加了時(shí)間軸的篩選組件，如下圖所示。

????????在地圖的底部初始了從2025年1月29日到2025年2月11日一共14天的票房時(shí)序空間展示效果?？梢允褂檬髽?biāo)點(diǎn)擊切換不同的時(shí)間票房展示。?

2、時(shí)序票房分布

????????通過上圖可以看到，在電影上映的首日，票房收入基本來自于沿海和長三角地區(qū)，貢獻(xiàn)非常大，也從側(cè)面說明這些地區(qū)的飯后休閑中電影是一種比較重要的方式。

????????電影上映三天后，東南沿海地區(qū)的票房依然給力，而西北和西南地區(qū)的票房依然在春節(jié)假期中。 其中江蘇省在前5日的票房貢獻(xiàn)中穩(wěn)居TOP1，廣東省緊隨其后。而從2月4號(hào)開始，也就是初七開始，廣東省的票房超越江蘇，聯(lián)系到春節(jié)假期可知，初七了，很多朋友都回工作地點(diǎn)上班了，由此可以得知，人口的流動(dòng)也是往江浙廣東流動(dòng)的。

?????????隨著時(shí)間的推移，來到2025年2月11日，隨著口碑的不斷上漲，山東省的票房貢獻(xiàn)來到了top2，超越江蘇省。

????????這一波人口大省的紅利同步展示了出來，比如河南也比較耀眼。這回應(yīng)該是本地的學(xué)生或者還在放假中的大學(xué)生的貢獻(xiàn)比較多吧。 雖然時(shí)間過去了這么久，但回想哪吒，大家對(duì)其中哪個(gè)部分印象最深呢？歡迎評(píng)論區(qū)留言。

四、總結(jié)

????????以上就是本文的主要內(nèi)容，本研究旨在利用 Spring Boot 和 Leaflet 的強(qiáng)大功能，構(gòu)建一個(gè)能夠直觀展示電影票房時(shí)序變化的系統(tǒng)，以熱門影片《哪吒 2》為例進(jìn)行深入探索?！赌倪?2》作為一部備受矚目的電影，在市場(chǎng)中具有廣泛的影響力和較高的關(guān)注度，其票房數(shù)據(jù)的變化能夠很好地反映電影市場(chǎng)的動(dòng)態(tài)特征。通過對(duì)《哪吒 2》票房數(shù)據(jù)的收集和整理，利用 Spring Boot 框架搭建后端服務(wù)，實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)、處理和 API 接口的開發(fā)，為前端展示提供穩(wěn)定的數(shù)據(jù)支持。在前端部分，采用 Leaflet 地圖庫結(jié)合時(shí)序數(shù)據(jù)可視化技術(shù)，將《哪吒 2》在不同地區(qū)、不同時(shí)間段的票房數(shù)據(jù)以動(dòng)態(tài)地圖和圖表的形式呈現(xiàn)出來。哪吒代表的中國文化的崛起，不僅是電影的崛起，更是思想的崛起，期待哪吒3的大作，祝福餃子導(dǎo)演。行文倉促，難免有許多不足之處，如有不足，在此懇請(qǐng)各位專家博主在評(píng)論區(qū)不吝留言指出，不勝感激。