在 echarts关系图动态线上添加文字_多折线堆叠图如何制作?
潤乾報表有豐富的圖形展現(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: git bash here创建项目无法选
- 下一篇: docker脚本安装 阿里云_让运行在