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

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

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

數據形式如下圖所示：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 數據集選擇 ds1;

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

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

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

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

echarts 多折線統計圖的實現

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

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

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

echarts 在頁面中的樣式需要修改那個模板顯示的那個區域的 JS，具體屬性修改，詳見echarts 官網的配置項手冊。

總結

以上是生活随笔為你收集整理的在 echarts关系图动态线上添加文字_多折线堆叠图如何制作？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。