FastBI自定义模板使用手册
自定义模板简介
自定义模板的作用是在小智BI设计器中方便用户在多次使用同一类型的报表时不需要多次进行逐个控件的添加与编辑控件属性。您可以根据自己的需求自己实现一个模板，并将其引入到我们的环境中。实现自定义模板主要需要完成以下几个部分。
a. 模板数据
b. 模板图片
c. 模板文件夹
d. 模板配置信息
e. 模板的嵌入与使用
1.模板 数据
首先我们创建一个以index为名称Json文件，用来存放模板数据。数据可以利用小智BI设计器的保存事件（getSaveData）获取。模板数据包含config字段、data字段。config字段对应的是保存事件获取数据中的config字段、data字段对应的是保存事件获取数据中的data字段。
{
"config":{
"child": [
{
"id": "729bfddf-3189-4025-9fcb-97dfed20afbf",
"type": "standardBar",
"option": {
"chartConfig": {
"chartBasic": {
"grid__top": 35,
"grid__bottom": 35,
"grid__left": 35,
"grid__right": 35
},
"xAxis": {
"axisLine__show": true,
"axisLine__lineStyle__width": 1,
"axisLine__lineStyle__color": "rgba(0, 0, 0, 1)",
"axisTick__show": true,
"axisTick__length": 5,
"axisTick__lineStyle__width": 1,
"axisTick__lineStyle__color": "rgba(0, 0, 0, 1)",
"axisLabel__show": true,
"axisLabel__rotate": 0,
"axisLabel__interval": 0,
"axisLabel__margin": 10,
"axisLabel__textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(96, 98, 102, 1)"
},
"splitLine__show": false,
"splitLine__lineStyle__width": 1,
"splitLine__lineStyle__color": "rgba(80, 80, 80, 1)"
},
"yAxis": {
"FormatObj__dataFormat__rateValue": -1,
"FormatObj__dataFormat__decimalValue": 0,
"axisLine__show": false,
"axisLine__lineStyle__width": 1,
"axisLine__lineStyle__color": "rgba(0, 0, 0, 1)",
"axisTick__show": true,
"axisTick__length": 5,
"axisTick__lineStyle__width": 1,
"axisTick__lineStyle__color": "rgba(0, 0, 0, 1)",
"splitNumber": 0,
"axisLabel__show": true,
"axisLabel__rotate": 0,
"axisLabel__textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(96, 98, 102, 1)"
},
"splitLine__show": false,
"splitLine__lineStyle__width": 1,
"splitLine__lineStyle__color": "rgba(80, 80, 80, 1)",
"useYAxisMinMax": false,
"yAxisMin": 0,
"yAxisMax": 100
},
"customSeries": {
"show": false,
"labelFormatter": "默认",
"position": "top",
"align": "center",
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(155, 155, 155, 1)"
},
"rotate": 0,
"distance": 0
},
"tooltip": {
"showContent": true,
"formatterContent": "默认",
"backgroundColor": "rgba(0, 0, 0, 1)",
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(155, 155, 155, 1)"
}
},
"barStyle": {
"showBackground": false,
"backgroundColor": "rgba(180, 180, 180, 0.2)",
"barBorRadius": 0,
"barWidth": "50%"
},
"customColor": {
"show": true,
"newColor": {
"type": "自定义",
"colorScale": true,
"colorGroup": [
"#D0E9FF",
"#73A8FF",
"#0061B0",
"#002080"
],
"customColor": {
"scaleNum": 3,
"list": [
{
"label": "最小值",
"value": 0,
"color": "#D0E9FF",
"isUse": true
},
{
"label": "中间",
"value": 100,
"color": "#D0E9FF",
"isUse": true
},
{
"label": "最大值",
"value": 5000,
"color": "#D0E9FF",
"isUse": true
}
]
},
"rationColor": {
"list": [
{
"label": "开始",
"value": 1000,
"color": "#D0E9FF",
"isUse": true
},
{
"label": "开始",
"value": 1500,
"color": "#D0E9FF",
"isUse": true
},
{
"label": "开始",
"value": 2000,
"color": "#D0E9FF",
"isUse": true
},
{
"label": "开始",
"value": 2500,
"color": "#D0E9FF",
"isUse": true
}
]
}
}
},
"legend": {
"show": true,
"orient": "horizontal",
"OffsetStartX": "left",
"OffsetStartY": "top",
"leftDistance": 0,
"topDistance": 0,
"selectedMode": "multiple",
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(155, 155, 155, 1)"
},
"itemWidth": 28,
"itemHeight": 14
},
"markLineEvent": {
"markLine": []
}
},
"dataConfig": {
"data_name": "数据集",
"indexs": [
{
"name": "a",
"sort": 0,
"format": {
"showData": 1,
"quantile": 0,
"multiplying": 0,
"decimal": 5,
"date": "yyyy-MM-dd",
"removePrefix": "",
"removeSuffix": "",
"addPrefix": "",
"addSuffix": "",
"location": -1,
"replaceNull": {
"type": 0,
"value": ""
},
"newName": "",
"region": "none",
"valueType": 1,
"scaleType": 1,
"selectorFormat": {
"show": 1,
"allShow": 0,
"allName": "全部"
}
},
"type": "2",
"noSuchField": false
}
],
"columns": [
{
"name": "b",
"sort": 0,
"format": {
"showData": 1,
"quantile": 0,
"multiplying": 0,
"decimal": 5,
"date": "yyyy-MM-dd",
"removePrefix": "",
"removeSuffix": "",
"addPrefix": "",
"addSuffix": "",
"location": -1,
"replaceNull": {
"type": 0,
"value": ""
},
"newName": "",
"region": "none",
"valueType": 1,
"scaleType": 1,
"selectorFormat": {
"show": 1,
"allShow": 0,
"allName": "全部"
}
},
"aggregate": 1,
"type": "2",
"noSuchField": false,
"uuid": "cce402ba-e49e-4541-be7e-8d037b423a84"
}
],
"selectors": [],
"filters": [],
"tooltips": [],
"type": 4,
"data_id": "qe312fr4f1"
},
"eventConfig": {
"responseEvent": {
"linkage_open": true,
"linkage_errorType": 1,
"linkage_promptText": "无此联动值"
},
"clickEvent": {
"events": []
},
"toolbarEvent": {
"toolbar": []
}
},
"dynamicConfig": {
"marquee": {
"open": false,
"interval": 1000,
"triggerLinkage": false
},
"refresh": {
"open": false,
"type": 1,
"time": [
0
],
"interval": "10"
}
},
"generalConfig": {
"base": {
"backgroundColor": "#00000000",
"background": {
"show": false,
"value": ""
},
"backgroundImage": "",
"backgroundSize": 1,
"borderRadius": "0px",
"customRadius": {
"enable": {
"topLeft": 0,
"topRight": 0,
"bottomRight": 0,
"bottomLeft": 0
},
"useVal": true
},
"boxShadow": false,
"boxShadowColor": "#fff",
"boxShadowLevel": "0px",
"boxShadowVertical": "0px",
"boxShadowLength": "2px",
"boxShadowBlur": "5px",
"borderWidth": "0px",
"borderColor": "#eee",
"padding": "0px"
},
"title": {
"show": true,
"height": "30px",
"backgroundColor": "rgba(0, 0, 0, 0)",
"background": {
"show": false,
"value": ""
},
"backgroundImage": "",
"backgroundStyle": 1,
"content": "标准柱状图",
"hyperlink": "",
"titleTextStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"textDecoration": "none",
"color": "#000000"
},
"textAlign": "center"
},
"select": {
"show": true,
"height": "30px",
"backgroundColor": "rgba(0, 0, 0, 0)",
"background": {
"show": false,
"value": ""
},
"backgroundImage": "",
"backgroundStyle": 1,
"borderWidth": "1px",
"borderColor": "#eee",
"selectorTextStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontWeight": "normal",
"fontStyle": "normal",
"color": "rgba(96, 98, 102, 1)"
},
"method": 1,
"proportion": "",
"absolute": "",
"spacing": "0px"
}
}
}
}
],
"layout": {
"report": {
"width": "1920px",
"height": "1080px",
"padding": "0px",
"single_height": "1080px",
"backgroundColor": "#fff",
"backgroundImage": "",
"backgroundSize": 1
},
"729bfddf-3189-4025-9fcb-97dfed20afbf": {
"width": "960px",
"height": "540px",
"zIndex": "99",
"transform": "translate(0px, 0px)",
"display": ""
}
},
"controlLayer": [
{
"id": "729bfddf-3189-4025-9fcb-97dfed20afbf",
"type": "standardBar",
"name": "标准柱状图",
"img_url": "bar.png",
"zIndex": 99,
"c_type": 1,
"cType": "",
"chartShow": true,
"chartLock": false,
"random": "442050"
}
],
"toolbarConfig": {
"toolbar": {
"color": "#f2f4f7",
"refresh__open": false,
"refresh__name": "刷新",
"refresh__icon": {
"open": true,
"icon": "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"#53597B\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_33_3341)\">\n <path d=\"M12.6377 10.813H12.6388V10.8066L12.6377 10.813Z\"></path>\n <path d=\"M13.4106 6.43335C13.2467 6.26574 12.9583 6.26436 12.792 6.42763L12.505 6.7098C12.353 3.48385 9.73188 0.972412 6.49075 0.972412C3.16721 0.972412 0.463379 3.67624 0.463379 6.9998C0.463379 10.3236 3.16721 13.0274 6.49075 13.0274C8.26192 13.0274 9.93808 12.2435 11.0833 10.8843C11.1343 10.8453 11.1756 10.7984 11.2069 10.7456C11.211 10.7405 11.2156 10.7355 11.2202 10.7309L11.2496 10.684L11.2399 10.679C11.2597 10.6271 11.2689 10.5771 11.2689 10.5256C11.2689 10.2744 11.065 10.0701 10.8138 10.0701C10.6627 10.0701 10.5213 10.1504 10.4391 10.2809C9.45771 11.4597 8.01858 12.1361 6.49076 12.1361C3.65881 12.1361 1.35402 9.83221 1.35402 6.9998C1.35402 4.16805 3.65881 1.8635 6.49076 1.8635C9.30436 1.8635 11.5967 4.13708 11.6266 6.94355L11.1155 6.43084C10.9506 6.26484 10.6618 6.26438 10.4969 6.42948C10.3252 6.60031 10.3252 6.87812 10.496 7.04917L11.5751 8.13084C11.6574 8.21397 11.7676 8.25942 11.8842 8.25942L11.8892 8.25898L11.9007 8.26265C11.9255 8.2686 11.9526 8.27596 11.9825 8.27596C12.0977 8.27596 12.2066 8.23143 12.2892 8.1506L13.4056 7.05216C13.4891 6.97019 13.536 6.85973 13.5369 6.74266C13.5378 6.626 13.4928 6.51646 13.4106 6.43335Z\"></path>\n </g>\n <defs>\n <clipPath id=\"clip0_33_3341\">\n <rect width=\"14\" height=\"14\" fill=\"white\"></rect>\n </clipPath>\n </defs>\n </svg>",
"color": "#409eff",
"type": 1
},
"full__open": false,
"full__name": "全屏",
"full__icon": {
"open": true,
"icon": "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"#53597B\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_33_3344)\">\n <mask id=\"mask0_33_3344\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"14\" height=\"14\">\n <path d=\"M14 0H0V14H14V0Z\" fill=\"white\"></path>\n </mask>\n <g mask=\"url(#mask0_33_3344)\">\n <path d=\"M6.70834 1.74988H2.33333C2.01117 1.74988 1.75 2.01104 1.75 2.33321V11.6667C1.75 11.9888 2.01117 12.25 2.33333 12.25H11.6667C11.9888 12.25 12.25 11.9888 12.25 11.6666V7.29163\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M7 4.66663V6.99996\" stroke-width=\"0.8\" stroke-linecap=\"round\"></path>\n <path d=\"M12.25 1.74988V4.08321\" stroke-width=\"0.8\" stroke-linecap=\"round\"></path>\n <path d=\"M9.33333 7H7\" stroke-width=\"0.8\" stroke-linecap=\"round\"></path>\n <path d=\"M12.25 1.74988L7 6.99987\" stroke-width=\"0.8\"></path>\n <path d=\"M12.2498 1.74988H9.9165\" stroke-width=\"0.8\" stroke-linecap=\"round\"></path>\n </g>\n </g>\n <defs>\n <clipPath id=\"clip0_33_3344\">\n <rect width=\"14\" height=\"14\" fill=\"white\"></rect>\n </clipPath>\n </defs>\n </svg>",
"color": "#409eff",
"type": 1
},
"print__open": false,
"print__name": "打印",
"print__icon": {
"open": true,
"icon": "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" stroke=\"#53597B\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 9.625V12.25C11.6667 12.5722 11.4055 12.8333 11.0833 12.8333H9.1875\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M11.6668 4.66663V1.74996C11.6668 1.42779 11.4057 1.16663 11.0835 1.16663H2.91683C2.59466 1.16663 2.3335 1.42779 2.3335 1.74996V12.25C2.3335 12.5721 2.59466 12.8333 2.91683 12.8333H4.66683\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M4.6665 4.66663H8.74984\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M6.7085 12.8334L11.6668 6.70837\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M4.6665 7H6.99984\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>",
"color": "#409eff",
"type": 1
},
"download__open": false,
"download__name": "导出",
"download__icon": {
"open": true,
"icon": "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" stroke=\"#53597B\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.4585 2.33333C1.4585 2.01117 1.71966 1.75 2.04183 1.75H5.54183L7.00016 3.5H11.9585C12.2807 3.5 12.5418 3.76116 12.5418 4.08333V11.6667C12.5418 11.9888 12.2807 12.25 11.9585 12.25H2.04183C1.71966 12.25 1.4585 11.9888 1.4585 11.6667V2.33333Z\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M8.75 8.16663L6.99805 9.91663L5.25 8.17053\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path d=\"M7 5.83337V9.91671\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>",
"color": "#409eff",
"type": 1
},
"custom": true,
"customButton": []
}
},
"paramsConfig": {
"panelStyles": {
"isOpen": false,
"defaultOpen": false,
"buttonName": "查询",
"color": "#fff",
"bgColor": "#4E89FB"
},
"paramsManagement": {
"paramsConfig": []
}
}
},
"data":{
"dataConfig": [
{
"name": "数据集",
"id": "qe312fr4f1",
"type": 1,
"response_data": [],
"fields": [
{
"name": "a",
"data_type": 2
},
{
"name": "b",
"data_type": 2
}
],
"params": []
}
]
}
}
2.模板图片
模板图片用于模板列表中显示。模板图片可以在小智BI展示端进行截图或者选择合适的图片。将该图片名称设置为icon.png。
Preview
3.模板文件夹
创建一个唯一名称的模板文件夹，该文件中包含上述模板数据的index.json文件以及模板图片的icon.png。下面列个例子。
Preview
4.模板配置信息
创建一个以config为名称Json文件，用来存放模板的相关数据。例如：
{
"config":[
{
"text": "智能工厂质量看板", //模板名称
"folder":"1",// 模板文件名称 同于上述创建的模板文件夹
"scenario": "会议大屏", // 模板场景类型名
"theme": "未来科技", // 模板风格类型名
"data": null
}
]
}
5.模板的嵌入与使用
创建一个名为customTemplates的文件夹，将上述的config.json文件与模板文件夹放在其中。到此模板的相关配置准备成功。例如：
Preview
5.1模板的嵌入
模板定义好后，我们需要引入到FastBI，才能在BI中使用它们。
将上述整理好的customTemplates文件夹放在FastBI项目路径FBI->media中。
5.2模板的使用
在小智BI设计器中，左侧菜单栏中有模板标签。在打开模板栏时，会出现类似的内容。根据以上内容会有一个模板。该列表中的模板支持预览与直接使用。
在数据分析的BI分析模块创建仪表盘类型为即席分析的报表。在该报表设计器中可显示以下内容。
Preview
点击左侧的（模板）导航按钮 -> 展开页中显示模板。
Preview