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

目前成都創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、肇慶網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

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

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

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

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

橫向擴(kuò)展是取到不同的營(yíng)銷(xiāo)方式，也就是除日期字段以外的其他字段名稱(chēng)，所以我們?cè)趯?xiě)擴(kuò)展表達(dá)式的時(shí)候從第二個(gè)字段名開(kāi)始擴(kuò)展；

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

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

1. 統(tǒng)計(jì)圖類(lèi)型選擇折線圖；

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

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

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

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

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

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

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

我們?cè)賮?lái)預(yù)覽下修改過(guò)外觀的統(tǒng)計(jì)圖效果。

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

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

1. 首先統(tǒng)計(jì)圖類(lèi)型選折線圖;

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

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

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

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

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

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

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

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

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

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

網(wǎng)站題目：多折線堆疊圖如何制作？-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/csssej.html