國家電網大屏報表製作示例說明

xiaohuihui發表於2019-03-04

2018 年已經過半,各省又開始比考試成績了,考試科目就叫 GDP,排在前面的自然揚眉吐氣,排在後面的,就灰頭土臉了,同樣都是大省份,同樣都是直轄市,為啥你排名靠前,我卻墊了底呢?來,讓小編給各位揭曉答案(此處應該有“咣咣咣”三聲響)。

答案便是:因為你用電量不夠高!!!

有託著腮幫子懷疑的,請看下國家電網的大屏分析,看看右下方的資料是不是我說的答案。

1png
沉穩內斂型

ddd4png

繽紛炫酷型(怎麼做更炫酷,請看文章結尾 )

注:以上都是基於剛剛釋出不久還冒熱氣的真實資料做的統計。

其實,明眼人一看就知道小編這個答案是完全經不起推敲的,是小編為了吸引大家眼球硬生生的給捏出來的答案,但是這個答案也是有一定道理的。就像,我們說好學生用的練習本多是一個道理,不一定你用的練習本多就可以成為好學生,但是用的少的,大機率成不了好學生。

好了,我們就繼續就這個話題,繼續看看電網的電力統計還能幫我們分析出哪些資訊和規律。

一個主題大屏包括 n 多小的模組元件。就今天的主題,我們分為上半年全國各省用電情況統計、用電總量統計及與上年對比、全國全社會用電量情況(分各產業與居民用電)、用電大省的經濟發展情況(用電前五省份及 GDP 排名情況)、下半年用電預測及上半年發電情況分佈等七個模組。根據資料分析形式分別採用地圖、柱圖、儀表盤、折線等統計圖呈現,使其更直觀、更好理解。

潤乾報表怎麼做大屏?!easy,無需多想,幹就是了。

注:以下所用資料均來自國家能源局、統計局。

各省用電情況分析

以地圖形式呈現各省的用電情況,用電量越高 顏色越深。

2png

做法:

1,準備資料

內建資料集,增加”地區”和”電量”欄位,把獲取到的各省用電量資料依次錄入

3png

2,設定統計圖及表示式

報表單元格內右–第三方統計–開啟模板,選擇“地圖”

4png

依次設定左側引數部分表示式:

dataname:資料集.select@r(地區,,,地區)
datavalue:H1{}  此處的H1內為擴充套件格擴充套件的所有用電量欄位值,第一行隱藏
seriesName:[“用電量”]
legend:[“用電量”]dataname:資料集.select@r(地區,,,地區)
datavalue:H1{}  此處的H1內為擴充套件格擴充套件的所有用電量欄位值,第一行隱藏seriesName:[“用電量”]legend:[“用電量”]

3,預覽效果

5png

其中標題與副標題均可在地圖中設定,包括其他樣式(如左下的 dataRange、地圖用色、是否顯示數值等)可透過 echarts 的屬性處理。

注:以下統計圖均採用第三方 echarts2 統計圖,不再說明。

2018 年上半年用電總量統計、同比

以儀表盤形式呈現 2018 上半年、2017 上半年及 2017 全年用電總量。

6png

直觀能看出,2018 年上半年已用電 32291 億千瓦時,相比 17 年的上半年同比增長 9.43%。2017 年全年用電 63077 億千瓦時,根據往年及 2018 上半年的增長情況,預計 2018 年全年用電量要逼近 70000 億千瓦時。

做法:

1,準備資料

儀表盤理論上本身只需要一個 value 值,所以無需準備資料集,可以直接在統計圖中定義。

注:實際還需要一個總的值,決定指標的位置。

2,儀表盤設定

該模組下顯示 3 個資料,所以依次在相連的三個單元格內如下操作:

報表單元格內右–第三方統計–開啟模板,選擇“儀表盤”

以 2018 年上半年為例  

7png 8png

  Series 內 max 設定為預估的 2018 年全年用電,data 內為上半年實際用電量。

3,預覽效果

9png

全社會用電情況統計(即第一、二、三產業與居民生活用電)

以柱圖形式呈現,更直觀對比各產業及居民生活用電的增長情況。

10png

分產業看,第一產業用電量 328 億千瓦時,同比增長 10.3%;第二產業用電量 22336 億千瓦時,同比增長 7.6%;第三產業用電量 5071 億千瓦時,同比增長 14.7%。城鄉居民生活用電量 4555 億千瓦時,同比增長 13.2%。

第二產業為用電大戶,這也是產業型別決定,佔到社會用電的 70%。 第三產業涵蓋行業較多,相比城鄉居民用電總量高 11% 左右。另外,受天氣影響及人民生活水平改善,居民用電也同比增長 13.2%,增長速度很快。

做法:

1,準備資料

可以用報表資料集,當然因資料較少,直接定義在圖形裡完全沒問題。

2,柱圖設定

第三方統計圖中選擇“柱圖”,其中

11png

12png

13png

分別對應系列、分類軸及各系列對應資料。

3,預覽效果

14png

注:以下幾個模組與柱圖均屬一個圖形系列,不再囉嗦具體做法,僅做分析。

用電大省經濟發展情況

以條形圖呈現 2017 年全年及 2018 年上半年用電量前五的省份及 GDP 的排名情況。

15png

作為觀察經濟走勢的風向標的指標,用電量佔據一席。參考剛剛出爐的 2018 年上半年 GDP 各省排名情況,用電量前五的省份,前四位 GDP 排行也依次排在前四。第五位的河北,其用電量也在第七(環保專家又發話了?重工業又被關停了? 娛樂一下)。

所以,“要想 GDP 資料好,用電絕對不能少”還真不是口號,真的像一對夫妻相輔相成。

本人作為一個普通老百姓,息息相關的城鄉居民生活用電增長可真不少,估計這裡面天氣因素(今年初的寒潮和入夏以來的蒸、燒烤天氣)功不可沒,當然也有老百姓消費升級的拉動(原來騎腳踏車解決的短途交通問題,現在都懶得換成平衡車、便攜摺疊電動車了;刷個牙也都電動了;家庭空調 24 小時也不關機了,都是電(qian)啊)。

2018 年上半年發電情況

包括上半年總髮電量,同比及累計增長,各月份發電量及各發電型別(火力、水力、風力、核能、太陽能)發電總量情況

各月發電量、同比及累計增長

16png

各發電型別發電量統計

17png

從增長情況看,充足的發電能力保障了社會用電。國家在保證充足供電情況下,為了環保考慮,不斷促進新能源發電的發展。從發電型別看,太陽能、水力等發電佔比不斷擴大。這也看出國家在治理環境汙染方面做出的巨大努力。

2018 年下半年用電預測

根據 2018 年上半年的用電情況及同比增長情況,以折線圖形式呈現下半年個月的預測用電量,該資料可以為發電計劃做參考。

18png

根據上半年用電、往年下半年用電增長情況,這裡預測了下下半年各月的可能用電情況,總量接近 70000 億千瓦時。下半年能否提供充足保障?讓我們拭目以待!!

整體佈局

再來聊聊怎麼擺楞這些元件,本例採用視覺美觀的對稱(基本)結構,根據呈現的業務資料合理佈局各模組。其中的地圖作為焦點,顯示各省用電情況,觀感上大氣,資料也清晰明瞭。

另外,整個大屏也並非所有的必須都是資料,還可增加符合主題的圖片等美化效果,當然佔比要適當。

png

溫馨提示:對於大屏展示,整體及各元件的大小要根據實際的情況做調整,才能與實際展示裝置更匹配。

設計好佈局後,將前面做好的元件一一放好即可,對應調整好大小  使其達到最協調、最美的展示效果。

20png

嗯,還是挺漂亮的。

配色說明

1,背景色(當然可以用圖片)的選取

整體採用深藍色,一是有科技感,二是大屏顯示不會刺眼(小秘密:螢幕亮度高的話,用淺色會亮瞎你的小眼兒)。

元件背景採用亮度稍高的藍色(#264C70),和大背景對比,不會跳色,承接自然。同時避免用太“髒”,比如深灰色系等,雖然不刺眼,但看起來不舒服。

2,標題字型用色  

(1)主標題,採用白色(#FFF),和其他配色相比有鶴立雞群的感覺,焦點。。。

(2)元件標題,文字及圖作為資料展示的重點,自然要突出一些,要抓住看客的眼球。此例中採用微軟雅黑的亮藍色(#87CEFA),文字前配上圓形圖示,更能引起看客的注意。有哪些元件也是一目瞭然,觀看者能快捷找到關注的內容。

3,統計圖配色

整體還是與背景色搭配,選擇相融的色系,還是避免跳色(不是說跳色不好,如果有特殊的資料還是有跳色更好,比如來個紅色突出一些預警資料)。

標籤文字:#679DBF

柱或折線的顏色:[‘#32749C’,‘#2F8CC0’,‘#75B6DD’,‘#4EB3AD’,‘#028688’]

能不能更炫酷?!

可以,開篇已劇透!

這裡的炫酷是相對於沉穩內斂型來說,我們可以透過簡單調換顏色、增加效果背景圖等來使得整體更活潑、靚麗。

溫習一下圖

ddd4png

怎麼改?! 真的特簡單。

1、 整體背景色由背景圖替代
好看的背景圖,可以將各元件襯托的更完美。
首先找或問美工要到合適的圖片,透過報表工具選單欄,報表 -- 報表屬性 -- 背景圖 完成新增背景圖。

2、 調整統計圖柱線用色

原配色列表為 [‘#32749C’,‘#2F8CC0’,‘#75B6DD’,‘#4EB3AD’,‘#028688’],替換一組為 [‘#32749C’,‘#2F8CC0’,‘#75B6DD’,‘#4EB3AD’,‘#028688’]。

以“中下”位置的環形圖為例,編輯統計圖,找到

dd5png

替換 color 值,齊活!

3、 調整軸標籤值配色

包含 X、Y 軸,以位置“左下”的柱圖為例,找到

dd6png

直接替換成想要的(應該是更合適的)顏色即可。
透過以上簡單 3 小步,輕鬆靈活換風格,真心不由得想給自己個贊。

總結

“騙”大家進來了解了用電量和 GDP 的關係(腦洞開沒開,漲沒漲知識?!),其實更重要的是讓大家瞭解下潤乾報表也是可以處理大屏需求的(di),並且同樣做的很美。 對於大屏的製作,只要下足功夫,效果肯定是可以接近完美的。 當然最好給配個專門的美工人員,給開發人員們搞搞配色、佈局等樣式問題,不然還有另外一個口號“真想大屏做的好,時間必定花不少”。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2637449/,如需轉載,請註明出處,否則將追究法律責任。

相關文章