登录/注册

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容

297 主题	7872 帖子	1万积分

Rank: 8 Rank: 8

积分: 13111

54030
金币
297
主题
7872
帖子

最新发帖

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

讲师达人认证

悬赏达人认证

超级版主 / 发表于：2023-12-20 16:26 / 查看：655 / 回复：0

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

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

image.png226169737.png

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>

复制代码

image.png829269714.png

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

复制代码

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

收藏

回复

0 个回复