
技术摘要:
本发明公开了一种图表跟随用户界面的动态换肤方法、装置和计算机设备。其中,图表跟随用户界面的动态换肤方法包括:实时监测用户界面的显示参数;判断用户界面的显示参数是否发生变化;如果用户界面的显示参数发生变化,则运行图表换肤函数,以对图表进行换肤。本发明 全部
背景技术:
随着前端技术的不断发展,后台管理系统界面的框架越来越丰富,各终端用户对 于界面的美观性和多样性的要求也是越来越多。在满足系统功能的同时,需要对功能界面 的美观性做出更好的设计。而对功能界面进行更换皮肤,可以极大程度上带来UI(User Interface,用户界面)框架的丰富性。目前的换肤主要是HTML CSS层面的变化,而对于界面 上的某些图表,该方法不产生任何效果。例如,当界面由浅色皮肤变为深色皮肤的时候,图 表还是保持固定的颜色没有变化,从而导致图表颜色和界面颜色存在差异,显得突兀,不够 美观。 现有技术可以通过缓存存储界面的皮肤参数并刷新的方式来匹配图表和界面的 皮肤颜色,从而实现图表的换肤。但是,该方法会造成界面数据和操作都恢复到起始状态, 而且会产生一个页面刷新闪现的过度效果,用户体验不友好。此外,该方法容易造成用户误 操作,导致页面操作和数据的丢失。
技术实现要素:
本发明的目的旨在至少在一定程度上解决上述的技术问题之一。 为此,本发明的第一个目的在于提出一种图表跟随用户界面的动态换肤方法,图 表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化,避免用户界面刷新效果,提高 用户使用体验。 本发明的第二个目的在于提出一种图表跟随用户界面的动态换肤装置。 本发明的第三个目的在于提出一种计算机设备。 本发明的第四个目的在于提出一种非临时性计算机可读存储介质。 为了实现上述目的,本发明第一方面实施例提出一种图表跟随用户界面的动态换 肤方法,该方法包括: 实时监测用户界面的显示参数; 判断所述用户界面的显示参数是否发生变化; 如果所述用户界面的显示参数发生变化,则运行图表换肤函数,以对所述图表进 行换肤。 可选的,实时监测用户界面的显示参数,包括: 利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。 可选的,运行图表换肤函数,以对所述图表进行换肤,包括: 定义所述图表的文字和/或线条的变量参数; 当检测到所述用户界面的显示参数发生变化时,对所述图表的文字和/或线条的 3 CN 111611033 A 说 明 书 2/8 页 变量参数进行重新赋值。 可选的,当检测到所述用户界面的显示参数发生变化时,对所述图表的文字和/或 线条的变量参数进行重新赋值,包括: 获取变化后的所述用户界面的显示参数; 根据变化后的所述用户界面的显示参数设置所述图表的属性,并将变化后的所述 用户界面的显示参数传递至所述图表。 本发明实施例的图表跟随用户界面的动态换肤方法,通过实时监测用户界面的显 示参数,在监测到用户界面的显示参数发生变化时,运行图表换肤函数,以对图表进行换 肤,图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化,避免用户界面刷新效果, 提高用户使用体验。 为了实现上述目的,本发明第二方面实施例提出了一种图表跟随用户界面的动态 换肤装置,包括: 监测模块,用于实时监测用户界面的显示参数; 判断模块,用于判断所述用户界面的显示参数是否发生变化; 换肤模块,用于如果所述用户界面的显示参数发生变化,则运行图表换肤函数,以 对所述图表进行换肤。 可选的,所述监测模块,用于: 利用视图框架VUE的侦听器实时监测所述用户界面的显示参数。 可选的,所述换肤模块,用于: 定义所述图表的文字和/或线条的变量参数; 当检测到所述用户界面的显示参数发生变化时,对所述图表的文字和/或线条的 变量参数进行重新赋值。 可选的,所述换肤模块,具体用于: 获取变化后的所述用户界面的显示参数; 根据变化后的所述用户界面的显示参数设置所述图表的属性,并将变化后的所述 用户界面的显示参数传递至所述图表。 本发明实施例的图表跟随用户界面的动态换肤装置,通过实时监测用户界面的显 示参数,在监测到用户界面的显示参数发生变化时,运行图表换肤函数,以对图表进行换 肤,图表皮肤颜色能够实时跟随用户界面的皮肤颜色变化而变化,避免用户界面刷新效果, 提高用户使用体验。 为了实现上述目的,本发明第三方面实施例提出了一种计算机设备,包括存储器、 处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述处理器执行所 述计算机程序时,实现如第一方面实施例所述的图表跟随用户界面的动态换肤方法。 为了实现上述目的,本发明第四方面实施例还提出了一种非临时性计算机可读存 储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如第一 方面实施例所述的图表跟随用户界面的动态换肤方法。 本发明附加的方面和优点将在下面的描述中部分给出,部分将从下面的描述中变 得明显,或通过本发明的实践了解到。 4 CN 111611033 A 说 明 书 3/8 页 附图说明 构成本发明的一部分的说明书附图用来提供对本发明的进一步理解,本发明的示 意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中: 图1是本发明一实施例的图表跟随用户界面的动态换肤方法的流程图; 图2是本发明一具体实施例的图表跟随用户界面的动态换肤方法的流程图; 图3是本发明一实施例的图表跟随用户界面的动态换肤装置的结构示意图。