使用特殊符號美化報表

1.1 問題描述

在製作報表的程式中，經常需要新增一些小圖示來美化報表，這時候一般都是選擇插入圖片來實現。

但是插入圖片容易增加報表記憶體，而且在滿足不同條件顯示不同圖示的場景下設定比較麻煩。

如何簡單實現插入小圖示呢，如下，使用特殊符號來代替圖片。

1.2 實現思路

特殊符號可以直接複製貼上，在需要插入的地方直接輸入就行。

若對於某些特殊符號，不同瀏覽器或者不同版本的設計器無法顯示、亂碼問題，可以採用下面連結中的小圖示來代替

附網站：阿里巴巴矢量圖示庫

2.1 準備資料

建立資料集 ds1，SQL 語句如下：

SELECT 銷售員,sum(銷量) as 銷量 FROM 銷量 

where 產品='${產品}'

group by 銷售員 order by 銷量 desc

2.2 設計表格

報表設計如下，A2 儲存格輸入公式seq()，設定左父格為 B2。

2.3 新增特殊符號

1）A2 儲存格新增一個條件屬性，當前值為 1 時，設定字體大小為 16 號，字體顏色為金色。新值為♚，如下圖所示：

2）同理再給 A2 儲存格新增另外兩個條件屬性。

• 當前值為 2 時，設定字體大小為 16 號，字體顏色為銀色，新值為♚

• 當前值為 3 時，設定字體大小為 16 號，字體顏色為銅色，新值為♚

3）參數面板新增預設生成的元件，設定 label 的預設值如下：

4）產品元件選擇為下拉框，設定下拉框資料字典如下：

2.4 效果預覽

1）PC 端

儲存報表，點選分頁預覽，效果如下圖所示：

2）行動端

同時支援 App 端和 H5 端預覽，效果如下圖所示：

點選下載範本：使用特殊符號美化報表.cpt

4.1部分特殊符號預覽後可能顯示多餘的]]>，如下圖所示：

1）儲存格中可以使用形態公式來解決

replace($$$,"]]>","")

2）元件中可以使用初始化後事件來解決

var a=this.getValue().substring(0,4); // 實際截取長度根據具體情況改變
this.setValue(a);

4.2 矢量圖代替圖示

在該網站（矢量圖）可下載任意需要的圖片且可以自己配色（此處以皇冠為例）

4.2.1 選擇並下載圖片

4.2.2 圖片put 命令儲存格

將下載後的圖片，自適應put 命令儲存格即可

4.2.3 效果如下