图表

1. 业务场景

进入数据可视化后,默认处于图表列表页面,点击报表/数据大屏图标则可切换至对应列表;支持从模型获取数据后,过滤数据后创建可视化图表,维护的图表信息可以被报表、数据大屏、以及业务系统引用。

2. 操作流程

1)进入数据可视化,进入图表tab,维护分组信息;

2)在二级分组名称后点击“+”【添加图表】,对图表进行编辑设计;

3)创建完成后可以【编辑】图表;

4)图表完善后,可以点击【发布】图表,则图表此时可以被引用;

5)如果图表有更新,则可以点击【更新发布】,使业务系统引用对图表变为最新的图表信息;

6)如果图表数据不再可以公开使用,则需要通过【隐藏】功能将图表的引用权限收起,此时报表、数据大屏、前端业务系统均不可再引用该图表,但不影响已被引用的图表;

7)隐藏后可以【取消隐藏】,图表恢复隐藏前的状态和功能,可以被引用。

3. 操作流程图解

3.1 创建分组

1)操作流程:创建分组

2)操作路径:数据可视化-图表-创建分组

3)点击搜索框后的「+」创建一级分组,输入一级分组名称后,点击一级分组后的「+」创建二级分组,输入二级分组名称后,此时分组创建完成,可以在二级分组下创建图表

image.png

3.2 编辑分组名称

1)操作流程:选择分组-编辑分组名称

2)操作路径:数据可视化-图表-编辑分组名称

3)鼠标移动至需要修改的分组上,点击出现的「编辑图标」,可以修改分组名称,修改后分组名称实时更新

image.png

3.3 删除分组

1)操作流程:选择分组-删除分组

2)操作路径:数据可视化-图表-删除分组

3)鼠标移动至需要删除的分组上,当分组下无图表时出现「删除图标」,可以点击图标后删除分组,删除一级分组时对应所有的二级分组也会被删除,删除后消失,只有分组下没有图表的分组才能直接删除成功

image.png

3.4 创建图表

1)操作流程:选择二级分组-创建图表

2)操作路径:数据可视化-图表-二级分组-创建图表

3)鼠标移动至需要创建图表的二级分组上,出现「+」,点击图标后弹出“创建图表”弹窗,需要填写图表标题、模型、方法;

a图表标题:最大支持20个字,支持汉字、数字、大小写字母、-;同个一级分组下不允许重复;

b模型:需要选择来源数据对应的模型;

c方法:选择模型后需要选择方法,方法是用来提取模型数据的逻辑;

4)选择成功后进入图表设计页面

image.png

3.5 编辑图表

1)操作流程:选择图表-编辑图表

2)操作路径:数据可视化-图表-二级分组-图表-编辑图表

3)只能编辑未发布或者已发布但没有被隐藏的图表,且存在三种编辑情况

a第一种:点击图表标题后的编辑图标,仅能编辑图表标题;

b第二种:点击图表中的图表标题、图表副标题、图表描述后的编辑图标,可以直接编辑图表标题、图表副标题、图表描述;

c第三种:点击【编辑】按钮,进入图表设计页面,带出已有的数据字段、样式、图表内容,编辑时的规则与创建时一致,编辑后可以点击保存进行更新,如果未保存直接返回,则编辑无效;

4)编辑后实时生效,图表信息保持展示最新效果

3.6 删除图表

1)操作流程:选择图表-删除图表

2)操作路径:数据可视化-图表-二级分组-图表-删除图表

3)未发布或者已发布但没有被隐藏的图表,并且没被前端或者报表引用,才展示图表菜单名称后的删除图标

4)删除后图表消失

3.7 复制

1)操作流程:选择图表-复制图表

2)操作路径:数据可视化-图表-二级分组-图表-复制图表

3)点击【复制】按钮,复制成功,名称为copy of 原图表标题,展示在原图表分组的最后一个

image.png

3.8 发布

1)操作流程:选择图表-发布图表

2)操作路径:数据可视化-图表-二级分组-图表-发布

3)选择单个未发布且没有被隐藏的图表,点击【发布】按钮,图表发布后可以被前端引用,图表状态变为已发布,展示最近发布时间;

4)如果图表发布后有更新内容,会展示的更新类型:更新图表信息/更新图表内容

3.9 查看最近一次发布的版本

1)操作流程:选择图表-查看最近一次发布的版本

2)操作路径:数据可视化-图表-二级分组-图表-查看最近一次发布的版本

3)当图表发布后有更新,在最近发布时间左侧展示【查看】,在最近发布时间下展示更新的类型,点击查看可以查看最近发布的版本image.png

3.10 更新发布

1)操作流程:选择图表-更新发布图表

2)操作路径:数据可视化-图表-二级分组-图表-更新发布图表

3)选择单个已发布且没有被隐藏的图表,并且该图表在上次发布后有所更新,可以点击【更新发布】按钮,将最新的图表内容发布至业务系统,业务系统引用的图表为最新内容;

4)如果更新了内容,但未点击更新发布,则前端业务系统查看的图表仍为最近发布的图表

3.11 隐藏

1)操作流程:选择图表-隐藏图表

2)操作路径:数据可视化-图表-二级分组-图表-隐藏图表

3)图表默认不隐藏,点击图表左侧的是否隐藏可以切换,切换是否隐藏=是

a未发布的图表,较隐藏前,不可以操作【发布】,可以【取消隐藏】;

b已发布的图表,较隐藏前,只能操作【导出图片、导出excel、取消隐藏】;

4)隐藏后的图表不可以被引用,但不影响已经被引用的数据

3.12 取消隐藏

1)操作流程:选择图表-取消隐藏图表

2)操作路径:数据可视化-图表-二级分组-图表-取消隐藏图表

3)隐藏后的图表可以取消隐藏,切换是否隐藏=否,取消隐藏后,图表恢复隐藏前的状态和功能,可以被引用

3.13 查看引用

1)流程:选择图表-查看被哪些报表/数据大屏/页面引用

2)操作路径:数据可视化-图表-二级分组-图表-更多-查看引用

3)选择具体的图表,查看当前图表被引用的所有信息

image.png

3.14 不允许别人编辑

1)流程:选择图表-不允许别人编辑

2)操作路径:数据可视化-图表-二级分组-图表-更多-不允许别人编辑

3)选择自己创建的图表,对图表是否允许其他人编辑进行设置;如果设置为不允许,则其他人无法编辑图表

image.png

3.15 不允许别人引用

1)流程:选择图表-更多-不允许别人引用

2)操作路径:数据可视化-图表-二级分组-图表-更多-不允许别人引用

3)选择自己创建的图表,对图表是否允许他人引用进行设置;如果设置为不允许,则其他人无法在报表、数据大屏、界面设计器引用到该图表

image.png

3.16 导出图片

1)操作流程:选择图表-导出图片

2)操作路径:数据可视化-图表-二级分组-图表-图表导出图片

3)选择图表后,点击【导出图片】按钮可以将当前图表导出为图片

3.17 导出EXCEL

1)操作流程:选择图表-导出EXCEL

2)操作路径:数据可视化-图表-二级分组-图表-图表导出EXCEL

3)选择图表后,点击【导出EXCEL】按钮可以将当前图表导出为EXCEL

4. 图表设计页面

4.1 修改模型、方法

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)在“创建图表”弹窗中选择了模型和方法后,可以在进入图表设计页面修改

4)图表设计页面,点击模型后的设置图标后,右侧弹出弹窗,可以修改模型和获取模型数据的方法,需要注意的是:修改模型后,图表信息会清空

image.png

4.2 维度

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)维度字段:布尔、文本、枚举、日期时间、年份、日期、时间、用户ID、手机号、邮箱

4.2.1 维度的添加

1)图表设计页面,点击维度后的「+」,右侧弹出弹窗,展示所有的维度字段,可以选择对应的字段进行分析

a拖动字段进入维度列表

b点击字段,则字段进入维度列表

2)不同的图表支持的维度个数不同,当维度字段个数已达上限后不可再添加;此时拖动新字段到旧字段上后,新字段会代替旧字段进行数据分析,且会保留相同的样式

image.png

4.2.2 维度的删除

1)维度选择后,鼠标放到维度字段上,显示「删除图标」

2)点击则字段删除成功,维度字段的效果消失

image.png

4.2.3 修改维度展示名称

1)维度选择后,鼠标放到维度字段上,显示「设置图标」

2)点击后下方弹出「修改展示名称」的设置选项,点击后右侧出现修改展示名称的弹窗,可以进行修改,在输入框下方可以查看原字段名称

image.png

4.3 数值

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)数值字段:整数、浮点数、金额、(连续的日期时间、年份、日期、时间)

4.3.1 数值的添加

1)图表设计页面,点击数值后的「+」,右侧弹出弹窗,展示所有的数值字段,可以选择对应的字段进行分析

a拖动字段进入数值列表

b点击字段,则字段进入数值列表

2)不同的图表支持的数值个数不同,当数值字段个数已达上限后不可再添加;此时拖动新字段到旧字段上后,新字段会代替旧字段进行数据分析,且会保留相同的样式

3)拖入的数值字段中,可以同时拖入整数、浮点数、金额;但是拖入字段类型=年份/日期时间/日期/时间后,不可以拖入其他字段类型的数值字段

4)饼图、漏斗图不可以在数值列表中拖入字段类型=年份/日期时间/日期/时间的字段

4.3.2 数值的删除

1)数值选择后,鼠标放到数值字段上,显示「删除图标」

2)点击则字段删除成功,数值字段的效果消失

4.3.3 修改数值展示名称

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「修改展示名称」选项,点击后右侧出现修改展示名称的弹窗,可以进行修改,在输入框下方可以查看原字段名称

4.3.4 修改数值聚合方式

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「聚合方式」选项,点击后右侧出现修改展示名称的弹窗,可以进行修改

3)默认是求和,可以修改为「无处理、最小值、最大值、平均值、计数」

a求和:将维度值对应的所有数值进行加和

b无处理:取维度值对应数值中的最近一条不为空的值

c最小值:取维度值对应数值中的最小值

d最大值:取维度值对应数值中的最大值

e平均值:取维度值对应数值的平均值

f计数:计算维度值对应的数值个数

4)修改后实时更新图表信息,会影响辅助线取数值字段时的值

image.png

4.3.5 修改数值数据格式

1)维度选择后,鼠标放到数值字段上,显示「设置图标」

2)点击后下方弹出可以设置的选项,点击「数据格式」选项,点击后右侧出现修改数据格式的弹窗,可以进行修改

3)可以设置字段的数据类型、单位;

a数据类型:默认为「默认」,可修改为「数值、货币、百分比」

ⅰ类型=默认:与原数据保持一致

ⅱ类型=数值:选择数值保留的小数精度,默认是两位小数,最大支持6位

ⅲ类型=货币:需要选择一种货币,也可以设置需要展示的精度;选择后货币会展示在图表的数值字段后,也会展示在数值上

ⅳ类型=百分比:选择数值保留的小数精度,可以选择处以100,选择后数值会展示为处以100后的百分比

b单位:设置数值字段对应的单位名称,设置后会展示在图表的数值字段后

4)修改后实时更新图表信息

image.png

4.4 筛选

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

4.4.1 筛选的添加

1)图表设计页面,点击筛选后的「+」,右侧弹出弹窗,展示所有的维度、数值字段,可以选择对应的字段进行筛选,支持筛选多个字段

a拖动字段进入筛选列表

b点击字段,则字段进入筛选列表

2)选择字段后,可以设置具体的筛选条件

image.png

4.4.2筛选的删除

1)筛选字段选择后,鼠标放到筛选字段上,显示「删除图标」

2)点击则字段删除成功,筛选字段的效果消失

4.4.3 维度字段设置筛选条件

1)鼠标放到筛选字段上,显示「设置图标」,点击后针对当前字段值进行筛选

2)筛选字段的字段类型=维度时,需要选择进入图表的数据,此时如果勾选了排除,则是未勾选的数据进入图表

4.4.4 数值字段设置筛选条件

1)鼠标放到筛选字段上,显示「设置图标」,点击后针对当前字段值进行筛选

2)筛选字段的字段类型=数值时,需要选择条件、填写条件对应的数值

a条件:默认为「大于」,可修改为「大于等于、小于、小于等于、等于、不等于、区间」;修改为区间时,必须填写区间的起始值和终点值

3)填写完成后点击【确认】,筛选过滤成功,图表上展示的数据仅为筛选后的内容

4.5 排序

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

4.5.1 排序的添加

1)图表设计页面,点击排序后的「+」,右侧弹出弹窗,展示所有的维度、数值字段,可以选择对应的字段进行排序,最多按一个字段进行排序

a拖动字段进入排序列表

b点击字段,则字段进入排序列表

2)选择字段后,默认为按排序字段的值升序排列,可以设置其他顺序,维度值会按照指定的顺序从上到下/从左到右进行排列

3)字段值的默认排序:数字>大写字母>小写字母>汉字>符号>null

4.5.2 排序的删除

1)排序字段选择后,鼠标放到排序字段上,显示「删除图标」

2)点击则字段删除成功,排序字段的效果消失,字段恢复原始排序

4.5.3 维度字段设置排序

1)鼠标放到排序字段上,显示「设置图标」,可以设置维度字段的自定义排序,以及对应的升序/降序

a自定义排序

b升序/降序:默认为升序排序,此时展示降序,点击降序则变为降序排序

2)排序字段的字段类型=维度时,需要选择进入图表的数据,此时如果勾选了排除,则是未勾选的数据进入图表

4.5.4 数值字段设置排序

1)鼠标放到排序字段上,显示「设置图标」,可以设置数值字段的聚合方式,以及对应的升序/降序

a聚合方式:默认为求和,可以修改为「无处理、最小值、最大值、平均值、计数」

b升序/降序:默认为按当前聚合方式升序排序,此时展示降序,点击降序则变为按数据聚合方式从大到小排序

2)修改完成后点击【确认】,设置排序成功,图表上展示的维度值顺序按照设置的顺序进行排列,数值一致时,按照默认的维度字段值顺序排序

image.png

4.6 图内筛选项

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)将常用的筛选字段通过拖入/点击的方式进入图内筛选项列表,最多拖入6个维度字段,不可以拖入数值字段

4)拖入后可以根据字段进行筛选,筛选后图表展示的数据重新计算

4.7 切换为标准样式

1)操作流程:图表设计页面-进切换为标准样式

2)操作路径:数据可视化-图表-编辑/创建图表进入图表设计页面

3)切换为标准样式后可以恢复字体的默认大小和颜色

4.8 图表样式

进入图表设计页面,默认为单条柱状图,可以进行切换;本期支持的图表有:单条柱状图、多条柱状图、单条形图、多条形图、单条折线图、多条折线图、双Y轴折线图、基础面积图、饼图、环形图、基础漏斗图、表格、地图、仪表盘图、散点图、气泡图、动态气泡图、指标统计图

1)图表标题:需要设置标题/副标题/描述的是否展示、位置、字号大小、字体颜色;默认标题、副标题、描述均展示

2)坐标轴:需要设置是否展示x轴刻度线、y轴刻度线,以及坐标轴上字段的字号大小、字体颜色

3)标签:需要设置是否展示标签,展示的标签内容(一般是维度字段的值、

4)数值字段名称、数值字段的值,饼图、漏斗图除外)和标签的字号大小、字体颜色

5)图例:需要设置是否展示图例(一般是展示维度字段对应的值,漏斗图除外),展示的位置和图例的字号大小、字体颜色

6)辅助线:支持添加多条辅助线,可以输入数值,也可以根据图表上的数值字段的平均值/最小值/最大值

7)基本格式(表格):针对表格图表,设置表头/表体的对齐方式、行高、字号大小、字体颜色、背景颜色

8)小计(表格):针对表格图表,设置是否展示小计,以及展示的小计对齐方式、行高、字号大小、字体颜色、背景颜色

image.png

4.8.1 单条形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为基础条形图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.2 多条形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条形图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.3 单条柱状图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)默认为单条柱状图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线

5)样式效果配置后即时生效

4.8.4 多条柱状图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条柱状图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.5 单条折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为单条折线图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.6 多条折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为多条折线图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.7 双y轴折线图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为双Y轴折线图,此时可以选择一个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、标签、图例、辅助线、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.8 面积图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为面积图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签(还可以选择展示百分比)、图例

5)样式效果配置后即时生效

image.png

4.8.9 饼图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为饼图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签(还可以选择展示百分比)、图例、下钻

5)样式效果配置后即时生效

image.png

4.8.10 环形图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为环形图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、下钻

5)样式效果配置后即时生效

image.png

4.8.11 漏斗图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为漏斗图,此时可以选择一个维度字段和一个数值字段、或者0个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、下钻

a标签:一个维度字段和一个数值字段的标签是维度字段的值、数值字段名称、数值字段的值;0个维度字段和多个数值字段的标签是数值字段名称、数值字段的值;

b图例:一个维度字段和一个数值字段的标签是维度字段的值;0个维度字段和多个数值字段的标签是数值字段名称;

5)样式效果配置后即时生效

image.png

4.8.12 表格

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为表格,此时可以选择多个维度字段和多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、基本格式、小计、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.13 地图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为地图,此时可以选择一个维度字段和一个数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、图例、显示设置、下钻

5)样式效果配置后即时生效

image.png

4.8.14 仪表盘图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为仪表盘,此时可以选择一个当前数值字段字段和一个目标数值字段生成图表

4)图表生成后可以配置样式:图表标题、标签、颜色设置、角度设置

5)样式效果配置后即时生效

image.png

4.8.15 散点图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为散点图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、辅助线、下钻

5)样式效果配置后即时生效

image.png

4.8.16 气泡图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为气泡图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴、一个气泡大小字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、图例、

5)样式效果配置后即时生效

image.png

4.8.17 动态气泡图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为动态气泡图,此时可以选择一个维度字段和一个数值X轴、一个数值Y轴、一个气泡大小、一个动态值字段生成图表

4)图表生成后可以配置样式:图表标题、坐标轴、图例、下钻、动画设置

5)样式效果配置后即时生效

image.png

4.8.18 指标统计图

1)操作流程:创建图表-进入图表设计页面

2)操作路径:数据可视化-图表-二级分组-图表-创建图表

3)切换图表为指标统计图,此时可以选择多个数值字段生成图表

4)图表生成后可以配置样式:图表标题、显示设置

5)样式效果配置后即时生效

image.png

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9422.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
史, 昂's avatar史, 昂数式管理员
Previous 2024年6月20日 am9:49
Next 2024年6月20日 am9:49

相关推荐

  • 3.5.7.7 自定义主题

    主题是什么 Oinone框架提供了强大的主题定制功能,使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题,你可以调整颜色、间距、圆角等视觉元素,从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤: 关键点 使用CSS变量: Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。 全面定制: 可以定制的范围广泛,包括颜色、字体、间距、边框、圆角等。 通过调整这些元素,可以确保UI符合公司的视觉标准。 定制步骤 了解CSS变量: 首先,了解如何在CSS中使用变量。 查看Oinone现有的CSS变量列表,以了解哪些样式可以被定制。 定义公司的UI规范: 根据公司的品牌指南,定义一套UI规范。 包括颜色方案、字体样式、元素尺寸等。 应用自定义样式: 在Oinone的样式表中,使用定义的CSS变量来覆盖默认样式。 确保在适当的地方应用这些自定义样式。 作用场景 Oinone平台提供了灵活的主题定制选项,包括内置的六套主题样式,涵盖深色和浅色模式以及不同的尺寸选项(大、中、小)。这些主题可以适应不同的业务需求和项目特性,同时提供了定制工具,方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明: 主题选项 内置主题: 六套主题:包括深色和浅色模式,以及大、中、小尺寸。 用户可以通过系统设置功能轻松切换不同的主题。 可定制性: 提供CSS变量的JSON文件,方便用户下载和修改。 允许用户根据具体需求定制颜色、字体、间距等样式变量。 应用场景 公司UI规范对齐: 首先根据公司的UI规范调整一份基础主题。 这有助于确保平台的外观与公司品牌一致。 项目和业务适应性: 在不同项目或业务场景中,可以基于公司UI规范进行微调。 这提供了项目特定的灵活性,同时保持整体的品牌一致性。 实施建议 初始设置: 初始时,选择一个接近公司标准的内置主题作为起点。 通过系统设置功能体验不同的主题效果。 定制和微调: 下载并修改CSS变量的JSON文件,以符合公司的UI标准。 对于特定项目或业务场景,根据需要进行进一步的微调。 自定义主题 自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格,以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例,用于指导如何在Oinone平台上实现这一功能。 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./theme: 图3-5-7-24 自定义主题目录示例 步骤 1: 创建主题 定义主题变量: 创建一个包含主题样式变量的JavaScript文件。例如,可以定义一个名为OinoneTheme的新主题,并设置相应的CSS变量。 图3-5-7-24 自定义主题代码示例 注册主题: 使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。 步骤 2: 应用主题 在主入口文件中引用: 在main.ts文件中引入自定义主题,并在VueOioProvider配置中指定。 图3-5-7-24 自定义主题应用配置示例 效果 图3-5-7-24 自定义黑色主题效果示例 主题叠加: Oinone支持多个主题变量同时存在,后导入的主题变量会覆盖前面导入的。 内置主题 Oinone平台内置了以下六个主题变量,你可以在自定义主题时参考或扩展它们: ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量 在定义主题变量时,根据业务需求可以添加不存在的变量,作为变量的扩展。 示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量 查找主题变量 在Oinone平台上,通过DOM调试器查找主题变量是一种有效的方式,允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明: 步骤: 使用DOM调试器: 在浏览器中打开Oinone平台,进入需要查找主题变量的页面。 使用浏览器的开发者工具或DOM调试器(通常可通过右键点击页面元素并选择“检查”打开)。 选择目标组件: 在DOM调试器中,通过选择器工具或直接点击页面上的组件,选中你想要查找主题变量的目标组件。 查看样式和主题变量: 在选中的组件上,浏览开发者工具中的“样式”或“计算”选项卡。 可以通过查看样式表中的相关样式规则,找到组件所使用的主题变量。 4标识主题变量: 主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量,记录下变量名和当前的取值。 示例: 假设你想查找某个按钮组件的主题变量,可以通过以下步骤: 在DOM调试器中选中按钮组件。 在“样式”或“计算”选项卡中查看相关样式规则。 找到以 –oio 为前缀的主题变量,如 –oio-button-pirmary-background。 记录该主题变量的取值,例如 #3498db。 图3-5-7-24 DOM调试器查询主题变量

    2024年5月23日
    2.0K00
  • 3.5.7.4 自定义页面

    页面是什么 在Oinone前端体系中,页面是一个核心概念,它代表着终端用户所看到的当前视图。这个视图可以有多种形式,主要取决于页面是如何定义和构建的。在深入理解页面之前,我们需要了解两个关键的功能:自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能,但在某些情况下,它可能无法完全满足特定的需求。这时,自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充,允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时,自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计,添加特定的交互元素,或者整合复杂的业务逻辑,以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例,展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例,main.ts更新导入./view: 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先,我们定义了一个名为 CustomViewWidget 的 TypeScript 组件,并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次,我们创建了对应的 Vue 单文件组件 CustomView.vue,用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来,我们使用 registerLayout 函数注册了一个表格视图布局,并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后,它就可以在表格视图中被使用。在表格视图的布局中,我们通过 标签将自定义视图嵌套在表格中,从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是,registerLayout 函数和自定义布局的规则是一致的,这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则,从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先,我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…

    2024年5月23日
    1.9K00
  • 1.1 Oinone的萌芽

    在信息化时代,中国并没有涌现出一家世界知名的软件公司。这是因为像SAP、Oracle、IBM、Salesforce、NetSuite、Odoo等西方巨头所拥有的最佳实践在业务、技术和模式方面,给予了它们在企业信息化建设中高额利润的优势。中国软件业在这个时代的角色是学习和追随者,而最优秀的追随者是金蝶和用友,它们能在国家推行会计电算化的机遇中占据领先地位。但是,追随者始终只是追随者,没有真正的突破。 我自己进入软件行业的经历可以追溯到2015年。当时资本市场非常热门,大家都在创业。我认为这是一个时代的机会,就像国家改革开放一样。于是,我和很多同事一起开始了创业之旅。在数式之前,我加入并创办了三家公司:500mi、数列和端点。整个过程给了我宝贵的经验和启示,帮助我找到了最终想要的方向。 在500mi公司时,我从技术岗位转型为业务经营,起步并不顺利。然而,我从这份经历中获得了一堂重要的课:做自己擅长的事情,有助于渡过创业启动期最艰难的阶段。同时,市场调研为我提供了一个信号:传统企业对于IT的需求正逐渐向互联网靠拢。这个信号像注入了一剂强心剂,激励我继续前行。 2016年,我和三个曾在阿里工作的同事一起创办了一家新公司——数列,我们决定专注于我们最擅长的领域,即软件服务商。在没有任何商务资源的情况下,我们第一年就完成了1000多万的合同,这相较之前是一个非常成功的开端。然而,对于公司未来的发展方向,我们花费了长达大半年的时间进行思考:应该坚持做底层的PaaS还是专注于企业可见的上层应用和业务产品?我倾向于后者。尽管我们持续存在分歧,但凭借着多年的革命友情,最终我们友好地分道扬镳。数列此前的成功让我更加坚信:在数字化时代,软件需求将会有井喷式的增长,数字化软件服务将是未来5-10年的重要方向。而在这个领域,专业的技能将是应对未来不确定性的真正力量。 提到数字化,就不得不提阿里巴巴提出的中台理念。中台理念在15年前被阿里巴巴提出,当时引起了广泛的关注和讨论。企业之所以认同中台理念,是因为他们的核心需求已经从内部转向外部:从关注管理、流程、效率的提升,转向关注外部协同、运营、创新。他们已经不再只担心企业的效率和成本,而是担心自己是否有能力跟上时代的快速变化。现今做生意的渠道已经不再是单一的线下渠道,而是包括淘宝、天猫、京东、拼多多、抖音、快手等多个线上渠道,以及海外市场,这种变化速度非常快。而中台的核心理念是敏捷响应、低成本快速创新,正好解决了企业主的核心焦虑。 企业的视角正在从内部管理向业务在线和生态在线(协同)转变,这种转变带来了一系列新的需求(如下图1-1所示)。这种转变不仅是为了支持现有业务的发展,也为企业未来的业务发展和创新提供了支持,并将变化实时反映到上下游合作伙伴中。 图1-1 企业视角转变带来一系列新的诉求 在2017年下半年,阿里云收购了端点科技,打算重启阿里软件。那个时候,市场上涌现出一批中台厂商,整个行业也比较混乱,很多人对互联网架构本身的理解不够深入,快速学习拿到阿里云认证后就开始做定制化的中台架构开发,但最终的效果无法达到预期。因此,阿里云和端点科技的联姻是为了弥补阿里云没有向外输出上层应用产品能力的缺陷。多年来,软件市场一直被国外厂商掌控,中国一直缺乏一个强大的本土软件公司。阿里收购端点,承载着无数中国人的软件梦想。在这种背景下,我回到了阿里体系,加入了端点科技。后来,我参与了许多中台项目,深刻地认识到搭建中台技术架构和一些基础能力,为上层应用场景落地并不难。但是,当客户接手扩展中台能力和新的上层应用场景时,效果往往不尽如人意,这并不是中台架构理念的问题,而是因为传统企业客户的IT能力大多较弱,这是一个硬伤。许多文章都在讲述中台战略,长篇大论地描述组织中台、技术中台、业务中台、数据中台,我们不去评论这些方法论的对错,从技术角度回到初衷,我们只关注一个问题:技术是为商业服务的,中台如何快速满足企业业务多变的需求? 我们经历了多个行业的中台建设,每次都向客户强调第一阶段是打好基础,因此需要较长的周期,并且每个项目都需要顶级架构师来把控整体项目。如何找到互联网架构与传统软件良好结合点,降低对组织的要求,实现中台架构的标准化输出?这是我回归阿里后致力于解决的问题。然而,随着阿里云对端点战略发展思路的变化,阿里不再提供SaaS服务,而只愿意做平台被其他企业集成。因此,我离开了端点,并决定把自己的技术思考转化为现实,于是数式科技诞生了。 在数字化时代,无论是业务、技术还是商业模式的最佳实践,都源自中国。中国已经从追随者转变为互联网领域的全面引领者。我们有理由相信,中国一定会崛起一家世界级的软件公司,而Oinone将始终以此为愿景。

    2024年5月23日
    2.4K00
  • 数据字典

    1. 什么是数据字典 数据字典是一些固定字典项的集合,可作为多选或单选的选项,例如人员性别、员工属相、杭州市下属的行政区等都是数据字典。 选择一个应用/模块下的一个小模块,可以查看其中包含的自定义字典(自建的数据字典)和系统字典。可以通过导入或添加创建自定义字典。 2. 数据字典基本操作 删除:系统字典不支持删除,无法批量删除自定义数据字典,若数据字典已经被字段、页面等引用时,也无法删除这个数据字典。 隐藏/可见:自定义字典、系统字典都可以操作隐藏和可见,隐藏和可见不影响数据字典在字段、页面等处的使用。 查看引用关系:点击查看引用关系,展开弹窗,展示该数据字典和字段、视图的引用关系。 修改:若数据字典已经被引用,无法删除其中的字典项。若无引用关系则可以任意修改。 3. 数据字典导入 点击“导入数据字典”按钮,弹出窗口,可根据图中引导进行数据字典的导入。 在经典模式下,导入数据字典会新建数据字典。 在专家模式下,数据字典导入的模板中包含字段“字典编码”,若导入的字典编码不存在则会新建数据字典,若导入的字典编码已存在则会修改字典编码的设置,新建和修改的动作会校验是否符合规范。 4. 数据字典创建 4.1 专家模式(低代码模式) 字典项类型有“二进制、文本、整数”三种可选,选择二进制时,字典项值需要选择存储在数据库二进制中的第几位。系统根据字典项值去查找字典项名称,因此字典项值不可重复。 数据字典的api名称、代码名称、描述可不填,部分系统会赋默认值。 字典项中字典项名称和字典项值必填,api名称和字典项描述不填系统会赋默认值。 4.2 经典模式(无代码模式) 经典模式下只需要填写字典名称,添加字典项即可。系统会自动将字典项类型设置为“二进制”,并将字典项按照创建的先后顺序设置字典项值的位数。字典项类型、字典项值释义可参照专家模式的解释。

    2024年6月20日
    2.9K00

Leave a Reply

Please Login to Comment