自定义报表和仪表设计器集成，替换所有图标

Wyn为客户提供了丰富的嵌入式分析能力，可以把做好的仪表板、报表以URL、DIV的方式业务系统，更深入的集成就可以自定义报表和仪表板设计器，将全部设计能力也集成到业务系统，这时候各个业务系统可能有自己的UI风格，希望对Wyn设计器的图标进行替换，这时候就可以通过以下方式来实现。


1、修改图标配色
如果只是希望修改图标的配色，可以用Wyn提供的系统主题自定义来实现，具体方法可参考帮助文档：
https://www.grapecity.com.cn/solutions/wyn/help/docs/back-stage/system-settings/appearance/custom-theme



2、替换图标样式
如果你不仅希望替换颜色，而是替换整个图标，那么可以通过CSS覆盖的方式来实现：


覆盖报表设计器图标示例代码：

1. <font size="3"><style>
   
2. 
   
3. /* 替换元素管理的图标 */
   
4. button[data-aid="Explorer_toggle"] i,
   
5. button[data-aid="元素管理_toggle"] i{
   
6.       background-image: url(icons/元素管理.png);
   
7.       background-size: 20px 20px;
   
8.       background-repeat: no-repeat;
   
9.       background-position: center center;
   
10.     }
    
11. 
    
12. button[data-aid="Explorer_toggle"] svg,
    
13. button[data-aid="元素管理_toggle"] svg{
    
14.       display: none !important;
    
15.     }
    
16. 
    
17. 
    
18. /* 替换表格的图标 */
    
19. div[data-aid="Table"] i,
    
20. div[data-aid="表格"] i{
    
21.       background-image: url(icons/表格.png);
    
22.       background-size: 20px 20px;
    
23.       background-repeat: no-repeat;
    
24.       background-position: center center;
    
25.     }
    
26. 
    
27. div[data-aid="Table"] svg,
    
28. div[data-aid="表格"] svg{
    
29.       display: none !important;
    
30.     }
    
31. 
    
32. /* 替换元素管理的图标 */   
    
33. div[data-aid="Chart"] i,
    
34. div[data-aid="图表"] i{
    
35.       background-image: url(icons/图表.png);
    
36.       background-size: 20px 20px;
    
37.       background-repeat: no-repeat;
    
38.       background-position: center center;
    
39.     }
    
40. 
    
41. div[data-aid="Chart"] svg,
    
42. div[data-aid="图表"] svg{
    
43.       display: none !important;
    
44.     }   
    
45. </style></font>

复制代码

覆盖仪表板设计器图标示例代码：

1. <font size="3">  <style>
   
2.     .gc-toolbar #copy i{
   
3.       background-image: url(./icons/copy.png);
   
4.       background-size: 20px 20px;
   
5.       background-repeat: no-repeat;
   
6.       background-position: center center;
   
7.     }
   
8.     .gc-toolbar #copy svg{
   
9.       display: none;
   
10.     }
    
11. 
    
12.     .gc-toolbar #cut i{
    
13.       background-image: url(./icons/cut.png);
    
14.       background-size: 20px 20px;
    
15.       background-repeat: no-repeat;
    
16.       background-position: center center;
    
17.     }
    
18.     .gc-toolbar #cut svg{
    
19.       display: none;
    
20.     }
    
21. 
    
22.     .gc-toolbar #paste i{
    
23.       background-image: url(./icons/paste.png);
    
24.       background-size: 20px 20px;
    
25.       background-repeat: no-repeat;
    
26.       background-position: center center;
    
27.     }
    
28.     .gc-toolbar #paste svg{
    
29.       display: none;
    
30.     }
    
31. 
    
32.     button[data-aid="charts_toggle"] i{
    
33.       background-image: url(./icons/chart.png);
    
34.       background-size: 20px 20px;
    
35.       background-repeat: no-repeat;
    
36.       background-position: center center;
    
37.     }
    
38. 
    
39.     button[data-aid="charts_toggle"] svg{
    
40.       display: none !important;
    
41.     }
    
42. 
    
43.     button[data-aid="visual_toggle"] i{
    
44.       background-image: url(./icons/view.png);
    
45.       background-size: 20px 20px;
    
46.       background-repeat: no-repeat;
    
47.       background-position: center center;
    
48.     }
    
49. 
    
50.     button[data-aid="visual_toggle"] svg{
    
51.       display: none !important;
    
52.     }
    
53. 
    
54.     button[data-aid="gallery_toggle"] i{
    
55.       background-image: url(./icons/template.png);
    
56.       background-size: 20px 20px;
    
57.       background-repeat: no-repeat;
    
58.       background-position: center center;
    
59.     }
    
60. 
    
61.     button[data-aid="gallery_toggle"] svg{
    
62.       display: none !important;
    
63.     }
    
64. 
    
65.     button[data-aid="panel-component-tree_toggle"] i{
    
66.       background-image: url(./icons/tree.png);
    
67.       background-size: 20px 20px;
    
68.       background-repeat: no-repeat;
    
69.       background-position: center center;
    
70.     }
    
71. 
    
72.     button[data-aid="panel-component-tree_toggle"] svg{
    
73.       display: none !important;
    
74.     }
    
75. 
    
76.     button[Title="Visualization Wizard"] i,
    
77.     button[Title="智能分析"] i
    
78.     {
    
79.       background-image: url(./icons/lights.png);
    
80.       background-size: 20px 20px;
    
81.       background-repeat: no-repeat;
    
82.       background-position: center center;
    
83.     }
    
84. 
    
85.     button[Title="Visualization Wizard"] svg,
    
86.     button[Title="智能分析"] svg{
    
87.       display: none !important;
    
88.     }
    
89.   </style></font>

复制代码

更多嵌入式集成的方法和示例代码，可以从帮助文档获取，一起打造属于你自己的BI、报表产品。
https://www.grapecity.com.cn/solutions/wyn/help/docs/embedded-integration/embededintroduce