希望你能看到文末，帆軟從來不會在獎品上虧待你們的（滑稽臉）

又到月末了吧，各位又要趕報表了吧，具體哪些人我就不點名了，財務、IT、表哥表姐自己對號入座。而且，費很長時間做的報表老闆也不看，升職加薪簡直看不到希望！

但是試想一下，如果你是領導，看見這樣的報表你會滿意嗎？密密麻麻的是個啥阿

但是如果看見這樣的呢？我的天阿報表竟然可以動起來了？

其實，動態報表不只是看上去顏值高而已，更重要的是能夠充分解放報表製作的重複勞動，讓用戶能夠依賴這些動態數據主動地進行業務分析，大大提高工作效率和決策準確性！

那麼什麼樣的報表才算是動態報表呢？

千萬不要以為讓圖表動一動就算是動態報表了，動態報表的準確定義是指沒有固定報表模板，需要根據實際業務動態生成模板的報表，其核心在於數據和圖表類型可隨條件的不同即時展現，即除了能展現一般的靜態圖表內容之外，還必須具有良好的交互性。

這麼說可能有人就更懵了，簡單來說其核心就一點：報表數據能隨條件隨時調用。比如老闆想要查看某個月份的數據，只需要通過設置一個參數過濾條件，老闆在控件中選擇什麼時間月份，報表就只會顯示哪個月的數據，根本不需要任何圖表，這就叫做動態報表。

而動態報表的目的是為了更便捷、更迅速地查詢和閱讀數據，在這個基礎上動態報表需要包含很多邏輯動能，比如：

1、參數過濾：條件不同，看到的數據就不同，這是動態報表的基礎功能。

2、參數聯動：將兩個或多個組件建立鏈接，實現數據之間的自動關聯。比如點擊員工名稱，訂單金額、回款額等就會自動關聯為該員工的數據：

3、鑽取：動態報表的常見功能，主要是為了實現無限層數據的擴展，展開維度更高的詳細數據。比如動圖下鑽。

4、參數面板動態顯示：由於某些需要，很多情況下需要滿足當滿足某個條件時，某些查詢條件才顯示。比如選擇年報，後面的參數框就會自動顯示為年份，選擇月報，後面的參數框就會自動顯示為月份。

5、動態數據列：若數據庫中存在兩張表，如何實現不同的人根據需要選擇不同的表進行查看，從而提高查詢效率呢？此時就可以通過設置動態數據列，在控件中輸入“訂單”或者“銷量”，就會分別展示不同報表：

6、動態條件：如果你想對錶中的數據進行過濾時，查詢條件是不確定的，有時候想用 A 列進行過濾，有時候想用 B 列進行過濾，比如我想查詢地區是華北的數據，此時要如何實現呢？這個時候就要用到動態條件了！

除此之外還有很多功能，比如動態顯示報表標題、動態分組、動態sheet擴展等等，這裡不一一展示了。

二、不只是報表，還有數據可視化

酷炫的dashboard都需要通過FineReport的表單（決策報表）來設計展現。通過拖拽報表塊、圖表塊和各類控件初步設計界面。

不同於普通報表，普通報表是一個整體，無法實現局部刷新。表單是由各個組件組成，可以實現組件內刷新，即局部刷新。像動態大屏都是全局或者局部刷新的，所以需要用決策報表製作實現。

1、決策報表製作過程

新建表單：FineReport支持新建工作薄，即普通報表模板，還支持新建表單，兩種設計模式；

拖入組件：FineReport表單支持多種不同的組件類型，包括報表塊、tab塊、絕對畫布塊、參數、圖表和控件等等；

定義數據集：定義各個組件數據來源，圖表組件數據即可來源於數據集，也可來源於單元格；

設置表單樣式：即設置表單的顯示樣式。

2、精美的可視化插件

以下插件都是帆軟開發者大賽的精美作品，有些已經應用在finereport上了。

（1）3D地球：四維時空展示與信息管理，前所未有的視覺衝擊

功能：立體地球是非常好的跨區域的基於地理信息的數據載體。相對於平面地圖，3D地球更加生動，表現力也更強。3D地球插件支持基於數量和位置的點標註以及以兩個位置和時間為維度的流向地圖，實現了Web環境下的三維展示與空間信息管理，也能夠基於報表平臺進行信息發佈、數據共享、交流協作，並且完全基於 B/S 模式，與決策大屏無縫連接。

適用：在國土資源、跨國交通和跨境貿易等方面有著廣泛的應用。

（2）3D全景地圖：構造都市圈級別的宏達場景

功能：3D全景地圖插件把時間和空間帶進了帆軟。從時間上看，插件支持將日期作為維度，把點的運動軌跡動態呈現在地圖上，並且支持多種軌跡分類；從空間上看，插件使得城市建築脫離平面，立體出來，提供與鼠標之間的交互。不僅如此，定製化後的插件還支持實時刷新數據，在地圖上顯示多種標記點，左鍵拖動地圖，按住鼠標右鍵移動可以轉換視角。

適用：適用於政府部門、連鎖企業、LBS提供商等對真實經緯度和展現區域範圍敏感的用戶

（3）軌跡圖：幫助企業輕鬆追蹤百萬終端實時軌跡

功能：軌跡圖插件支持對經緯度點數據動畫的各種配置，包括運動軌跡的速率、顏色、拖尾、順序等等。帆軟finereport使用者配置好軌跡圖插件後，可在報表或大屏中同時管理並追蹤數千萬終端設備的軌跡。

適用：適用於物流車隊管理、互聯網創業公司共享出行大屏、外勤人員管理報表監控系統、運用智能穿戴設備的健康物聯網等領域。

三、接入Echarts等第三方控件

之前很多網友留言，問這樣的可視化是什麼圖表製作的。其實大多由FineReport自帶的H5圖表。此前有提到FineReport良好的開放性，可讓IT同事寫代碼開發，所以在製作時，也可接入Echarts等第三方控件來製作圖表。

在做大屏展示時，碰到帆軟自帶圖表不能滿足需求，需要echarts其他圖表來滿足，一種方法是用網頁框去外鏈圖表單頁，但這種方法需要開發代碼獲取數據。

還有一種是用帆軟自有功能掛接echarts圖表，下面來詳細介紹這種方法

1、新建決策報表，在報表內放入標籤控件（用於顯示圖表）、表格控件（用於對接數據）

2、新建數據集

3、在表格中填入數據

JOINARRAY(ds1.select(c), ",")

預覽是這樣，兩個數據都是字符串

把表格設為不可見

4、在標籤控件加 初始化後代碼，加入兩個參數，值為表格裡面的字符串ss=report0~a1 ，aa=report0~a2

5、加入以下js代碼

setTimeout(function (){ //延時執行
$("div[widgetname=LABEL0]").empty(); //清空標籤控件裡的內容 LABEL0 標籤控件名 
$("div[widgetname=LABEL0]").append("
"); //往標籤控件裡添加div，指定id 


var myChart = echarts.init(document.getElementById("echa")); //指定echarts容器，echa 為新添加div的id， echarts限制必須用 document.getElementById(" ")

strs1 = ss[0].split(","); // 將參數轉換成數組，根據圖表數據格式進行處理
strs2 = aa[0].split(",");
//以下為echarts正常配置
option = {
 xAxis: {
 type: 'category',
 data: strs1
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 data: strs2,
 type: 'line'
 }]
};
 if (option && typeof option === "object") {
 myChart.setOption(option, true);
 }
}, 500);

6、保存預覽進行調試，注意其他js的引入

成圖就是這樣了：

帆軟13週年的抽獎活動，請看置頂微頭條，活動即將結束，趕快上車！

本文中提到的軟件和模板，私信回覆“帆軟”即可獲得永久免費版噢~