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

使用潤乾自帶的統(tǒng)計圖實現(xiàn)多折線堆疊統(tǒng)計圖

新建一個報表，增加一個數(shù)據(jù)集，這里我用的是一個內(nèi)建數(shù)據(jù)集，數(shù)據(jù)集的字段及字段類型如下圖所示：

數(shù)據(jù)形式如下圖所示：

潤乾自帶的統(tǒng)計圖的數(shù)據(jù)來源可以使用數(shù)據(jù)集字段，也可以使用單元格的值。

使用單元格值作為統(tǒng)計圖數(shù)據(jù)來源

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

A3 是根據(jù)日期進(jìn)行分組，單元格默認(rèn)的擴展方式為縱向，所以 A3 的擴展方向不用管；

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

B3 對應(yīng)的是不同營銷方式，在一周中的不同情況。

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

1. 統(tǒng)計圖類型選擇折線圖；

2. 設(shè)置分類軸為 A3 單元格；

3. 設(shè)置系列值和系列名稱。

通過以上簡單的設(shè)置，我們的多折線統(tǒng)計圖就已經(jīng)做好了，下面我們預(yù)覽下報表看看統(tǒng)計圖的效果。

統(tǒng)計圖的區(qū)域背景色、橫縱軸的顏色在顯示外觀中進(jìn)行修改，如下圖所示：

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

在圖形特性這個 TAB 頁中可以調(diào)整線的粗度

在數(shù)據(jù)展現(xiàn)頁面只想顯示統(tǒng)計圖的話，我們可以對于單元格的列表數(shù)據(jù)隱藏。

我們再來預(yù)覽下修改過外觀的統(tǒng)計圖效果。

使用數(shù)據(jù)集字段作為統(tǒng)計圖數(shù)據(jù)來源

在上一個統(tǒng)計圖下方添加一個統(tǒng)計圖，統(tǒng)計圖具體設(shè)置步驟如下：

1. 首先統(tǒng)計圖類型選折線圖;

2. 數(shù)據(jù)集選擇 ds1;

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

4. 將數(shù)據(jù)集中的其他字段名都作為系列值設(shè)置。

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

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

echarts 多折線統(tǒng)計圖的實現(xiàn)

1. 在單元格中添加第三方統(tǒng)計圖，右鍵單擊添加統(tǒng)計圖的區(qū)域，選擇第三方統(tǒng)計圖。

打開模板后，在左側(cè)設(shè)置圖例，以及統(tǒng)計圖顯示的數(shù)據(jù)：

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。