基于農業數據的可視化大屏教學案例研究

張 業 男

(黑龍江農業經濟職業學院，黑龍江 牡丹江 157000)

數據可視化能夠利用圖表將數據直觀地展示出來，幫助人們分析數據和查找數據的規律，特別與web前端技術結合后極大提高了可訪問性和交互性，作為一個新興技得到了很好的發展[1]。

在數據可視化課程中，教學內容通常側重于數據分析和單個圖表制作，整個過程略顯枯燥，學習一段時間后，學生對于重復性知識逐漸失去興趣，同時在實際工作中不同領域的數據分析重點和分析方法區別較大。為了緩解這些問題，可以引入不同專業領域的數據和基礎知識，制作可視化大屏。本文以農業為主題，利用HTML、CSS、JavaScript、echarts等技術，展示可視化大屏作為案例的在教學中的應用。

一、整體框架設計

在數據可視化大屏的初期設計時，可以結合教學內容來確定圖表的展示內容，本案例將農業數據的統計分析與數據大屏相結合，在學習數據可視化知識的同時，也了解部分農業數據統計相關概念，包括柱狀圖、折線圖、條形圖、面積圖、堆疊圖，制作難度逐步升級，能夠讓學生循序漸進掌握知識的同時，產生強烈的成就感，激發學習興趣。

對于數據大屏的整體設計，需要保證展示的內容清晰、重點突出、易于閱讀，準備呈現的數據有糧食產量、播種面積、消費結構、糧食價格、種植成本結構、豬糧比等內容。應該將全局數據放在醒目位置，相互關聯的數據應該在相鄰位置，重要信息安排較大區域，同時應做到主次分明、重點突出，基于以上需求，一個合格的數據大屏應該根據展示內容劃分區域。利用HTML+CSS技術構建數據大屏主體結構，如圖1所示，將頁面劃分為7個區域，其中左右兩側分別有三個區域，中間為一個區域，其中展示的圖表有柱狀圖、折線圖、餅圖、柱狀堆疊圖。

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

圖1 主體結構

二、常見圖表制作

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

(一)制作近年玉米產量統計圖

近年玉米產量柱狀圖是數據大屏中最簡單的一個圖表，通過該圖表的制作可以讓學生了解Echarts的基本使用方法，如果是期末作為綜合練習，可以讓學生仿照Echarts的官方Demo來制作。Echarts的使用大體上分為如下幾個步驟：

1.在html頁面中引入ECharts庫。

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

3.初始化echarts實例。

4.指定圖表的配置項和數據。

在圖表制作時，首先導入所需的js文件，需要導入的文件如下：

由于案例中圖表較多，為了使HTML頁面代碼更加簡潔，可以將圖表相關代碼放在一個單獨js文件中，并導入該文件，導入代碼如下：

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

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

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

xAxis:{

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

data: ["2017年",…… "2022年"],//設置標簽內容

……

}

yAxis用于配置縱坐標軸，關鍵代碼為：

yAxis:{

type: 'value',// 指定為數值軸

……

}

series用于配置數據，并制定圖表類型，關鍵代碼為：

series:[

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

data: [25907.07,…… ,27720.3],// 指定圖表數據

……

]

還可以根據實際教學內容，通過其他配置項調整圖表顯示效果，如圖2所示：

圖2 近年全國玉米產量統計圖

(二)制作近年大豆產量與進口總量統計圖

近年大豆產量與進口總量統計圖的中包含了“大豆產量”“大豆進口量”“大豆進口量同比”三種數據的統計，此時需要在series中配置三組數據，同時大豆進口量同比為百分比與其他數據單位不一致，不能放在同一個坐標軸中，關鍵代碼如下：

yAxis: [

{ position: 'left' // 設置當前坐標軸的位置為左側(其他代碼略)},

{ position: 'right',// 設置當前坐標軸的位置為又側(其他代碼略)}

]

series:[

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

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

{

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

yAxisIndex: 1,// 當前數據使用編號1的y軸(其他代碼略)

}

]

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

圖3 今年大豆產量與進口總量統計圖

(三)制作糧食消費結構統計圖

糧食消費結構統計圖是由3個餅圖組成的，如圖4所示，包括玉米、大豆和稻谷三種糧食的消費結構。

圖4 糧食消費結構

餅圖是一種不包括坐標軸的圖表，在制作時最核心的配置項為series，該配置項中至少要配置數據和圖表類型，三個餅圖的寫法類似，這里以玉米消費結構餅圖為例，關鍵代碼如下：

series: [{

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

data: [// 配置數據，數據為鍵值對形式

{ "name": "飼用消費","value": 18550 },

……

{ "name": "其他消費","value": 1144 }

]

}]

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

條形圖與柱狀圖的制作非常相似，將數值軸和分類軸調換即可，如圖5所示，也就是說將xAxis配置為數值軸，將yAxis配置為分類中，關鍵代碼如下：

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

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

在該圖表中，帶箭頭的虛線表示平均值，最下面顯示的氣泡表示最大值。Echarts庫中提供了各種圖表標記，可以利用標記線、標記點、標記區域提升圖表顯示效果，在實際授課中可以讓學生參考文檔自行設計圖表標記。

圖5 各省糧食總產量

三、進階圖表制作

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

(一)制作玉米和大豆價格走勢圖

玉米和大豆價格走勢圖是以折線圖為基礎，利用areaStyle可以將指定顏色填充個到折線下方區域，如圖6所示。

圖6 玉米和大豆價格走勢圖

在圖中使用的數據量較大，可以指導學生將數據存放于其他文件中，這樣管理起來補交方便，同時想要提升折線下方區域的填充效果，可以創建echarts.graphic.LinearGradient對象，實現顏色的漸變效果。

(二)制作糧食種植成本結構圖

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

圖7 糧食種植成本結構圖

柱狀堆疊圖主要是配置series，在series中應包含“物質與服務費用”“人工成本”“土地成本”三組數據，并在每組數據中設置stack屬性。該圖表屬于柱狀圖的進階版，學生在制作時，應重點關注多組數據的組成，以及stack屬性的設置。

(三)制作豬糧比走勢圖

豬糧比的計算方式為國家發展改革委監測統計的每周生豬出場價格與全國主要批發市場二等玉米平均批發價格的比值，在2021年的《完善政府豬肉儲備調節機制 做好豬肉市場保供穩價工作預案》中修改了豬肉價格預警機制，生豬生產的盈虧平衡點為7：1，當豬糧比低于6：1或高于9：1時開始預警，防止豬肉生產和供應的大起大落[4]。

豬糧比走勢圖根據豬肉價格預警機制進行設計，統計2021年1月-2022年7月的豬糧比走勢，通過圖表直觀地展示出豬糧比的波動趨勢和生豬養殖的盈虧情況，如圖8所示。

圖8 豬糧比走勢圖

本案例綜合使用Echarts庫提供的多種效果，從簡單到復雜循序漸進制作了的不同類型的圖表，最終效果如圖9所示。該數據大屏基于靜態網頁實現，稍加修改后還可融入vue、flask、Django、spring等web框架中，有很強的擴展性。

圖9 重點農產品市場信息數據大屏

本文重點展示了Echarts庫在數據可視化過程中的應用，介紹了多種圖表的制作思路和注意事項，可以作為貫穿整個學期的教學案例，或期末綜合練習，也可以在web網站開發的課程中使用。通過由淺入深的方式講解圖表的制作過程，對編程基礎要求較低，成品效果比較出色，容易讓學生接受，能夠很好地提升學生動手能力，提高學習主動性。