創意交融：集成自定義報表和儀表盤設計器，實現圖標替換

前言

在現代數據分析領域，隨着對報表和數據分析的需求不斷增長，市場上湧現了許多嵌入式報表工具。這些工具能夠與企業現有的OA、ERP、MES、CRM等應用系統深度集成，實現對業務數據的自助式分析。然而，在實際應用中，不同的系統往往具有獨特的界面模式和風格，這就要求嵌入式報表插件的UI界面需要與系統本身的UI風格相匹配。因此，在本文中，小編將以葡萄城公司的嵌入式BI工具——Wyn商業智能軟件爲例，介紹如何自定義嵌入式BI工具的UI界面，以滿足系統的個性化需求。

環境準備

下載安裝Wyn商業智能軟件

安裝指導：Wyn商業智能設計器

1.自定義系統主題

（1）創建系統自定義主題

第一步打開系統主題設計器：

第二步選擇主題，可選擇爲淺色或者深色，用於系統中需要變深/變淺的場景。選擇深色時，使用時會變淺；反之則會變深。

第三步設計系統配色，可以直接輸入顏色值的代碼，也可以單擊色塊選擇顏色，單擊上方的菜單可以切換至不同的設計器或門戶，查看效果。

如果想要重置顏色，點擊“重置”即可。

第四步，設計完成後，點擊保存，就可以將我們設計的主題進行保存。

第五步創建完成後可在主題列表中看到自定義主題，並且可以管理主題。如編輯，更新主題，下載配置文件，下載主題壓縮包，刪除等。

（2）使用系統自定義主題

在系統後臺中打開系統外觀界面。然後在門戶外觀設置下面找到系統主題，單擊下拉箭頭，選擇自定義系統主題，並保存設置。

2.替換圖標

在第一節中（自定義系統主題），小編介紹瞭如何修改系統主題中的圖標配色，接下來小編將爲大家介紹如何去替換整個圖標。

在項目開發中，可以通過替換CSS代碼文件的方式替換報表設計器中的圖標：

<font size="3"><style>

/* 替換元素管理的圖標 */
button[data-aid="Explorer_toggle"] i,
button[data-aid="元素管理_toggle"] i{
      background-image: url(icons/元素管理.png);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: center center;
    }

button[data-aid="Explorer_toggle"] svg,
button[data-aid="元素管理_toggle"] svg{
      display: none !important;
    }


/* 替換表格的圖標 */
div[data-aid="Table"] i,
div[data-aid="表格"] i{
      background-image: url(icons/表格.png);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: center center;
    }

div[data-aid="Table"] svg,
div[data-aid="表格"] svg{
      display: none !important;
    }

/* 替換元素管理的圖標 */    
div[data-aid="Chart"] i,
div[data-aid="圖表"] i{
      background-image: url(icons/圖表.png);
      background-size: 20px 20px;
      background-repeat: no-repeat;
      background-position: center center;
    }

div[data-aid="Chart"] svg,
div[data-aid="圖表"] svg{
      display: none !important;
    }    
</style></font>

實現效果如下所示：