商業智能可視化大屏展示系統設計與實現

蔡杰英 劉致中 鄭程遠

摘? 要： 為解決傳統商業智能存在的報表形式單一、時間滯后等問題，搭建了集數據分析與數據可視化于一體的信息管理系統，應用于企業管理決策。該系統設計上采用Flask框架開發，利用Python進行海量數據分析，將Echarts作為可視化工具，在系統搭建方法上具有創新性。采用“5W1H”研究方法，對商業智能可視化系統進行分析，設計出客戶產品需求、最佳銷售時段、倉庫選址、人群畫像等模塊，為智能商業的發展設計提供更為詳細的思路和決策分析。

關鍵詞： 大屏可視化； 商業智能； Flask； 數據分析系統； 管理決策； 5W1H

中圖分類號：TP274? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2023）06-124-05

Design and implementation of large-screen display system for business intelligence

Cai Jieying1， Liu Zhizhong2， Zheng Chengyuan3

（1. Guangdong University of Foreign Studies， School of Finance， Guangzhou， Guangdong 510000， China;

2. Guangdong University of Finance and Economics， School of Information; 3. Guangdong University of Technology）

Abstract： In order to solve the problems of information lacking and delay in traditional business intelligence （BI）， a BI information system integrating data analysis and data visualization is proposed for improving enterprise management decision-making. Flask framework is used in the design of the system， Python language is used for mass data analysis， and Echarts is used as a visual tool. The "5W1H" （What， When， Where， Who， Why and How） research method is used to analyze the business intelligence visualization system and design modules such as customer product demand， optimal sales time， warehouse location and crowd portrait. It provides more detailed ideas and decision analysis for the development of intelligent business design.

Key words： large screen visualization; business intelligence; Flask; data analysis system; management decision; 5W1H

0 引言

大數據時代，國內的越來越多企業正利用商業智能技術來提升自身的數據分析能力，從而創新商務模式[1]。研究表明，人們已知的信息來源有80%是通過視覺獲得的[2]，且當前商業智能正不斷向現代模式轉化[3]，將可視化技術與商業智能相結合，構建更加新型現代的商業模式具有良好發展前景。

推動商業智能的發展需要借助動態交互、可視化較強的分析工具，而傳統的分析工具如Excel和SQL Server在數據挖掘上都存在一定不足[3]。一是Excel數據容量有限，可創建的圖表類型單一、交互性較差；二是SQL Server對表格篩選、排序等操作涉及到復雜查詢時，需借助大量SQL語句，較為冗雜，且其本身缺乏可視化功能。故而這兩者均不適合作為商業智能的數據分析工具。利用Python集成各種數據分析方法，可完成復雜的數據準備、建模工作，挖掘數據背后的價值[4]，Python是良好的數據分析工具。

本文利用Flask框架進行系統開發，搭建前、后端分離的可視化系統，同時引入Python數據分析工具來進行數據挖掘。將數據分析與可視化結合，以此構建大屏可視化系統，將其應用于電商等行業，以充分挖掘數據背后的有用信息。并以此來構建特定的營銷策略，提高企業決策效率，對推動商業智能的發展具有研究價值。

1 相關工作

1.1 商業智能

商業智能技術（Business Intelligence，簡稱：BI）提供使企業迅速分析數據的技術和方法， 將數據轉化為有用的信息[5]。當前，市場上有兩種BI類型。一是傳統BI，主要指內部技術人員分析交易數據并生成決策報告。二是現代BI，主要指用戶與數據可視化系統間的交互，實現以更快、更直觀地分析數據來進行決策[2]。

傳統BI模式的具體數據由下層往上層傳遞，會出現報表形式單一、表現力不強，時間存在滯后等問題，不能適應當下急速發展的數據時代[6]。

1.2 數據可視化

縱觀國內外數據可視化技術研究[7]，較為流行的有：①前端可視化庫D3.js，將可視化、動態交互和數據驅動的DOM容器完美結合，高自由度操作，但學習難度高；②Plotly.js，便于實現動態交互，但其支持的圖表種類太少；③Highcharts.js，可支持超過20種圖表的渲染，但其購買成本較高；④Echarts.js，兼容性較高，支持多達20種的圖表，更方便圖表的使用和切換，其完全免費、開源和易讀性，被廣泛應用于大屏可視化領域。

1.3 主要相關技術

搭建大屏數據可視化系統的現有相關技術有很多，如jsp、aspx等系統開發技術，如plotly.js，Echarts.js等可視化技術，但本研究涉及的技術最主要有以下三類。

⑴ Echarts可視化庫：ECharts是開源免費的可視化庫，基于JavaScript語言編寫，支持多圖表在同一DOM容器中混合展現，適用于目前流行的絕大部分瀏覽器，還具有高度自由化等優點。

⑵ Flask框架：Flask是基于Python編寫的Web應用框架，其WSGI工具箱采用Werkzeug，模板引擎則使用Jinja2。Werkzeug和Jinja2兩個核心函數庫，分別負責業務處理和安全方面的功能，提供眾多基礎組件。此外，該框架的基本模式為：在應用端將函數分配給一個URL，當用戶訪問該URL時，系統就會執行分配好的函數，獲取函數返回值并將其顯示到瀏覽器上[8]。其工作過程如圖1所示。

⑶ Ajax技術：使用Ajax技術網頁應用能快速地將增量更新呈現在用戶界面上，無須重載整個頁面，使得程序能夠更快地回應用戶的操作。

1.4 研究方法

“5W1H”分析法，是管理工作中對目標計劃進行分解和決策的思維模式，為人們提供科學的工作分析方法[9]。強調對選定的項目從What，When，Where，Why，Who，How六個方面來考慮，從而提出行動計劃和方案。

2 研究架構

本系統采用B/S結構[10]，在該結構的基礎上將系統分為三層：數據層、服務層、應用層，如圖2所示。

2.1 數據層：多源數據配置

數據層主要是為服務層的業務邏輯提供各類型的數據支持，清洗數據、存儲數據，將底層數據傳給上層業務邏輯層處理。

為了讓系統能適應多種數據變化，并且在交互過程中能對圖表數據進行聯動修改，系統提供了靜態JSON數據連接和文件數據連接。前者可以是從API接口獲取到的實時數據，后者指將數據存儲到csv中，通過Python連接數據源并對其統計，然后轉化成JSON數據格式，以方便可視化表達編寫代碼的實現。

2.2 服務層：數據挖掘的實現

服務層是連接數據層與應用層的橋梁，由Flask請求數據源并對數據進行分類統計。

為了更好地實現數據分析，本系統選擇Python工具而非 SQLite數據庫，因此選用Flask框架，創新性地以Python實現后端，負責數據清洗，連接數據源，并對數據進行建模處理，再通過路由器里定義的函數連接前后端，將處理后的數據進行渲染，展示到前端。

2.3 應用層：可視化組件配置

應用層利用Echarts對服務層統計后的數據進行渲染展示在前端頁面中，通過Ajax技術可以實現局部數據實時替換，提高渲染效率。

為了讓系統直觀化、易用化，在設計時要考慮其可視化布局的合理性以及靈活性。

最終，得到系統運作圖如圖3。瀏覽器獲取靜態頁面，運行js并向后端發起數據請求，應用服務器（Flask）接收請求并向數據源（DataSource）請求操作數據。

3 系統設計與實現

3.1 系統整體架構設計

通過對系統的需求分析與架構分析，可得到系統總體設計如圖4所示。系統前端為可視化配置，系統后端為數據源配置[7]。以某電商平臺的銷售數據為實驗對象進行分析，可視化配置可以分為四個模塊——銷售產品模塊、熱銷時段模塊、人口屬性模塊、地圖模塊。數據源可以接受實時API數據和本地的csv文件兩種，csv文件是經由清洗過后的數據。

3.2 系統程序運行設計

建立一個數據清洗文件data_clean.py，對csv文件進行數據清洗，生成新的csv文件，data.py對新的csv文件進行處理分析。

先對Flask框架實例化，繼而分發路由，通過render_template引入index.html，并根據后面傳入的數據源，對html進行修改、渲染。最終得到大屏可視化系統程序運行的總流程圖如圖5。

3.3 主要功能實現

3.3.1 數據源配置

系統以某電商平臺的銷售數據為實驗對象進行分析，元數據來源于REES46電子商務的CDP平臺，經過脫敏處理，描述的是2020年1月至2020年11月從一家大型家用電器和電子產品在線商店購買的數據。

經過數據類型轉換、缺失值填補、重復值刪除、異常值處理之后，由原來的564169行數據清洗為562149行數據，用于最終可視化分析統計。

3.3.2 可視化配置

系統采用Echarts渲染生成可視化圖表，并展示在前端的DOM容器當中。Echarts圖表生成過程如下。

⑴ 實例化對象init

var myChart=echarts.init（document.getElementById（ ））;

調用Echarts庫的初始化方法，綁定DOM容器id，初始化之后會生成圖表實例。

⑵ 指定配置和數據Option

Option為js對象類型，其是Echarts實現可視化的核心部分。根據Echarts.js的官方教學文件，Option內容包括但不局限于以下內容：

① tooltip：提示框組件。提示指標的每個數據項含義。可通過trigger觸發器決定其出發類型。

② legend：圖例組件。展現不同指標的圖例，點擊圖例可控制指標是否顯示，從而實現動態變換效果。

③ toolbox：工具欄組件。其內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。

④ xAxis：直角坐標系的橫坐標。系統圖表的x軸中的data，是利用jinja2的引擎引用py的數據。yAxis同理。

⑤ series：系列列表。可在其中規定圖表類型（柱狀圖、折線圖、餅狀圖等），并可放入多個JSON數據，可實現同個DOM容器，不同的圖表內容的展示。

⑶ 將配置給實例對象setoption

myChart.setOption（option）;

將上述配置后的Option傳給實例對象mychart，實現Echarts圖表渲染并展示在前端頁面。

⑷ 圖表跟隨屏幕自適應resize

window.addEventListener（"resize"， function（） {

myChart.resize（）; }）;

在圖表渲染成功后，Echarts的resize（）方法可以獲取DOM容器的高度和寬度屬性大小，實現圖表的屏幕自適應，與前端rem搭配，共同實現系統屏幕自適應。

3.4 系統成果展示

系統開發完成后，此處對頁面進行成果展示，如圖6所示。

按照“5W1H”分析理念，對系統進行分塊展示[11]。What表示企業需要滿足顧客具體哪些需求，即哪種產品或品牌最受客戶青睞，本系統開發是由熱銷品牌（圖6①）和熱銷電子產品（圖6②）構成。Who是價值所指向的對象，即目標顧客或細分市場，本系統開發是由不同年齡段客戶（圖6⑤）和不同省份客戶分布（圖6⑥）構成。When表示事件所發生的時間，可對應客戶購買需求旺盛的時段，主要由每月/時消費情況（圖6③和圖6④）構成。Where表示以上事件所發生的地點，系統以熱力圖的形式表明哪些地區消費能力最高。Why是系統構建過程中對數據從以上幾個維度進行分析的依據。How是對系統所展示的各個模塊進行分析之后的結果，企業可根據分析結果來制定相應的處理措施和營銷策略。

4 研究成果討論

利用“5W1H”分析工具[11]對實驗所涉及的電子商店的銷售信息構成進行詳細的分析， 能更好地幫助企業設計適合自己的商業模式。由系統最終的分析結果可以得出以下結論。

⑴ What：samsung、apple、ava品牌為前三熱銷品牌，電子類、家電類產品較受歡迎，如冰箱、耳機、電視機等。

⑵ Who：40-50歲是主要客戶人群，占比約為30%，其余人群消費情況差別不大。地域分布上以北上廣為主，廣東客戶是消費主力，天津、湖南客戶消費力較低。When：實驗數據中第一個消費高峰出現在5月，第二個高峰出現在7-10月，訂單集中在6：00-12：00。

⑶ Where：觀察訂單量的城市分布，發現廣東、上海、北京的訂單量最多。

⑷ Why：企業按照購買力將顧客劃分成若干個顧客群，每個顧客群構成一個子市場，不同子市場之間需求存在著明顯的差別。如對消費人群進行分析時，可以得到40-50歲的人群購買力較高，20歲以下人群購買力較低。

⑸ How：①銷售品牌維度上，電商平臺可多引入電子類和家電類產品進行銷售，提高產品質量，更多關注大牌產品。②銷售時段維度上，店鋪在五一假期、暑期、開學季和國慶等節假日期間應多儲備貨物，保證貨源供給充足。③對于每日時段，中午時分是消費高峰期，需要在該時間段維護好網絡穩定。④消費人群維度上，40-50歲的人群購買力較高，可推薦價格較高的商品；對20歲以下人群主要推薦親民價格的商品。⑤地圖選址維度上，倉庫的選址可多選擇在北上廣深一線城市上，可大大降低商品運輸成本，針對一線城市客戶，要提高其售后服務，以提高客戶粘性。⑥此外，湖南、天津等地區消費潛力巨大，因此可在該類地區加大宣傳力度。

5 結束語

本文從商業智能、數據可視化的相關背景知識出發，以決策分析的“5W1H”為指導方法，開發一個數據分析與可視化系統合為一體的大屏可視化的商業智能系統雛形。以電商銷售數據為例展開研究，可視化系統優化了商業智能的數據分析思維模式，提高了決策效率，支持用戶更加及時、直觀、準確地發現數據價值。

現實生活中還可將其應用到金融、醫療等其他領域，通過數據分析進行決策，服務于廣大行業。運用大屏展示與動態技術相結合，可以更直觀地讀懂數據背后所蘊藏的大量信息，提高管理效率。結合嶄新的信息技術，可將其應用于大數據時代下的商業智能，以期能推動其向科研智能的轉化[12]。

參考文獻（References）：

[1] 陳國青，毛基業，曾大軍.信息管理、電子商務與商務智能[J].

科學觀察，2019（2）：38-41

[2] 暢玉潔.大數據背景下web數據的可視化研究分析[J].信息

系統工程，2018（1）：148，150

[3] 翟學強.商務智能在企業內部審計中的應用研究[D].碩士，

山東財經大學，2021

[4] 陳華.基于Python的數據分析與可視化平臺研究[J].網絡

安全技術與應用，2022（2）：57-58

[5] 左亞菲.商業智能在我國的發展現狀、問題及其對策研究[C]//

“決策論壇——管理決策模式應用與分析學術研討會”論文集（上）.[出版者不詳]，2016：191

[6] 饒仕才，朱文進，張良軒.論商業智能在大型企業中的應用[J].

天津科技，2013，40（2）：71-73

[7] 王寧.面向大屏的圖表展示系統設計與實現[D].碩士，西安

電子科技大學，2019

[8] 王安瑾. 基于Flask的金融自動化運維平臺的設計與實現[D].

碩士，東華大學，2018

[9] 安娜.高校圖書館閱讀推廣5W1H分析法應用研究[J].圖書

館工作與研究，2020（9）：89-95

[10] 王薈奧，蔡永香，楊岸霖，等.大屏數據可視化易用工具的研究

與開發[J].計算機系統應用，2022，31（2）：114-119

[11] 張敬偉，王迎軍.基于價值三角形邏輯的商業模式概念模型

研究[J].外國經濟與管理，2010，32（6）：1-8

[12] 胡志剛，王欣，李海波.從商業智能到科研智能：智能化時代

的科學學與科技管理[J].科學學與科學技術管理，2021，42（1）：3-20