潤乾報表有豐富的圖形展現效果，不僅自帶了多種統計圖形，還內置了第三方統計圖形 D3 還有 echarts 統計圖。最近好多客戶提出想要實現多折線堆疊的統計圖，我用自帶的圖形和 echarts 兩種方式做了多折線堆疊的報表示例，和大家分享下。

公司專注于為企業提供成都做網站、成都網站制作、微信公眾號開發、商城網站建設，成都小程序開發，軟件按需網站策劃等一站式互聯網企業服務。憑借多年豐富的經驗，我們會仔細了解各客戶的需求而做出多方面的分析、設計、整合，為客戶設計出具風格及創意性的商業解決方案，創新互聯建站更提供一系列網站制作和網站推廣的服務。

使用潤乾自帶的統計圖實現多折線堆疊統計圖

新建一個報表，增加一個數據集，這里我用的是一個內建數據集，數據集的字段及字段類型如下圖所示：

數據形式如下圖所示：

潤乾自帶的統計圖的數據來源可以使用數據集字段，也可以使用單元格的值。

使用單元格值作為統計圖數據來源

1. 先將數據集中的數據在單元格中整理好，如下圖所示：

A3 是根據日期進行分組，單元格默認的擴展方式為縱向，所以 A3 的擴展方向不用管；

橫向擴展是取到不同的營銷方式，也就是除日期字段以外的其他字段名稱，所以我們在寫擴展表達式的時候從第二個字段名開始擴展；

B3 對應的是不同營銷方式，在一周中的不同情況。

數據在單元格中整理好后我們就可以在想要顯示統計圖的格子中添加統計圖了，這里將 A4:C11 這片區域合并了，右鍵單元格，選擇統計圖，在統計圖屬性定義中做如下設置：

1. 統計圖類型選擇折線圖；

2. 設置分類軸為 A3 單元格；

3. 設置系列值和系列名稱。

通過以上簡單的設置，我們的多折線統計圖就已經做好了，下面我們預覽下報表看看統計圖的效果。

統計圖的區域背景色、橫縱軸的顏色在顯示外觀中進行修改，如下圖所示：

一個圖是否美觀和它的配色有直接關系，修改配色也是在顯示外觀選項卡中設置：

在圖形特性這個 TAB 頁中可以調整線的粗度

在數據展現頁面只想顯示統計圖的話，我們可以對于單元格的列表數據隱藏。

我們再來預覽下修改過外觀的統計圖效果。

使用數據集字段作為統計圖數據來源

在上一個統計圖下方添加一個統計圖，統計圖具體設置步驟如下：

1. 首先統計圖類型選折線圖;

2. 數據集選擇 ds1;

3. 分類軸定義，也就是確定橫軸所使用的分類為字段名為日期的字段；

4. 將數據集中的其他字段名都作為系列值設置。

參照上一統計圖的美化方法對報表的圖形特性進行修改，在 web 端就可以看到制作的統計圖了。

如果數據集中整理好統計圖中顯示的數據，并且不需要顯示出列表數據，建議直接使用數據集字段的方式作圖，這樣報表展現速度相對快些。

echarts 多折線統計圖的實現

1. 在單元格中添加第三方統計圖，右鍵單擊添加統計圖的區域，選擇第三方統計圖。

打開模板后，在左側設置圖例，以及統計圖顯示的數據：

設置好表達式后，點擊確定，保存報表，頁面就可以看到 echarts 在報表中做的效果了。

詳情鏈接： http://c.raqsoft.com.cn/article/1569809352071?r=gxy