# 图表配置
图表配置的设立主要是为了便于进行自定义的简单配置，相较于自定义js的配置方式，虽可配置局限性较大，但使用简单便捷，即填即用
图表配置主要注重系统中代码编辑器编写内容，只需配置相关json内容即可
该配置主要由一个大对象包裹，对象里可编写对应配置信息
图表配置有两种情况：块信息图表配置和内容信息图表配置，两者配置的表单位置并不相同
# 块信息图表配置
目前系统可配置属性属于块信息图表配置范畴主要有以下：块、多图片、块搜索条件
该范畴内属性配置均可在对应块的内容设置-块信息表单-块图表配置中配置
该范畴内属性均可参照以下步骤快速上手，尝试使用：
实践是检验真理的唯一标准
- 1.阅读示例流程
- 2.阅读示例json，复制代码使用
- 3.查看示例效果
# 块
目前系统中，面板块的可配置属性主要有color（色系），titleStyle（标题样式），titleIconStyle（标题图标样式）
简单来说，可以通过上述配置属性影响块，以达到指定效果
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至块图表配置的代码编辑器
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
color: 数组，配置块的色系
titleStyle: 对象，标题样式
textAlign
lineHeight
color
...
titleIconStyle: 对象，标题图标样式
float
...
*/
---------------以下json可复制至代码编辑器使用---------------
{
"color": [
"green",
"blue",
"yellow",
"red"
],
"titleStyle": {
"textAlign": "right",
"lineHeight": "initial",
"color": "red"
},
"titleIconStyle": {
"float": "right"
}
}
# 示例效果
上图则为示例效果，效果符合预期json数据进行的配置。当然，图中效果不仅配置块图表，还配置了内容图表的快捷菜单，详情可查阅
# 多图片
imgInfo属性主要是配置多图片相关内容的，它是一个对象，包裹着图片的具体配置内容
简单来说，在系统中想要配置图片内容，决定怎样渲染多图片等，可以关注一下imgInfo属性
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至块图表配置的代码编辑器
direction和wrap都仅对平铺模式（并列模式）下起作用，在系统中注意调整展示类型
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
imgInfo:
direction: 字符串，图片的展示方向，可选值"horizon"，"vertical"，默认"horizon"(横向)
wrap: 布尔，图片是否换行，可选值true，false，默认false
width: 字符串，图片的宽度
height: 字符串，图片的高度
*/
---------------以下json可复制至代码编辑器使用---------------
{
"imgInfo": {
"direction": "horizon",
"wrap": true,
"width": "80%",
"height": "80%"
}
}
# 示例效果
上图则为示例效果，本示例配置时需注意展示形式，其余直接拷贝示例json即可
# 块搜索条件
块搜索条件使用方法和属性参数等与内容搜索条件完全一致，故可详阅内容搜索条件
# 内容信息图表配置
目前系统可配置属性属于内容信息图表配置范畴主要有以下：快捷菜单、总数卡片、文本、内容搜索条件
该范畴内属性配置均可在对应块的内容设置-内容信息表单-图表配置中配置
该范畴内属性均可参照以下步骤快速上手，尝试使用：
实践是检验真理的唯一标准
- 1.阅读示例流程
- 2.阅读示例json，复制代码使用
- 3.查看示例效果
# 快捷菜单
快捷菜单的配置主要依赖menuInfo属性，它以对象包裹的形式，包裹着菜单的具体配置内容
简单来说，系统中想要快速创建菜单内容，可以关注一下menuInfo属性的使用
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至内容图表配置的代码编辑器
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
menuInfo:
colorList: 数组，菜单色系相关内容
direction: 菜单内容项的排列方向，可选值"horizon"，"vertical"，默认"horizon"(横向)
data: 对象数组，菜单内容
(obj): 每项菜单具体信息
icon: 字符串，菜单图标名称
url: 字符串，菜单图标路径
text: 字符串，菜单文本
*/
---------------以下json可复制至代码编辑器使用---------------
{
"menuInfo": {
"colorList": [
"red",
"bllue"
],
"direction": "vertical",
"data": [
{
"icon": "transfer-fill",
"url": "/module/stander/list/myRecWlItem/placeholder",
"text": "我的待办"
}
]
}
}
# 示例效果
上图则为示例效果，不难看出图中渲染的菜单项对应为示例json数据，至此，我们可以清楚知道在图表配置中如何发挥menuInfo属性的作用
# 总数卡片
cardInfo属性主要是配置卡片相关信息的，它是一个对象，包裹着总数卡片的具体配置内容
简单来说，系统中想要渲染一些统计或记录信息内容的卡片，可以关注一下这个属性
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至内容图表配置的代码编辑器
componentPath可视情况增减，本示例无使用需移除
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
cardInfo:
componentPath: 字符串，自定义渲染组件路径，若无需自定义可移除该属性
width: 字符串，每项总数卡片的宽度
height: 字符串，每项总数卡片的高度
list: 对象数组，总数卡片渲染信息
(obj): 每项总数卡片具体信息
icon: 字符串，图标名称
dataKey: 字符串，数据类型
text: 字符串，文本内容
url: 字符串，图标路径
value: 数值，可展示于右方
iconStyle: 对象，图标部分样式
fontSize
color
...
rightStyle: 对象，右边部分样式
fontSize
color
...
*/
---------------以下json可复制至代码编辑器使用---------------
{
"cardInfo": {
"componentPath": "/test/Test.vue",
"width": "50%",
"height": "150px",
"list": [
{
"icon": "iconLibrary-fill",
"dataKey": "icon",
"text": "图标库",
"url": "/default/iconTool/Base",
"value": 55,
"iconStyle": {
"fontSize": "20px",
"color": "#f1594c"
},
"rightStyle": {
"fontSize": "28px",
"color": "#f1594c"
}
},
{
"icon": "home-fill",
"dataKey": "home",
"text": "首页",
"url": "/admin/overview",
"value": 24
},
{
"icon": "home-fill",
"dataKey": "home",
"text": "首页",
"url": "/admin/overview",
"value": 24
},
{
"icon": "home-fill",
"dataKey": "home",
"text": "首页",
"url": "/admin/overview",
"value": 24
},
{
"icon": "home-fill",
"dataKey": "home",
"text": "首页",
"url": "/admin/overview",
"value": 24
}
]
}
}
# 示例效果
上图则为示例效果，cardInfo属性相较于其他图表配置属性有特殊之处，因其内部还可配置componentPath，故它有很强自定义性，但本示例中无使用自定义，所以需在配置中移除它，否则会影响到cardInfo属性整体配置渲染，详情可查阅总数卡片示例流程
# 文本
textInfo属性主要是配置文本内容信息的，它是一个对象，目前内部可配置包含有text，style以及click
简单来说，在系统中无论你单纯只是想渲染一些文本，又或者想把这些文本当成提示语，然后进一步做一些点击事件操作，textInfo属性都能满足你的需求
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至内容图表配置的代码编辑器
配置需刷新的指定块或内容，注意本示例同一面板下，有存在编码为test的块，故为block_test，若模仿示例则需在同一面板下新增编码为test的块
配置需搜索的指定块或内容，注意本示例同一面板下，有存在编码为chart-test的块，故为block_chart-test，若模仿示例则需在同一面板下新增编码为chart-test的块
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
textInfo:
text: 字符串，文本内容
style: 对象，文本样式
fontSize
color
textAlign
...
click: 对象，处理文本点击事件
refresh: 数组，配置需刷新的指定块或内容
search: 对象，处理搜索相关内容
list: 数组，配置需搜索的指定块或内容
params: 对象，搜索所携带的参数
year: 字符串，自定义参数
...
*/
---------------以下json可复制至代码编辑器使用---------------
{
"textInfo": {
"text": "测试文本类型报表",
"style": {
"fontSize": "20px",
"color": "red",
"textAlign": "center"
},
"click": {
"refresh": [
"block_test"
],
"search": {
"list": ["block_chart-test"],
"params": {
"year": "2019"
}
}
}
}
}
# 示例效果
点击触发刷新事件
点击触发搜索事件
上方两图则为示例效果，textInfo属性的普通文本配置较为简单，可能点击事件的配置会有些注意点，需严格按照要求配置，否则可能出现不生效的情况，不过无需担心，文本的示例流程有详尽介绍流程和注意点，注意步骤细节配置使用还是很轻松的
# 内容搜索条件
filterList属性主要是配置搜索条件相关内容的，它是一个对象数组，所以可以配置多个搜索条件
简单来说，在系统中想要增加搜索内容，可以关注一下filterList属性，特别是多处面板块增加同一搜索条件，它的便捷作用极大
# 示例流程
- 新增或编辑需配置的块
- 拷贝示例json至内容图表配置的代码编辑器
# 示例json
/*
(obj): 以下内容该标志均代表一个对象
filterList:
(obj): 对象，每块的搜索项配置
filterType: 字符串，搜索类型，名称需对应代码层组件命名
id
name
vaule
defaultValue
options: 数组，搜索项的数组值
(obj): 对象，每项的详细信息
id
text
*/
---------------以下json可复制至代码编辑器使用---------------
{
"filterList": [
{
"filterType": "tag",
"id": "year",
"name": "年份",
"vaule": "",
"defaultValue": "",
"options": [
{
"id": "2020",
"text ": "2020 年"
},
{
"id": "2021",
"text": "2021 年"
},
{
"id": "2022",
"text": "2022 年"
}
]
}
]
}
# 示例效果
上图则为示例效果，图中不难看出本示例是关于年份的tag项搜索，tag项的数据可以通过配置产生，有兴趣深入了解可到搜索条件处有详细解析，可寻找对应源码阅读
搜索条件 →