文獻標識碼： A
DOI：10.16157/j.issn.0258-7998.190733
中文引用格式： 周瑋祎. 基于ECharts的市場分析設計與實現[J].電子技術應用，2019，45(12)：101-105.
英文引用格式： Zhou Weiyi. The enterprise marketing analysis based on ECharts[J]. Application of Electronic Technique，2019，45(12)：101-105.
0 引言
大數據、云服務正被越來越多的制造型企業青睞[1]。這其中，盡管不是所有企業都用得起大數據，但當管理者進行市場環境分析時，還是會用到與此相關的技術[2]。傳統的表格數據雖然可以將數據十分具體地呈現出來，可還是有著一定的不足之處：一是耗時。表格數據多是由企業管理者的助理們先對業務數據進行核對、修改、刪減，再將整理完的數據按企業規定的文檔格式進行編輯打印。在這段期間，助理們既要浪費大量的時間與精力在數據的整理和文件格式的校對上，管理者們也要付出相同的時間來等待報表的出爐。二是不能很直觀地體現出市場的相關信息。就像排行榜，表格數據給人留下印象最深的多是排名靠前和最末的信息，其余的利用價值并不能被很好地體現。
因此，從長遠的角度來看，能將企業的市場分析與數字化和圖形化技術很好地結合起來，對企業的可持續發展來說，將會是一個莫大的福音。
1 功能設計
1.1 功能設定
由于企業的市場分析一般是從數量和質量這兩個角度出發，因此頁面的主要功能也是從這兩個方面入手。
所謂基于數量的角度，就是從業務成交量和銷售額去衡量某一地區消費者的數量與購買能力，根據不同的市場情況制定出適于其發展的市場方案，如將業務量和銷售額均名列前茅的地區列為重點發展地區，將業務量處于中下游但銷售額排名靠前的地區列為適于發展VIP客戶的地區等；而從質量的角度去反映市場，主要是憑借全國各地售賣企業產品的渠道。因為市場的質量主要由消費者的滿意度和忠誠度決定，只有優化企業在各類銷售渠道中產品與服務的質量，才會使消費者的滿意度和忠誠度得以提高，進而也就促進了消費者的購買欲，穩住了企業在該地區的市場。
1.2 技術分析
因為有著良好的設計、快速構建工具和可供參考的開源代碼，Java是繼Python之后的第二大流行編程語言，且現如今很多企業的信息系統均基于Java語言，可降低系統上線運行后的維護難度系數。所以頁面整體采用的是基于Java語言的B/S模式。
作為一種基于HTML5 Canvas圖標庫的圖形報表技術，ECharts[3]與多種電腦版和移動設備版的瀏覽器軟件兼容，運行流暢，為用戶帶來良好體驗的同時，也給用戶了解數據信息提供了極大的便利。
2 功能實現
2.1 頁面展示
頁面由兩部分組成：靜態地圖和橫向條狀圖。根據“業務量”、“銷售量”和“渠道數”這3個指標，向當前用戶展現其管轄范圍內各區域的市場份額情況。
左側的靜態地圖主要通過顏色的深淺反映各地區的數值信息，顏色越深表示數值越大。右側的橫向條狀圖則顯示出當前區域排名靠前的子區域信息。其中，全國范圍的排名展示是針對前十個省，而省、市級的排名則是以該省或該市所含子區域數量的一半進行展示。如圖1和圖2所示，江蘇省有13個市，因而橫向條狀圖顯示的就是排名靠前的7個市信息。
當用戶在地圖中點擊其轄區內的任一區域，當前地圖就會變為所點擊區域的區域地圖，即全國地圖變為某省地圖、某省地圖變為某市地圖，以便用戶對相關信息的進一步查詢。
2.2 梳理數據信息
鑒于此次主要面向的是尚未建有數據倉庫的企業，要想讓圖表的展示效果可以很好地體現出來，就要充分利用多張數據表的信息，以構成頁面的數據源。
頁面的數據主要源于業務量統計表、銷售額統計表和渠道信息表。作為基礎信息表，渠道信息表是每個含多條銷售渠道企業的必備表。而業務量和銷售額的統計表則是開發人員或數據庫管理員為實現頁面功能新建的兩張表。業務量統計表用于統計每天各類業務的成交量，銷售額統計表負責記錄在各類業務中每天成交訂單所產生的銷售金額。
以業務量分析為例，通常可以將企業的業務信息表分為“線上業務”和“線下業務”兩種。“線上業務”是指針對網絡購物平臺以及企業自身電商部門的業務；而“線下業務”則是面向實體單位或個人的業務。由于市場分析主要是針對線下業務，所以其數據源便出自各“線下業務”表。業務量統計表的關鍵字段如表1所示。
表1中統計標識tag的值一般只有日、月、年3種，以標記統計值是日數據、月數據還是年數據。
按照“一種業務對應一張基本信息表和多張行項目表”的原則，最好再在數據庫中建立業務登記表，以對各業務表進行登記。其關鍵字段如表2所示。
根據業務訂單的實際內容，所對應的行項目表可預擴至busiTable5或更多。此外，根據不同的要求還可在表中添加新增業務時間、業務類型等字段。
業務登記表、業務量統計表和各業務表之間由業務編號抬頭字段busiHead相互關聯，其間的關系如圖3所示。
正因為表數量眾多、其間的關系又很復雜，此時就要靈活運用數據庫管理軟件中的工具，及時獲取最新的數據庫表E-R圖，并將其存于相關文檔中。該E-R圖通過表的外鍵，反映表與表之間的關系。值得一提的是，即使企業在建立各數據表時沒有設定其外鍵，在頁面正式開發之前，也要理清各表的關系，不然將直接影響往后的開發質量。
最后，根據整理出來的結果，開始擬定、編寫在開發過程中將會用到的SQL語句，并將其記錄于相應的文檔中，以便在研發、測試過程中隨時閱覽和優化，既提高了開發的效率，也為擴展、維護等工作減輕了一定的負擔。
2.3 后端連接數據庫
后端框架因企業開發人員的熟練程度和企業的規模而定，可以是已被廣泛使用且能很好適應數據庫移植的SSH[4]，也可以是易入門的后起之秀SSM[5]。但二者在與數據庫的連接方式上卻有所不同。
二者都可以通過有關的生成工具形成基本的DAO層方法去和數據庫進行連接。Mybatis需要手動編寫SQL語句、配置resultMap參數，以達到按需求查詢數據庫中指定信息的目的。Hibernate可以運用良好的映射機制，使編程人員將更多的精力放在業務流程上，但由于所映射出的結果較為全面，有時可能會產生一些性能消耗。
2.4 前后端的交互
為了展示出全國及各省市的靜態地圖，需要讀取相關的json文件。這些json文件均為開源代碼，可直接從網上下載。為保證所展現的地理信息能夠準確無誤，須按照頁面的格局樣式，適度地調整各文件中各地點名稱的cp值。
頁面根據當前用戶的職位提取出其職位名和直接管轄的區域名，如江蘇分公司經理的職位名為“分公司經理”、直接管轄的區域名為“江蘇”。頁面根據職位名，通過switch-case匹配函數定位所管轄范圍的靜態地圖json文件路徑名。再通過如下程序，從json文件中獲取直接管轄區域中各分區的名稱：
$.get(′json文件的相對路徑′, function(gdMap) {
echarts.registerMap(區域名的小寫全拼, gdMap);
var cityName = [];
$.each(gdMap.features, function(i,val){
cityName.push(gdMap.features[i].properties.name);
});
});
之后，通過Ajax將這些地區名稱傳給后端，后端將其作為數據庫查詢的一個限制條件，再結合當前系統時間，對業務量統計表、銷售額統計表和渠道信息表進行檢索。檢索結果經由后端排序整理后，傳至前端頁面，以作為其橫向條形圖和靜態地圖的數據源。
當用戶在地圖中點擊靜態地圖中的任一區域時，會觸發頁面的點擊事件，該事件的內容即為以所點擊區域名稱所包含的地區名稱作為參數，調用上述過程，以獲取所點地區的市場數據信息。
以業務量分析為例，與縱向單柱條狀圖[6-7]類似，頁面所用的橫向雙柱條狀圖，同樣要對圖表的標題屬性title、工具欄屬性toolbox、圖例屬性legend等內容進行設置，但不同的是，為了橫向展示，須將xAxis的type設置為value，再將yAxis的type設置為category。為了將業務量和銷售額兩組數據作對比，需要用到雙柱，因而要在series屬性中設定兩組數據，具體代碼如下：
作為另一種圖表，在設計靜態地圖時，除了要配置標題屬性title、工具欄屬性toolbox，還要新增一些屬性。例如，為了讓鼠標指針在地圖中移動時可以在其出現的地方顯示對應的標簽，須添加tooltip屬性，具體可為如下內容：
3 結束語
經測試運行，企業管理者可以通過頁面所呈現出的信息，很方便地得知其轄區內的市場占有情況。不僅能做出正確的消費人群定位，還能判斷是否要增設像倉庫、轉運中心這樣的中間節點[8]，為制定出更優質的決策方案提供了直觀的數據支撐，極大地促進了企業從經驗決策向科學決策進行轉變。隨著圖表插件、地圖插件以及相關技術的更新換代，進一步的優化工作也在持續進行中，只有這樣才能確保此類功能的質量也能與時俱進。
參考文獻
[1] 李強，史志強，邵長鋒.面向個性化定制的云制造服務平臺的研發[J].電子技術應用，2016，42(5)：109-112.
[2] 姚雪梅，李少波，璩晶磊，等.制造大數據相關技術架構分析[J].電子技術應用，2016，42(11)：10-13.
[3] LI D，MEI H，YI S，et al.ECharts：a declarative framework for rapid construction of web-based visualization[J].Visual Informatics，2018，2(4)：136-146.
[4] XING C F，WANG F Q，SUN Y.A new web application framework based on SSH[J].Applied Mechanics & Materials，2015，713-715(1)：2203-2207.
[5] 王艷清，陳紅.基于SSM框架的智能Web系統研發設計[J].計算機工程與設計，2012，33(12)：4751-4757.
[6] 趙海國.Ajax支持下的ECharts圖形報表技術的應用[J].電子技術，2018(4)：66-69.
[7] 王子毅，張春海.基于ECharts的數據可視化分析組件設計實現[J].微型機與應用，2016，35(14)：46-48.
[8] 王建峰，楊榮.物聯網環境下智能物流服務組合研究[J].電子技術應用，2016，42(1)：79-81.
作者信息:
周瑋祎
(江蘇科技大學 計算機科學與工程學院，江蘇 鎮江212000)