<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          從 0 到 1 手把手教你制作酷炫可視化大屏

          共 1738字,需瀏覽 4分鐘

           ·

          2021-05-21 21:23

          往期熱門文章:

          1、【建議收藏】面試官會(huì)問的位運(yùn)算奇淫技巧
          2、為什么不建議你用a.equals(b)判斷對(duì)象相等
          3、為什么不推薦使用BeanUtils屬性轉(zhuǎn)換工具
          4、Top 16 的 Java 工具類,你用過幾個(gè)?
          5、到底可不可以用 kill -9 關(guān)閉程序?
          從大屏可視化出現(xiàn)以來,一直深受各界企業(yè)的追捧,最典型的就是每年淘寶的雙十一銷售額大屏,最近我也剛接觸了一個(gè)大屏項(xiàng)目,借此總結(jié)了一些可視化大屏制作經(jīng)驗(yàn)與大家分享。

          這種大屏看著高端大氣上檔次,然而其開發(fā)步驟卻并不像想象中那么簡(jiǎn)單,基本步驟就有五步:

          大屏開發(fā)工具

          開發(fā)可視化大屏,一般有兩種方式,一是用代碼開發(fā),還有一種是用現(xiàn)成的可視化工具制作。
          用的比較多的就是JS+Ecahrts,但數(shù)據(jù)量支撐、后臺(tái)響應(yīng)、實(shí)時(shí)更新、平臺(tái)運(yùn)維等應(yīng)該還要調(diào)用更多的技術(shù),非常考驗(yàn)技術(shù)水平,所以我推薦直接用可視化工具制作,比如FineReport、dataV等等,簡(jiǎn)單又方便,重點(diǎn)是不需要寫一大堆代碼,自帶的圖表插件可視化效果很炫酷。下面就以FineReport為例子,演示一下如何制作下面這樣一張可視化大屏。

          數(shù)據(jù)準(zhǔn)備

          制作報(bào)表前首先需要定義數(shù)據(jù)來源,一般來說,企業(yè)的數(shù)據(jù)都是保存在數(shù)據(jù)庫中,并且在不斷更新,F(xiàn)ineReport可以直接和數(shù)據(jù)庫進(jìn)行鏈接,使用數(shù)據(jù)庫中的數(shù)據(jù)來制作報(bào)表,并且報(bào)表內(nèi)容會(huì)隨著數(shù)據(jù)庫的更新而更新。

          新建決策報(bào)表

          數(shù)據(jù)庫鏈接好后,我們新建報(bào)表模板準(zhǔn)備開始制作,F(xiàn)ineReport有三種報(bào)表模式,普通報(bào)表適合用來做一些常規(guī)類型的統(tǒng)計(jì)報(bào)表,聚合報(bào)表主要用來做中國(guó)式的復(fù)雜表,決策報(bào)表適合用來制作大屏或者駕駛艙。
          因此,我們選擇決策報(bào)表來制作一張大屏,打開finereport設(shè)計(jì)器的決策報(bào)表模式,新建決策報(bào)表:

          新建數(shù)據(jù)集

          新建數(shù)據(jù)集,將數(shù)據(jù)庫中所需要的數(shù)據(jù)存放在數(shù)據(jù)集中:

          設(shè)計(jì)報(bào)表

          FineReport決策報(bào)表采用的是畫布式布局,圖表組件自由拖拽、擺放,很靈活,內(nèi)置了幾十種圖表類型,基本上夠用了。
          我們按照之前設(shè)計(jì)好的布局,將圖表組建拖拽到對(duì)應(yīng)位置,然后分別定義好數(shù)據(jù)鏈接,大屏雛形就完成了:

          細(xì)節(jié)美化

          圖表布局之后,下一步就是要對(duì)顏色、背景、圖表標(biāo)題等等細(xì)節(jié)進(jìn)行美化。
          • 配色
          大屏背景最好使用深色暗色背景,因?yàn)樯钌瞪尘翱蓽p少拼縫帶來的不適感,而且還能夠減少屏幕色差對(duì)整體表現(xiàn)的影響;同時(shí)暗色背景更能聚焦視覺,也方便突出內(nèi)容、做出一些流光、粒子等酷炫的效果
          給大家?guī)讉€(gè)推薦的配色方案:
          背景不一定要用顏色,也可以采用深色系的圖片,可以搭配其他一些現(xiàn)實(shí)特性可以讓整體看著更有科技感。推薦使用一些帶有星空、條紋、漸變線、點(diǎn)綴效果之類的圖片等。
          • 統(tǒng)一圖表系列、標(biāo)簽配色
          • 點(diǎn)綴
          在大屏展現(xiàn)上,細(xì)節(jié)會(huì)極大的影響整體效果,需要通過適當(dāng)給元素、標(biāo)題、數(shù)字等添加一些諸如邊框、圖畫等在內(nèi)的點(diǎn)綴效果,能幫助提升整體美觀度。

          動(dòng)態(tài)效果展示

          到上一步,其實(shí)一張大屏就完成的差不多了,如果你覺得不夠炫酷,還可以使用一些3D動(dòng)效的圖表插件,增加科技感,F(xiàn)ineReport提供很多這樣的插件可以下載,提升大屏逼格。
          最后保存,點(diǎn)擊預(yù)覽,一張完美的可視化大屏就制作完成了。

          模板展示



          來源:https://www.toutiao.com/i6820633397023474180/

          往期熱門文章:

          1、歷史文章分類導(dǎo)讀列表!精選優(yōu)秀博文都在這里了!》

          2、IDEA 2021首個(gè)大版本發(fā)布,新增了這幾個(gè)超實(shí)用功能!

          3、Optional 是個(gè)好東西,你真的會(huì)用么?

          4七種方式教你在Spring Boot初始化時(shí)搞點(diǎn)事情

          5、ConcurrentHashMap有十個(gè)提升性能的地方,你都知道嗎?
          6、程序員等級(jí)圖鑒
          7Java 中的 Switch 都支持 String 了,為什么不支持 long?
          8、為什么數(shù)據(jù)庫字段要使用NOT NULL?
          9CTO 說了,用錯(cuò) @Autowired 和 @Resource 的人可以領(lǐng)盒飯了
          10、程序員離職事件始末

          瀏覽 52
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  五月天高清无码 | 特级西西444WWW大精品视频 | 眼镜人妻在线视频不卡 | 老牛嫩草破苞视频A片 | 三级视频成人在线观看 |