《電子技術(shù)應(yīng)用》
您所在的位置:首頁(yè) > 嵌入式技術(shù) > 設(shè)計(jì)應(yīng)用 > 基于ECharts的市場(chǎng)分析設(shè)計(jì)與實(shí)現(xiàn)
基于ECharts的市場(chǎng)分析設(shè)計(jì)與實(shí)現(xiàn)
2019年電子技術(shù)應(yīng)用第12期
周瑋祎
江蘇科技大學(xué) 計(jì)算機(jī)科學(xué)與工程學(xué)院,江蘇 鎮(zhèn)江212000
摘要: 從大量的報(bào)表數(shù)據(jù)中提取出有價(jià)值的信息,是進(jìn)行企業(yè)市場(chǎng)分析中十分重要的一步。而如何將大量的數(shù)據(jù)以圖形化的形式在最短的時(shí)間內(nèi)展現(xiàn)在企業(yè)管理者的面前,便是此次研究的意義所在。頁(yè)面在Ajax的支持下采用了ECharts這一圖形報(bào)表技術(shù),使原本死板的報(bào)表數(shù)據(jù)能清晰直觀地傳遞給企業(yè)的管理者,為幫助其做出精準(zhǔn)的市場(chǎng)判斷提供了堅(jiān)實(shí)的基礎(chǔ)。
中圖分類號(hào): TN919.8;TP311.5
文獻(xiàn)標(biāo)識(shí)碼: A
DOI:10.16157/j.issn.0258-7998.190733
中文引用格式: 周瑋祎. 基于ECharts的市場(chǎng)分析設(shè)計(jì)與實(shí)現(xiàn)[J].電子技術(shù)應(yīng)用,2019,45(12):101-105.
英文引用格式: Zhou Weiyi. The enterprise marketing analysis based on ECharts[J]. Application of Electronic Technique,2019,45(12):101-105.
The enterprise marketing analysis based on ECharts
Zhou Weiyi
College of Computer Science and Engineering,Jiangsu University of Science and Technology,Zhenjiang 212000,China
Abstract: Extracting valuable information from a large number of report data is a very important step in the enterprise market analysis. And how to show a large amount of data to the enterprise managers in the short time with the form of diagramming is the significance of this study. With the support of Ajax, the page uses the graphical reporting technology ECharts, making the rigid report data become clear and visualized to the enterprise managers, and provide them a solid foundation for their precise market judgment.
Key words : ECharts;the enterprise market analysis;Ajax;diagram

0 引言

    大數(shù)據(jù)、云服務(wù)正被越來(lái)越多的制造型企業(yè)青睞[1]。這其中,盡管不是所有企業(yè)都用得起大數(shù)據(jù),但當(dāng)管理者進(jìn)行市場(chǎng)環(huán)境分析時(shí),還是會(huì)用到與此相關(guān)的技術(shù)[2]。傳統(tǒng)的表格數(shù)據(jù)雖然可以將數(shù)據(jù)十分具體地呈現(xiàn)出來(lái),可還是有著一定的不足之處:一是耗時(shí)。表格數(shù)據(jù)多是由企業(yè)管理者的助理們先對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行核對(duì)、修改、刪減,再將整理完的數(shù)據(jù)按企業(yè)規(guī)定的文檔格式進(jìn)行編輯打印。在這段期間,助理們既要浪費(fèi)大量的時(shí)間與精力在數(shù)據(jù)的整理和文件格式的校對(duì)上,管理者們也要付出相同的時(shí)間來(lái)等待報(bào)表的出爐。二是不能很直觀地體現(xiàn)出市場(chǎng)的相關(guān)信息。就像排行榜,表格數(shù)據(jù)給人留下印象最深的多是排名靠前和最末的信息,其余的利用價(jià)值并不能被很好地體現(xiàn)。

    因此,從長(zhǎng)遠(yuǎn)的角度來(lái)看,能將企業(yè)的市場(chǎng)分析與數(shù)字化和圖形化技術(shù)很好地結(jié)合起來(lái),對(duì)企業(yè)的可持續(xù)發(fā)展來(lái)說(shuō),將會(huì)是一個(gè)莫大的福音。

1 功能設(shè)計(jì)

1.1 功能設(shè)定

    由于企業(yè)的市場(chǎng)分析一般是從數(shù)量和質(zhì)量這兩個(gè)角度出發(fā),因此頁(yè)面的主要功能也是從這兩個(gè)方面入手。

    所謂基于數(shù)量的角度,就是從業(yè)務(wù)成交量和銷售額去衡量某一地區(qū)消費(fèi)者的數(shù)量與購(gòu)買能力,根據(jù)不同的市場(chǎng)情況制定出適于其發(fā)展的市場(chǎng)方案,如將業(yè)務(wù)量和銷售額均名列前茅的地區(qū)列為重點(diǎn)發(fā)展地區(qū),將業(yè)務(wù)量處于中下游但銷售額排名靠前的地區(qū)列為適于發(fā)展VIP客戶的地區(qū)等;而從質(zhì)量的角度去反映市場(chǎng),主要是憑借全國(guó)各地售賣企業(yè)產(chǎn)品的渠道。因?yàn)槭袌?chǎng)的質(zhì)量主要由消費(fèi)者的滿意度和忠誠(chéng)度決定,只有優(yōu)化企業(yè)在各類銷售渠道中產(chǎn)品與服務(wù)的質(zhì)量,才會(huì)使消費(fèi)者的滿意度和忠誠(chéng)度得以提高,進(jìn)而也就促進(jìn)了消費(fèi)者的購(gòu)買欲,穩(wěn)住了企業(yè)在該地區(qū)的市場(chǎng)。

1.2 技術(shù)分析

    因?yàn)橛兄己玫脑O(shè)計(jì)、快速構(gòu)建工具和可供參考的開(kāi)源代碼,Java是繼Python之后的第二大流行編程語(yǔ)言,且現(xiàn)如今很多企業(yè)的信息系統(tǒng)均基于Java語(yǔ)言,可降低系統(tǒng)上線運(yùn)行后的維護(hù)難度系數(shù)。所以頁(yè)面整體采用的是基于Java語(yǔ)言的B/S模式。

    作為一種基于HTML5 Canvas圖標(biāo)庫(kù)的圖形報(bào)表技術(shù),ECharts[3]與多種電腦版和移動(dòng)設(shè)備版的瀏覽器軟件兼容,運(yùn)行流暢,為用戶帶來(lái)良好體驗(yàn)的同時(shí),也給用戶了解數(shù)據(jù)信息提供了極大的便利。

2 功能實(shí)現(xiàn)

2.1 頁(yè)面展示

    頁(yè)面由兩部分組成:靜態(tài)地圖和橫向條狀圖。根據(jù)“業(yè)務(wù)量”、“銷售量”和“渠道數(shù)”這3個(gè)指標(biāo),向當(dāng)前用戶展現(xiàn)其管轄范圍內(nèi)各區(qū)域的市場(chǎng)份額情況。

    左側(cè)的靜態(tài)地圖主要通過(guò)顏色的深淺反映各地區(qū)的數(shù)值信息,顏色越深表示數(shù)值越大。右側(cè)的橫向條狀圖則顯示出當(dāng)前區(qū)域排名靠前的子區(qū)域信息。其中,全國(guó)范圍的排名展示是針對(duì)前十個(gè)省,而省、市級(jí)的排名則是以該省或該市所含子區(qū)域數(shù)量的一半進(jìn)行展示。如圖1和圖2所示,江蘇省有13個(gè)市,因而橫向條狀圖顯示的就是排名靠前的7個(gè)市信息。

jsj2-t1.gif

jsj2-t2.gif

    當(dāng)用戶在地圖中點(diǎn)擊其轄區(qū)內(nèi)的任一區(qū)域,當(dāng)前地圖就會(huì)變?yōu)樗c(diǎn)擊區(qū)域的區(qū)域地圖,即全國(guó)地圖變?yōu)槟呈〉貓D、某省地圖變?yōu)槟呈械貓D,以便用戶對(duì)相關(guān)信息的進(jìn)一步查詢。

2.2 梳理數(shù)據(jù)信息

    鑒于此次主要面向的是尚未建有數(shù)據(jù)倉(cāng)庫(kù)的企業(yè),要想讓圖表的展示效果可以很好地體現(xiàn)出來(lái),就要充分利用多張數(shù)據(jù)表的信息,以構(gòu)成頁(yè)面的數(shù)據(jù)源。

    頁(yè)面的數(shù)據(jù)主要源于業(yè)務(wù)量統(tǒng)計(jì)表、銷售額統(tǒng)計(jì)表和渠道信息表。作為基礎(chǔ)信息表,渠道信息表是每個(gè)含多條銷售渠道企業(yè)的必備表。而業(yè)務(wù)量和銷售額的統(tǒng)計(jì)表則是開(kāi)發(fā)人員或數(shù)據(jù)庫(kù)管理員為實(shí)現(xiàn)頁(yè)面功能新建的兩張表。業(yè)務(wù)量統(tǒng)計(jì)表用于統(tǒng)計(jì)每天各類業(yè)務(wù)的成交量,銷售額統(tǒng)計(jì)表負(fù)責(zé)記錄在各類業(yè)務(wù)中每天成交訂單所產(chǎn)生的銷售金額。

    以業(yè)務(wù)量分析為例,通??梢詫⑵髽I(yè)的業(yè)務(wù)信息表分為“線上業(yè)務(wù)”和“線下業(yè)務(wù)”兩種?!熬€上業(yè)務(wù)”是指針對(duì)網(wǎng)絡(luò)購(gòu)物平臺(tái)以及企業(yè)自身電商部門的業(yè)務(wù);而“線下業(yè)務(wù)”則是面向?qū)嶓w單位或個(gè)人的業(yè)務(wù)。由于市場(chǎng)分析主要是針對(duì)線下業(yè)務(wù),所以其數(shù)據(jù)源便出自各“線下業(yè)務(wù)”表。業(yè)務(wù)量統(tǒng)計(jì)表的關(guān)鍵字段如表1所示。

jsj2-b1.gif

    表1中統(tǒng)計(jì)標(biāo)識(shí)tag的值一般只有日、月、年3種,以標(biāo)記統(tǒng)計(jì)值是日數(shù)據(jù)、月數(shù)據(jù)還是年數(shù)據(jù)。

    按照“一種業(yè)務(wù)對(duì)應(yīng)一張基本信息表和多張行項(xiàng)目表”的原則,最好再在數(shù)據(jù)庫(kù)中建立業(yè)務(wù)登記表,以對(duì)各業(yè)務(wù)表進(jìn)行登記。其關(guān)鍵字段如表2所示。

jsj2-b2.gif

    根據(jù)業(yè)務(wù)訂單的實(shí)際內(nèi)容,所對(duì)應(yīng)的行項(xiàng)目表可預(yù)擴(kuò)至busiTable5或更多。此外,根據(jù)不同的要求還可在表中添加新增業(yè)務(wù)時(shí)間、業(yè)務(wù)類型等字段。

    業(yè)務(wù)登記表、業(yè)務(wù)量統(tǒng)計(jì)表和各業(yè)務(wù)表之間由業(yè)務(wù)編號(hào)抬頭字段busiHead相互關(guān)聯(lián),其間的關(guān)系如圖3所示。

jsj2-t3.gif

    正因?yàn)楸頂?shù)量眾多、其間的關(guān)系又很復(fù)雜,此時(shí)就要靈活運(yùn)用數(shù)據(jù)庫(kù)管理軟件中的工具,及時(shí)獲取最新的數(shù)據(jù)庫(kù)表E-R圖,并將其存于相關(guān)文檔中。該E-R圖通過(guò)表的外鍵,反映表與表之間的關(guān)系。值得一提的是,即使企業(yè)在建立各數(shù)據(jù)表時(shí)沒(méi)有設(shè)定其外鍵,在頁(yè)面正式開(kāi)發(fā)之前,也要理清各表的關(guān)系,不然將直接影響往后的開(kāi)發(fā)質(zhì)量。

    最后,根據(jù)整理出來(lái)的結(jié)果,開(kāi)始擬定、編寫在開(kāi)發(fā)過(guò)程中將會(huì)用到的SQL語(yǔ)句,并將其記錄于相應(yīng)的文檔中,以便在研發(fā)、測(cè)試過(guò)程中隨時(shí)閱覽和優(yōu)化,既提高了開(kāi)發(fā)的效率,也為擴(kuò)展、維護(hù)等工作減輕了一定的負(fù)擔(dān)。

2.3 后端連接數(shù)據(jù)庫(kù)

    后端框架因企業(yè)開(kāi)發(fā)人員的熟練程度和企業(yè)的規(guī)模而定,可以是已被廣泛使用且能很好適應(yīng)數(shù)據(jù)庫(kù)移植的SSH[4],也可以是易入門的后起之秀SSM[5]。但二者在與數(shù)據(jù)庫(kù)的連接方式上卻有所不同。

    二者都可以通過(guò)有關(guān)的生成工具形成基本的DAO層方法去和數(shù)據(jù)庫(kù)進(jìn)行連接。Mybatis需要手動(dòng)編寫SQL語(yǔ)句、配置resultMap參數(shù),以達(dá)到按需求查詢數(shù)據(jù)庫(kù)中指定信息的目的。Hibernate可以運(yùn)用良好的映射機(jī)制,使編程人員將更多的精力放在業(yè)務(wù)流程上,但由于所映射出的結(jié)果較為全面,有時(shí)可能會(huì)產(chǎn)生一些性能消耗。

2.4 前后端的交互

    為了展示出全國(guó)及各省市的靜態(tài)地圖,需要讀取相關(guān)的json文件。這些json文件均為開(kāi)源代碼,可直接從網(wǎng)上下載。為保證所展現(xiàn)的地理信息能夠準(zhǔn)確無(wú)誤,須按照頁(yè)面的格局樣式,適度地調(diào)整各文件中各地點(diǎn)名稱的cp值。

    頁(yè)面根據(jù)當(dāng)前用戶的職位提取出其職位名和直接管轄的區(qū)域名,如江蘇分公司經(jīng)理的職位名為“分公司經(jīng)理”、直接管轄的區(qū)域名為“江蘇”。頁(yè)面根據(jù)職位名,通過(guò)switch-case匹配函數(shù)定位所管轄范圍的靜態(tài)地圖json文件路徑名。再通過(guò)如下程序,從json文件中獲取直接管轄區(qū)域中各分區(qū)的名稱:

$.get(′json文件的相對(duì)路徑′, function(gdMap) {

  echarts.registerMap(區(qū)域名的小寫全拼, gdMap);

  var cityName = [];

  $.each(gdMap.features, function(i,val){

    cityName.push(gdMap.features[i].properties.name);

    });

});

    之后,通過(guò)Ajax將這些地區(qū)名稱傳給后端,后端將其作為數(shù)據(jù)庫(kù)查詢的一個(gè)限制條件,再結(jié)合當(dāng)前系統(tǒng)時(shí)間,對(duì)業(yè)務(wù)量統(tǒng)計(jì)表、銷售額統(tǒng)計(jì)表和渠道信息表進(jìn)行檢索。檢索結(jié)果經(jīng)由后端排序整理后,傳至前端頁(yè)面,以作為其橫向條形圖和靜態(tài)地圖的數(shù)據(jù)源。

    當(dāng)用戶在地圖中點(diǎn)擊靜態(tài)地圖中的任一區(qū)域時(shí),會(huì)觸發(fā)頁(yè)面的點(diǎn)擊事件,該事件的內(nèi)容即為以所點(diǎn)擊區(qū)域名稱所包含的地區(qū)名稱作為參數(shù),調(diào)用上述過(guò)程,以獲取所點(diǎn)地區(qū)的市場(chǎng)數(shù)據(jù)信息。

    以業(yè)務(wù)量分析為例,與縱向單柱條狀圖[6-7]類似,頁(yè)面所用的橫向雙柱條狀圖,同樣要對(duì)圖表的標(biāo)題屬性title、工具欄屬性toolbox、圖例屬性legend等內(nèi)容進(jìn)行設(shè)置,但不同的是,為了橫向展示,須將xAxis的type設(shè)置為value,再將yAxis的type設(shè)置為category。為了將業(yè)務(wù)量和銷售額兩組數(shù)據(jù)作對(duì)比,需要用到雙柱,因而要在series屬性中設(shè)定兩組數(shù)據(jù),具體代碼如下:

jsj2-dm1.gif

    作為另一種圖表,在設(shè)計(jì)靜態(tài)地圖時(shí),除了要配置標(biāo)題屬性title、工具欄屬性toolbox,還要新增一些屬性。例如,為了讓鼠標(biāo)指針在地圖中移動(dòng)時(shí)可以在其出現(xiàn)的地方顯示對(duì)應(yīng)的標(biāo)簽,須添加tooltip屬性,具體可為如下內(nèi)容:

jsj2-dm2.gif

jsj2-dm3.gif

3 結(jié)束語(yǔ)

    經(jīng)測(cè)試運(yùn)行,企業(yè)管理者可以通過(guò)頁(yè)面所呈現(xiàn)出的信息,很方便地得知其轄區(qū)內(nèi)的市場(chǎng)占有情況。不僅能做出正確的消費(fèi)人群定位,還能判斷是否要增設(shè)像倉(cāng)庫(kù)、轉(zhuǎn)運(yùn)中心這樣的中間節(jié)點(diǎn)[8],為制定出更優(yōu)質(zhì)的決策方案提供了直觀的數(shù)據(jù)支撐,極大地促進(jìn)了企業(yè)從經(jīng)驗(yàn)決策向科學(xué)決策進(jìn)行轉(zhuǎn)變。隨著圖表插件、地圖插件以及相關(guān)技術(shù)的更新?lián)Q代,進(jìn)一步的優(yōu)化工作也在持續(xù)進(jìn)行中,只有這樣才能確保此類功能的質(zhì)量也能與時(shí)俱進(jìn)。

參考文獻(xiàn)

[1] 李強(qiáng),史志強(qiáng),邵長(zhǎng)鋒.面向個(gè)性化定制的云制造服務(wù)平臺(tái)的研發(fā)[J].電子技術(shù)應(yīng)用,2016,42(5):109-112.

[2] 姚雪梅,李少波,璩晶磊,等.制造大數(shù)據(jù)相關(guān)技術(shù)架構(gòu)分析[J].電子技術(shù)應(yīng)用,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系統(tǒng)研發(fā)設(shè)計(jì)[J].計(jì)算機(jī)工程與設(shè)計(jì),2012,33(12):4751-4757.

[6] 趙海國(guó).Ajax支持下的ECharts圖形報(bào)表技術(shù)的應(yīng)用[J].電子技術(shù),2018(4):66-69.

[7] 王子毅,張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用,2016,35(14):46-48.

[8] 王建峰,楊榮.物聯(lián)網(wǎng)環(huán)境下智能物流服務(wù)組合研究[J].電子技術(shù)應(yīng)用,2016,42(1):79-81.



作者信息:

周瑋祎

(江蘇科技大學(xué) 計(jì)算機(jī)科學(xué)與工程學(xué)院,江蘇 鎮(zhèn)江212000)

此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。