張 業(yè) 男

(黑龍江農(nóng)業(yè)經(jīng)濟(jì)職業(yè)學(xué)院，黑龍江 牡丹江 157000)

數(shù)據(jù)可視化能夠利用圖表將數(shù)據(jù)直觀地展示出來(lái)，幫助人們分析數(shù)據(jù)和查找數(shù)據(jù)的規(guī)律，特別與web前端技術(shù)結(jié)合后極大提高了可訪問(wèn)性和交互性，作為一個(gè)新興技得到了很好的發(fā)展[1]。

在數(shù)據(jù)可視化課程中，教學(xué)內(nèi)容通常側(cè)重于數(shù)據(jù)分析和單個(gè)圖表制作，整個(gè)過(guò)程略顯枯燥，學(xué)習(xí)一段時(shí)間后，學(xué)生對(duì)于重復(fù)性知識(shí)逐漸失去興趣，同時(shí)在實(shí)際工作中不同領(lǐng)域的數(shù)據(jù)分析重點(diǎn)和分析方法區(qū)別較大。為了緩解這些問(wèn)題，可以引入不同專業(yè)領(lǐng)域的數(shù)據(jù)和基礎(chǔ)知識(shí)，制作可視化大屏。本文以農(nóng)業(yè)為主題，利用HTML、CSS、JavaScript、echarts等技術(shù)，展示可視化大屏作為案例的在教學(xué)中的應(yīng)用。

一、整體框架設(shè)計(jì)

在數(shù)據(jù)可視化大屏的初期設(shè)計(jì)時(shí)，可以結(jié)合教學(xué)內(nèi)容來(lái)確定圖表的展示內(nèi)容，本案例將農(nóng)業(yè)數(shù)據(jù)的統(tǒng)計(jì)分析與數(shù)據(jù)大屏相結(jié)合，在學(xué)習(xí)數(shù)據(jù)可視化知識(shí)的同時(shí)，也了解部分農(nóng)業(yè)數(shù)據(jù)統(tǒng)計(jì)相關(guān)概念，包括柱狀圖、折線圖、條形圖、面積圖、堆疊圖，制作難度逐步升級(jí)，能夠讓學(xué)生循序漸進(jìn)掌握知識(shí)的同時(shí)，產(chǎn)生強(qiáng)烈的成就感，激發(fā)學(xué)習(xí)興趣。

對(duì)于數(shù)據(jù)大屏的整體設(shè)計(jì)，需要保證展示的內(nèi)容清晰、重點(diǎn)突出、易于閱讀，準(zhǔn)備呈現(xiàn)的數(shù)據(jù)有糧食產(chǎn)量、播種面積、消費(fèi)結(jié)構(gòu)、糧食價(jià)格、種植成本結(jié)構(gòu)、豬糧比等內(nèi)容。應(yīng)該將全局?jǐn)?shù)據(jù)放在醒目位置，相互關(guān)聯(lián)的數(shù)據(jù)應(yīng)該在相鄰位置，重要信息安排較大區(qū)域，同時(shí)應(yīng)做到主次分明、重點(diǎn)突出，基于以上需求，一個(gè)合格的數(shù)據(jù)大屏應(yīng)該根據(jù)展示內(nèi)容劃分區(qū)域。利用HTML+CSS技術(shù)構(gòu)建數(shù)據(jù)大屏主體結(jié)構(gòu)，如圖1所示，將頁(yè)面劃分為7個(gè)區(qū)域，其中左右兩側(cè)分別有三個(gè)區(qū)域，中間為一個(gè)區(qū)域，其中展示的圖表有柱狀圖、折線圖、餅圖、柱狀堆疊圖。

數(shù)據(jù)大屏通常顯示在較大的顯示設(shè)備上，比如電視、大屏顯示器等，設(shè)計(jì)數(shù)據(jù)大屏?xí)r需要充分考慮顯示設(shè)備，根據(jù)顯示設(shè)備的比例來(lái)設(shè)計(jì)分辨率，目前最流行的設(shè)備比例為16：9，本案例使用的分辨率為1920*1080。利用瀏覽器打開全屏顯示后，可以達(dá)到最佳效果[2]。

圖1 主體結(jié)構(gòu)

二、常見圖表制作

本案例使用echarts庫(kù)制作圖表，它是一款開源的數(shù)據(jù)可視化圖表庫(kù)，基于JavaScript語(yǔ)言，可以流暢地運(yùn)行在PC和移動(dòng)設(shè)備上，兼容絕大部分瀏覽器，提供直觀，交互豐富，可高度個(gè)性化定制數(shù)據(jù)可視化圖表，支持多種數(shù)據(jù)格式，提供非常豐富的的圖表類型，并且可以將不同圖表混搭，進(jìn)一步提高可視化圖表制作的靈活性[3]。

(一)制作近年玉米產(chǎn)量統(tǒng)計(jì)圖

近年玉米產(chǎn)量柱狀圖是數(shù)據(jù)大屏中最簡(jiǎn)單的一個(gè)圖表，通過(guò)該圖表的制作可以讓學(xué)生了解Echarts的基本使用方法，如果是期末作為綜合練習(xí)，可以讓學(xué)生仿照Echarts的官方Demo來(lái)制作。Echarts的使用大體上分為如下幾個(gè)步驟：

1.在html頁(yè)面中引入ECharts庫(kù)。

2.準(zhǔn)備用于顯示圖表的DOM容器，通常為DIV。

3.初始化echarts實(shí)例。

4.指定圖表的配置項(xiàng)和數(shù)據(jù)。

在圖表制作時(shí)，首先導(dǎo)入所需的js文件，需要導(dǎo)入的文件如下：

由于案例中圖表較多，為了使HTML頁(yè)面代碼更加簡(jiǎn)潔，可以將圖表相關(guān)代碼放在一個(gè)單獨(dú)js文件中，并導(dǎo)入該文件，導(dǎo)入代碼如下：

在my_echarts.js中編寫近年玉米產(chǎn)量圖表的相關(guān)代碼，首先需要初始化echarts組件，代碼如下：

var myChart = echarts.init(document.getElementById('echart1'));

其中echart1為圖表容器div標(biāo)簽的id，利用myChart.setOption(option)設(shè)置echarts配置項(xiàng)，就能夠顯示圖表，參數(shù)option為配置項(xiàng)，對(duì)于柱形圖需要配置xAxis、yAxis、series，xAxis用于配置橫坐標(biāo)軸，關(guān)鍵代碼為：

xAxis:{

type: 'category',//指定為分類軸

data: ["2017年",…… "2022年"],//設(shè)置標(biāo)簽內(nèi)容

……

}

yAxis用于配置縱坐標(biāo)軸，關(guān)鍵代碼為：

yAxis:{

type: 'value',// 指定為數(shù)值軸

……

}

series用于配置數(shù)據(jù)，并制定圖表類型，關(guān)鍵代碼為：

series:[

type: 'bar',// 指定圖表類型為柱狀圖

data: [25907.07,…… ,27720.3],// 指定圖表數(shù)據(jù)

……

]

還可以根據(jù)實(shí)際教學(xué)內(nèi)容，通過(guò)其他配置項(xiàng)調(diào)整圖表顯示效果，如圖2所示：

圖2 近年全國(guó)玉米產(chǎn)量統(tǒng)計(jì)圖

(二)制作近年大豆產(chǎn)量與進(jìn)口總量統(tǒng)計(jì)圖

近年大豆產(chǎn)量與進(jìn)口總量統(tǒng)計(jì)圖的中包含了“大豆產(chǎn)量”“大豆進(jìn)口量”“大豆進(jìn)口量同比”三種數(shù)據(jù)的統(tǒng)計(jì)，此時(shí)需要在series中配置三組數(shù)據(jù)，同時(shí)大豆進(jìn)口量同比為百分比與其他數(shù)據(jù)單位不一致，不能放在同一個(gè)坐標(biāo)軸中，關(guān)鍵代碼如下：

yAxis: [

{ position: 'left' // 設(shè)置當(dāng)前坐標(biāo)軸的位置為左側(cè)(其他代碼略)},

{ position: 'right',// 設(shè)置當(dāng)前坐標(biāo)軸的位置為又側(cè)(其他代碼略)}

]

series:[

{type: 'bar',// 指定圖表類型為柱狀圖(其他代碼略) }

{type: 'bar',// 指定圖表類型為柱狀圖(其他代碼略) }

{

type: 'line',// 指定圖表類型為折線圖圖(其他代碼略)

yAxisIndex: 1,// 當(dāng)前數(shù)據(jù)使用編號(hào)1的y軸(其他代碼略)

}

]

echarts支持多坐標(biāo)軸，可以在yAxis中設(shè)置多個(gè)坐標(biāo)軸，并指定坐標(biāo)軸位置，在series中有一組數(shù)據(jù)使用yAxisIndex屬性，用于指定使用的坐標(biāo)軸，坐標(biāo)軸的編號(hào)默認(rèn)從0開始，如果不是用該屬性，會(huì)使用默認(rèn)值0。如果想要在圖表中顯示多個(gè)圖形，可以在series中編寫多組圖表數(shù)據(jù)配置，上述代碼中編寫了三個(gè)配置，并分別指定了圖表類型，顯示效果如圖3所示。

圖3 今年大豆產(chǎn)量與進(jìn)口總量統(tǒng)計(jì)圖

(三)制作糧食消費(fèi)結(jié)構(gòu)統(tǒng)計(jì)圖

糧食消費(fèi)結(jié)構(gòu)統(tǒng)計(jì)圖是由3個(gè)餅圖組成的，如圖4所示，包括玉米、大豆和稻谷三種糧食的消費(fèi)結(jié)構(gòu)。

圖4 糧食消費(fèi)結(jié)構(gòu)

餅圖是一種不包括坐標(biāo)軸的圖表，在制作時(shí)最核心的配置項(xiàng)為series，該配置項(xiàng)中至少要配置數(shù)據(jù)和圖表類型，三個(gè)餅圖的寫法類似，這里以玉米消費(fèi)結(jié)構(gòu)餅圖為例，關(guān)鍵代碼如下：

series: [{

type: 'pie',// 指定圖表類型

data: [// 配置數(shù)據(jù)，數(shù)據(jù)為鍵值對(duì)形式

{ "name": "飼用消費(fèi)","value": 18550 },

……

{ "name": "其他消費(fèi)","value": 1144 }

]

}]

(四)制作各省糧食總產(chǎn)量條形圖

條形圖與柱狀圖的制作非常相似，將數(shù)值軸和分類軸調(diào)換即可，如圖5所示，也就是說(shuō)將xAxis配置為數(shù)值軸，將yAxis配置為分類中，關(guān)鍵代碼如下：

xAxis:{type: 'value',// 指定為數(shù)值軸(其他代碼略)}

yAxis:{type: 'category',//指定為分類軸(其他代碼略)}

在該圖表中，帶箭頭的虛線表示平均值，最下面顯示的氣泡表示最大值。Echarts庫(kù)中提供了各種圖表標(biāo)記，可以利用標(biāo)記線、標(biāo)記點(diǎn)、標(biāo)記區(qū)域提升圖表顯示效果，在實(shí)際授課中可以讓學(xué)生參考文檔自行設(shè)計(jì)圖表標(biāo)記。

圖5 各省糧食總產(chǎn)量

三、進(jìn)階圖表制作

Echarts庫(kù)還提供了一些高級(jí)的顯示效果，與常見圖表搭配能夠制作出更加復(fù)雜的圖表，豐富圖表中蘊(yùn)含的信息量。需要配置的參數(shù)更多，比較適合學(xué)生在掌握了一定基礎(chǔ)之后學(xué)習(xí)。

(一)制作玉米和大豆價(jià)格走勢(shì)圖

玉米和大豆價(jià)格走勢(shì)圖是以折線圖為基礎(chǔ)，利用areaStyle可以將指定顏色填充個(gè)到折線下方區(qū)域，如圖6所示。

圖6 玉米和大豆價(jià)格走勢(shì)圖

在圖中使用的數(shù)據(jù)量較大，可以指導(dǎo)學(xué)生將數(shù)據(jù)存放于其他文件中，這樣管理起來(lái)補(bǔ)交方便，同時(shí)想要提升折線下方區(qū)域的填充效果，可以創(chuàng)建echarts.graphic.LinearGradient對(duì)象，實(shí)現(xiàn)顏色的漸變效果。

(二)制作糧食種植成本結(jié)構(gòu)圖

為了更直觀地對(duì)比不同糧食的種植成本結(jié)構(gòu)，可以使用柱狀堆疊圖，一個(gè)柱表示一種糧食，并且每個(gè)柱中還可以包含糧食種植的各種成本，如圖7所示。可以看到每種糧食都是由“物質(zhì)與服務(wù)費(fèi)用”“人工成本”“土地成本”組成。通過(guò)該圖表很直觀地展示出不同糧食之間種植成本的區(qū)別。

圖7 糧食種植成本結(jié)構(gòu)圖

柱狀堆疊圖主要是配置series，在series中應(yīng)包含“物質(zhì)與服務(wù)費(fèi)用”“人工成本”“土地成本”三組數(shù)據(jù)，并在每組數(shù)據(jù)中設(shè)置stack屬性。該圖表屬于柱狀圖的進(jìn)階版，學(xué)生在制作時(shí)，應(yīng)重點(diǎn)關(guān)注多組數(shù)據(jù)的組成，以及stack屬性的設(shè)置。

(三)制作豬糧比走勢(shì)圖

豬糧比的計(jì)算方式為國(guó)家發(fā)展改革委監(jiān)測(cè)統(tǒng)計(jì)的每周生豬出場(chǎng)價(jià)格與全國(guó)主要批發(fā)市場(chǎng)二等玉米平均批發(fā)價(jià)格的比值，在2021年的《完善政府豬肉儲(chǔ)備調(diào)節(jié)機(jī)制 做好豬肉市場(chǎng)保供穩(wěn)價(jià)工作預(yù)案》中修改了豬肉價(jià)格預(yù)警機(jī)制，生豬生產(chǎn)的盈虧平衡點(diǎn)為7：1，當(dāng)豬糧比低于6：1或高于9：1時(shí)開始預(yù)警，防止豬肉生產(chǎn)和供應(yīng)的大起大落[4]。

豬糧比走勢(shì)圖根據(jù)豬肉價(jià)格預(yù)警機(jī)制進(jìn)行設(shè)計(jì)，統(tǒng)計(jì)2021年1月-2022年7月的豬糧比走勢(shì)，通過(guò)圖表直觀地展示出豬糧比的波動(dòng)趨勢(shì)和生豬養(yǎng)殖的盈虧情況，如圖8所示。

圖8 豬糧比走勢(shì)圖

本案例綜合使用Echarts庫(kù)提供的多種效果，從簡(jiǎn)單到復(fù)雜循序漸進(jìn)制作了的不同類型的圖表，最終效果如圖9所示。該數(shù)據(jù)大屏基于靜態(tài)網(wǎng)頁(yè)實(shí)現(xiàn)，稍加修改后還可融入vue、flask、Django、spring等web框架中，有很強(qiáng)的擴(kuò)展性。

圖9 重點(diǎn)農(nóng)產(chǎn)品市場(chǎng)信息數(shù)據(jù)大屏

本文重點(diǎn)展示了Echarts庫(kù)在數(shù)據(jù)可視化過(guò)程中的應(yīng)用，介紹了多種圖表的制作思路和注意事項(xiàng)，可以作為貫穿整個(gè)學(xué)期的教學(xué)案例，或期末綜合練習(xí)，也可以在web網(wǎng)站開發(fā)的課程中使用。通過(guò)由淺入深的方式講解圖表的制作過(guò)程，對(duì)編程基礎(chǔ)要求較低，成品效果比較出色，容易讓學(xué)生接受，能夠很好地提升學(xué)生動(dòng)手能力，提高學(xué)習(xí)主動(dòng)性。