查看: 1886|回復: 1
打印 上一主題 下一主題

帆軟FineReport v10.0全功能1000并發軟注冊應用中大屏的模板制作

  [復制鏈接]
跳轉到指定樓層
樓主
發表于 2019-2-28 08:54:56 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
1. 描述

( f, [! p- C+ y& `) X5 P
大屏看起來很炫,那么制作會不會很麻煩呢?下面給大家演示一下一張下面這張大屏模板的制作步驟。
) m* u9 s1 T" n7 F, T0 c

9 r1 ~, w2 ~9 r! m" [# W5 k2. 準備工作) z2 X1 W9 W! G2 Y4 L: ^
. Z9 n! R3 v% I: L: Z

. _& m0 m  T% R8 {5 i" ^
確認需求、準備數據、整理素材。這里假定需求已由業務部敲定,數據IT部也整理好了,而需要的背景圖片、邊框等事先都整理完畢。
設計大屏駕駛艙遵循四個基本步驟:
( a- u0 p" O) f$ f6 u, r. U5 x& t布局排版 ——色彩 —— 點綴效果 ——動畫。
- ^. s/ o: e. f8 {8 x& M

+ A0 O0 s$ i7 n/ E# {/ f8 A3. 布局排版: R* e3 k) G% z$ @) X2 e& R. H

& [: C- F# t. [( B; K
# T* \# x$ J: D& i& Z
業務部門的需求,是要重點展現集團銷售總額數據以及各地區的數據,其他次要內容包括歷年銷售對比、各產品線銷售、熱門產品、實時交易、新老客戶占比等。我們從常見的幾種主次分布排版樣式里挑選了一種作為此次的版面,如下圖所示:
4 T$ {5 ^( d% F* I" @8 u

; X) ~3 O( M1 ?( U
由于集團業務遍布全國,所以區域銷售數據我們認為用展示比較直觀,而全國的總銷售額這一數字疊加在地圖上進行展示。另外,對比類的數據適合用柱形圖,占比類的數據適合用餅圖,交易明細數據適合用表格。這樣,我們就確定了布局里的幾個主要元素:地圖、數字、柱形圖、餅圖、表格。
由于這里報表塊使用了重疊的,因此需要使用絕對布局,如下圖:
打開 FineReport 設計器,按照布局樣式,從組件欄拖入對應的圖表元素到指定區域并綁定數據,如下圖所示:
點擊預覽按鈕,端的效果如下圖所示。到這里第一版效果就出來了,主次排版讓界面看上去很規范,但配色沒有經過改良所以效果一般。
2 Z4 c+ p& C1 d4 U
4. 色彩% a( I* a- D6 m
8 ?- ^2 o" t4 e
# I. }7 C3 p0 |5 C) A! V" z  o
在上次帖子里,我們總結過,大屏的主體背景建議用深色系,這樣可以有效避免視覺刺激。如此,我們把第一版demo背景換成背景圖片,由于整體背景是深色的,使得我們的一些標題文字還看上去不明顯,而且圖表有種沉悶的感覺,稍微調整了下,把文字內容改成淺色、圖表則換稍微明亮一點的顏色,如下圖:

1 u! h1 v- d3 q/ ?5. 點綴7 x3 W) j! \6 M) l
! w  [$ d" z. c1 v, s
/ ^  V. m5 N8 X% w1 P
接下來為各個組件、標題添加一些邊框來提升細節處的觀感。
1)首先是頂部大標題,在大標題兩側各拖入一個報表塊,為報表塊添加背景圖片,左右對稱線條極大提升美感。

& @% j$ u# |* S; g6 [% f
2)其次是改造各個組件的小標題,方直接為小標題所在的報表塊組件添加合適的背景。
3)給各個組件添加邊框元素,最后得到效果如下:

2 a$ `* J9 y# [8 z2 f7 m( z6. 動效
, x9 Q6 a# U9 @' x3 a

  C  D/ ?1 @2 {- U
$ p0 W" l5 \% W% g8 |9 p" C
由于大屏本身場景特殊,純粹靜態展示讓人感覺大屏缺乏活力。為此,給demo加上一些動畫效果,提升一下demo的活力及視覺觀感。
1)首先我們來為銷售總額設置數據監控(需要安裝決策報表里報表塊刷新插件),讓其每隔1秒獲取最新數據,這樣銷售總額數字會實時動態變化,設置如下圖:
效果如下圖:

/ X5 P! l/ S2 l4 D& C7 r
2)再給圖表添加閃爍動畫,設置如下圖:
                                       
效果如下圖:
3)給地圖添加一個數據監控,讓各區域變化的數據在地圖上自動顯示數據點提示,設置如下圖:
效果如下圖:
4)右下角的明細數據展示,改成滾動輪播的形式,詳細操作方法點擊
效果如下圖:
直到這里就大屏制作就完成了!

" }8 Y6 ^+ D4 W1 L% N, p; Y" X7. 小結- Z0 s- }2 A" A& E

# K% @  U& l  o6 u6 a  [4 u( F  C8 _0 C( d/ P
按照套路做大屏駕駛艙,很容易做出的效果呢!
其實在第四步動效步驟,還可以加入更多交互效果,比如地圖鉆取,點擊某個省份穿透到市級地圖;或者比如聯動,點擊左上角的區域排名柱形圖,則產品類別占比餅圖聯動顯示具體省份的數據。

* W1 c4 n+ U. i( C( Z$ C0 W
帆軟FineReport v10.0全功能1000并發軟注冊文件
帆軟FineReport v10.0全功能1000并發軟注冊.rar (239 Bytes, 下載次數: 63)
. S# N- A& K1 k( R: S
1 T2 {4 B& d: r

相關技術服務需求,請聯系管理員和客服QQ:2753533861或QQ:619920289
沙發
發表于 7 天前 | 只看該作者
跪求大神,給一個學習學習唄
相關技術服務需求,請聯系管理員和客服QQ:2753533861或QQ:619920289
您需要登錄后才可以回帖 登錄 | 用戶注冊

本版積分規則

帖子推薦:
客服咨詢

QQ:2753533861

服務時間 9:00-22:00

快速回復 返回頂部 返回列表

澳客網彩票-360云盤