背景
门户组件可用于打造一个一站式数据工作平台，它能够使用户在访问时快速获得他想要的内容，支撑各领域的数据挖掘、数据分析、数据共享、数据查询、交互、数据图形化展示功能。在公司范围内营造自主的数据应用氛围和文化，传播数据应用价值。
场景意义
1. 流量入口、一键访问
(1) 通过首页可以快速访问数据相关的应用。
(2) 快速访问常用模块或外部网站。
2. 提供便捷的数据服务
(1) 提供自助分析、报表、外部数据查询等数据服务，能满足决策层、管理层、执行层的不同数据需求
(2) 及时了解到近期的重要通知，以及便捷查阅自己的待办已办事项。
3. 快速查阅数据全景、数据模型
(1) 可以快速查阅近期产品销售数据，总览全局。
(2) 通过指标的形式，以BI展现方式体现数据的丰富性、利用率、高价值，能集中展现宏观数据工作。
效果如下图：
定制方法
1. 总体设计
根据需求规划整个页面所展现的内容，整体布局设计如下：
总体设计详情可参考 如何规划交互式仪表盘。
设置项说明如下：
| 设置项 | 参数 | 说明 | |
|---|---|---|---|
| 自适应方式 | 宽度自适应 |
| |
| 高宽自适应 |
| ||
| 主题 | 三色渐变色 | 选择三色渐变色 | |
详情请参考自适应方式 、交互式仪表盘-主题区 。
2. 示例详解
2.1. 数据速览
| 组件类型 | 组件标题名 | 数据 | 定制方法 | 效果 |
|---|---|---|---|---|
| 图片 | 无 | 无 | 1、点击左上角 组件 > 信息 选择“图片”组件拖入画布区 2、组件设置中设置如下
|
|
| 文本 | 数据速览 | 无 | 1、点击左上角 组件 > 信息 选择“文本”组件拖入到上方的图片组件右侧 2、在文本框内输入“数据速览”，字体为微软雅黑加粗，字号为20px | |
| 饼图-环形图 | 销售量 | 【数据模型】新销售指标 ① 标记区 颜色： 维度-“指标”； 角度： 度量-“完成率” 标签： 度量-“销售量” | 1、点击左上角 组件 > 图表 > 饼图 选择 “环形图” 组件拖入画布区 2、组件设置中设置如下：
3、自定义属性 {
"series": [
{
"label": {
"show": true,
"formatter": "{b}\n{c}",
"position": "center",
"lineHeight": 30,
"emphasis": {
"show": true,
"textStyle": {
"fontSize": "16",
"fontWeight": "bold"
}
}
}
}
]
}
|
|
| 发货量 | 【数据模型】发货指标 ① 标记区 颜色： 维度-“发货指标”； 角度： 度量-“完成率” 标签： 度量-“销售量” | 组件设置中设置【标题】为“发货量”，其余配置请参考“销售量” |
| |
| 库存量 | 【数据模型】库存指标 ① 标记区 颜色： 维度-“库存指标”； 角度： 度量-“完成率” 标签： 度量-“销售量” | 组件设置中设置【标题】为“库存量”，其余配置请参考“销售量” |
| |
| 复购量 | 【数据模型】复购指标 ① 标记区 颜色： 维度-“复购指标”； 角度： 度量-“完成率” 标签： 度量-“销售量” | 组件设置中设置【标题】为“复购量”，其余配置请参考“销售量” |
| |
| Tab页签 | 无 | 无 | 1、点击左上角 组件 > 其它 选择 “Tab” 组件拖入画布区 2、组件设置中设置如下：
| 无 |
产品库存量 （旭日图） | 【数据模型】产品库存量分布 ① 行列区 列：维度-“产品类别”、维度-“产品名称” ② 标记区 角度： 度量-“库存量” | 1、点击左上角 组件 > 图表 > 高级 选择 “旭日图” 组件拖入Tab页内 2、组件设置中设置如下：
|
| |
产品销量与折扣 （双Y联合图） | 【业务主题】northwind业务主题 ① 行列区 列：产品类别表-“产品类别” 行：订单明细表-“销量”（降序排序）、订单明细表-“折扣” | 1、新增Tab页的页签，组件 > 图表 > 联合图 选择“双Y联合图”组件拖入新的Tab页签内 2、在标记区中，选中柱图，设置颜色为“#1296DB”；选中线图，设置颜色为“#20B81A” 3、组件设置中设置如下： ① 公共设置：
② 柱图： 基础：【圆角】左上 10px，右上 10px，左下 0px，右下 0px |
| |
复购客户分布 （雷达图） | 【数据模型】公司类型数量 ① 行列区 列：维度-“公司类型” 行：度量-“数量” | 1、新增Tab页的页签，组件 > 图表 > 高级 选择“棱角面积雷达图”组件拖入新的Tab页签内 2、标记区中，设置颜色为“#1296DB” 3、组件设置中设置如下：
|
| |
产品订单明细表 （表） | 【业务主题】northwind业务主题 字段：订单编号、雇员编号、顾客编号、产品名称、产品类别、销量、单价、折扣 | 新增Tab页的页签，组件 > 表格 选择 “表” 组件拖入新的Tab页签内 |
|
2.2. 通知与待办事项
| 组件类型 | 组件标题名 | 数据 | 定制方法 | 效果 |
|---|---|---|---|---|
| Tab页 | 无 | 无 | 1、点击左上角 组件 > 其它 选择 “Tab” 组件拖入画布区 2、组件设置中设置如下：
| 无 |
通知公告 （卡片列表） | 无 | 1、点击左上角 组件 > 门户 选择 “卡片列表” 组件拖入Tab页内 2、组件设置中设置如下：
|
| |
我的待办 （卡片列表） | 无 | 1、新增Tab页的页签，组件 > 门户 选择 “卡片列表” 组件拖入新的Tab页页签内 2、组件设置中设置如下：
| ||
已办 （卡片列表） | 无 | 1、新增Tab页的页签，组件 > 门户 选择 “卡片列表” 组件拖入新的Tab页页签内 2、组件设置中设置如下：
| ||
我的发起 （卡片列表） | 无 | 1、新增Tab页的页签，组件 > 门户 选择 “卡片列表” 组件拖入新的Tab页页签内 2、组件设置中设置如下：
|
详情请参考 卡片列表组件设置
2.3. 快捷入口
| 组件类型 | 组件标题名 | 定制方法 | 效果 |
|---|---|---|---|
| 图片 | 无 | 1、点击左上角 组件 > 信息 选择“图片”组件拖入画布区 2、组件设置中设置如下
|
|
| 文本 | 无 | 1、点击左上角 组件 > 信息 选择“文本”组件拖入到上方的图片组件右侧 2、在文本框内输入“快捷入口”，字体为微软雅黑加粗，字号为20px | |
便捷入口 （内部链接） | 数据准备 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】内置接口；【链接】数据准备 ；【名称】数据准备；【图标】上传图片“数据准备”；【背景】颜色，透明 |
|
| 数据挖掘 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】内置接口；【链接】数据挖掘 ；【名称】数据挖掘；【图标】上传图片“数据挖掘”；【背景】颜色，透明 |
| |
| 分析展现 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】内置接口；【链接】分析展现 ；【名称】分析展现；【图标】上传图片“分析展现”；【背景】颜色，透明 |
| |
便捷入口 （外部链接） | 中国消费者协会 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】外部链接；【链接】http://www.cca.org.cn/ ；【名称】中国消费者协会；【图标】上传图片“中国消费者协会logo”；【背景】颜色，透明； |
|
| 中国食品安全网 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】外部链接；【链接】https://www.cfsn.cn/front/web/ ；【名称】中国食品安全网；【图标】上传图片“中国食品安全网logo”；【背景】颜色，透明； |
| |
| 中国质量检验协会 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 2、组件设置中设置如下： ① 公共设置：
② 卡片设置： 便捷入口：【链接方式】外部链接；【链接】http://www.chinatt315.org.cn/；【名称】中国质量检验协会；【图标】上传图片“中国质量检验协会logo”；【背景】颜色，透明； |
|
详情请参考 便捷入口组件设置
2.4. 应用商店
| 组件类型 | 组件标题名 | 定制方法 | 效果 |
|---|---|---|---|
| 图片 | 无 | 1、点击左上角 组件 > 信息 选择“图片”组件拖入画布区 2、组件设置中设置如下
|  |
| 文本 | 无 | 1、点击左上角 组件 > 信息 选择“文本”组件拖入到上方的图片组件右侧 2、在文本框内输入“应用商店”，字体为微软雅黑加粗，字号为20px | |
| 应用商店 | 应用商店 | 1、点击左上角 组件 > 门户 选择 “便捷入口” 组件拖入画布区 3、组件设置中设置如下：
|
|
详情请参考 应用商店组件设置
2.5. 应用活跃数据统计
| 组件类型 | 组件 | 数据 | 定制方法 | 效果 |
|---|---|---|---|---|
| 图片 | 无 | 无 | 1、点击左上角 组件 > 信息 选择“图片”组件拖入画布区 2、组件设置中设置如下
|
|
| 文本 | 应用活跃数据统计 | 无 | 1、点击左上角 组件 > 信息 选择“文本”组件拖入到上方的图片组件右侧 2、在文本框内输入“应用活跃数据统计”，字体为微软雅黑加粗，字号为20px | |
| 线图 | 系统资源访问量（一周） | 【数据模型】0资源访问统计 ① 行列区 列：维度-“资源类型” 行：度量-“访问次数”（设置排序方式为降序） | 1、点击左上角 组件 > 图表 > 趋势线 选择“线图”组件拖入画布区 2、组件设置中设置如下：
|
|
| 柱图 | 不同级别的汽车销量 | 【数据模型】1热度排行榜（应用下载量Top10） ① 行列区 列：维度-“应用名称” 行：度量-“下载量”（设置排序方式为降序） | 1、点击左上角 组件 > 图表 > 柱图 选择“堆积柱图”组件拖入画布区 2、组件设置中设置如下：
|
|
| 雷达图 | 各车系销售量 | 【数据模型】5各应用评论数 ① 行列区 列：维度-“应用名称” 行：度量-“评论数量” | 1、组件 > 图表 > 高级 选择“棱角面积雷达图”组件拖入画布区 2、在标记区中设置颜色为“#067FD5” 3、组件设置中设置如下：
|
|
| 面积图 | 应用发布统计 | 【数据模型】发布者应用信息 ① 行列区 行：维度-“用户名称” 列：度量-“发布应用数量”（设置排序方式为降序） | 1、点击左上角 组件 > 图表 > 趋势线 选择“面积图”组件拖入画布区 2、组件设置中设置如下：
|
|
| 柱图-极坐标柱图 | 各部门安装应用数量 | 【数据模型】用户组安装应用情况 ① 行列区 列：维度-“部门名称” 行：度量-“安装应用的数量”（设置排序方式为升序） | 1、点击左上角 组件 > 图表 > 柱图 选择“极坐标柱图”组件拖入画布区 2、组件设置中设置如下：
|
|
| 树图 | 各应用收藏统计 | 【数据模型】应用收藏情况 ① 标记区 颜色： 维度-“应用名称”； 大小： 度量-“收藏量” 标签： 度量-“应用别名” | 1、组件 > 图表 > 高级 选择 “树图” 组件拖入画布区 2、组件设置中设置如下：
|
|
详情请参考 柱图、雷达图、旭日图、 面积图、极坐标柱图/极坐标堆积柱图、树图。
3. 界面美化
3.1. 添加空白组件
通过添加空白组件到组件之间实现隔开组件的效果
3.2. 修改图层布局
- 在图层区内可以设置“布局设置”
- 根据实际需求自由修改该布局组件的边距、间距等属性
3.3. 通过宏管理自定义效果
示例：去除“便捷入口”组件两侧的箭头按钮
进入该仪表盘的宏管理界面，新建宏，对象为“仪表盘”，事件为“onRender(每次渲染完毕后)”
复制以下代码到代码编辑区，保存退出
function main(page: IPage) {
// 获取“快捷入口”组件两旁的箭头按钮
let dom1 = document.getElementsByClassName("entry-object__arrow entry-object__pre movable slide-btn-panel");
let dom2 = document.getElementsByClassName("entry-object__arrow entry-object__next movable slide-btn-panel");
//删除dom节点
for (let i = dom1.length - 1; i >= 0; i--){
dom1[i].parentNode.removeChild(dom1[i]);
dom2[i].parentNode.removeChild(dom2[i]);
}
}
资源下载
| 名称 | 下载 |
|---|---|
| 报表资源 | |
| 图片资源 |
