一种可视化图表优化方法、系统、计算机设备及介质与流程

1.本发明涉及计算机软件技术领域，特别涉及一种可视化图表优化方法、系统、计算机设备及介质。


背景技术：

2.css(cascading style sheets，层叠样式表)是一种用来表现html或xml等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。在系统上线部署到生产环境之后,依旧难免会出现一些问题,例如网页的间距少了一点或者高度多了一些，此时就需要通过css语言对网页的可视化图表进行优化。
3.在现有技术中，在对网页的可视化图表进行优化时，首先需要在网页代码块中先找到出现问题的可视化图表对应的css对象,然后针对css对象添加css类名,再给css类名设置样式以完成优化。由于现有技术中在针对css对象添加css类名时，由于css类名的长度复杂以及形式多样，因此需要通过查阅css类名的技术文档完成css类名的正确撰写，查阅css类名的技术文档需要花费大量的时间和精力，从而提升了正确css缩写类名的撰写时间，降低了可视化图表优化效率。


技术实现要素：

4.基于此，有必要针对医疗问答用户群体较小，平台服务能力较低的问题，提供一种可视化图表优化方法、系统、计算机设备及介质。
5.一种可视化图表优化方法，方法包括：确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
6.在其中一个实施例中，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，包括：若类名数据为单个字符，则通过正则表达式在预设css类名规则库中进行模糊搜索，得到css对象的css缩写类名序列；展示css缩写类名序列；在接收到针对展示的css缩写类名序列的选择指令时，根据选择指令在css缩写类名序列确定出目标css缩写类名。
7.在其中一个实施例中，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，包括：若类名数据为多个字符且在预设时长内未新增字符，则判断多个字符是否存在于预设css类名规则库；若多个字符存在于预设css类名规则库，则将多个字符确定为目标css缩写类名；或者，若多个字符不存在于预设css类名规则库，则构建错误描述文本进行展示；将多个字符的最后一个字符删除；若删除后的剩余字符存在于预设css类名规则库，则基于删除后的剩余字符构建正确描述文本进行展示；在接收到确定指令时，则将删除后的剩余字符确定为目标css缩写类名。
8.在其中一个实施例中，展示css缩写类名序列，包括：确定css缩写类名序列中每个css缩写类名的优先级；基于优先级的高低顺序将css缩写类名序列进行排序，得到排序后的多个css缩写类名；根据预设尺寸参数构建可视化窗口，并计算可视化窗口中可容纳的元素数量；在排序后的多个css缩写类名中依次选取可容纳的元素数量的css缩写类名展示到可视化窗口中，并将选取后剩余的css缩写类名进行隐藏。
9.在其中一个实施例中，确定css缩写类名序列中每个css缩写类名的优先级，包括：统计css缩写类名序列中每个css缩写类名的使用频次；基于每个css缩写类名的使用频次确定每个css缩写类名的优先级；或者，计算css缩写类名序列中每个css缩写类名与待优化可视化图表对应的css对象之间的关联度，得到每个css缩写类名的关联度；根据每个css缩写类名的关联度确定每个css缩写类名的优先级。
10.在其中一个实施例中，方法还包括：实时接收到针对可视化窗口上滑动按键的滑动指令时，根据滑动指令确定出滑动距离；根据滑动距离计算可展示元素数量；在可视化窗口中展示的css缩写类名中依次选择可展示元素数量的css缩写类名进行隐藏，并在隐藏的css缩写类名中依次选取可展示元素数量的css缩写类名进行展示。
11.在其中一个实施例中，定位出待优化可视化图表对应的css对象，包括：加载待优化可视化图表所属的web前端代码块；在web前端代码块中遍历搜索全部css对象；构建全部css对象的深度树；确定待优化可视化图表的搜索标识符；根据搜索标识符，并结合深度优先遍历算法在深度树中进行搜索，得到搜索结果；根据搜索结果确定为待优化可视化图表对应的css对象。
12.一种可视化图表优化系统，系统包括：css对象定位模块，用于确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；目标css缩写类名确定模块，用于在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；可视化图表优化模块，用于针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
13.一种计算机设备，包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述可视化图表优化方法的步骤。
14.一种存储有计算机可读指令的介质，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述可视化图表优化方法的步骤。
15.上述可视化图表优化方法、系统、设备和介质，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
附图说明
16.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。
17.图1为本技术一个实施例中提供的可视化图表优化方法的实施环境图；
18.图2为本技术一个实施例中计算机设备的内部结构示意图；
19.图3为本技术一个实施例中提供的可视化图表优化方法的方法示意图；
20.图4为本技术一个实施例中提供的可视化图表优化过程的过程示意图；
21.图5是本技术另一个实施例中提供的可视化图表优化方法的方法示意图；
22.图6是本技术实施例提供的一种可视化图表优化系统的系统结构示意图。
具体实施方式
23.为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
24.可以理解，本技术所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。
25.图1为一个实施例中提供的可视化图表优化方法的实施环境图，如图1所示，在该实施环境中，包括服务端110以及客户端120。
26.服务端110可以为服务器，该服务器具体可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(content delivery network，cdn)、以及大数据和人工智能平台等基础云计算服务的云服务器，例如为保存预设css类名规则库的服务器设备。客户端120确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，客户端120在接收到针对css对象输入的类名数据时，从服务端110获取预设css类名规则库，并根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，客户端120针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
27.需要说明的是，客户端120可为智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。服务端110以及客户端120可以通过蓝牙、usb(universal serial bus，通用串行总线)或者其他通讯连接方式进行连接，本发明在此不做限制。
28.图2为一个实施例中计算机设备的内部结构示意图。如图2所示，该计算机设备包括通过系统总线连接的处理器、介质、存储器和网络接口。其中，该计算机设备的介质存储有操作系统、数据库和计算机可读指令，数据库中可存储有控件信息序列，该计算机可读指令被处理器执行时，可使得处理器实现一种可视化图表优化方法。该计算机设备的处理器用于提供计算和控制能力，支撑整个设备的运行。该计算机设备的存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种可视化图表优化方法。该计算机设备的网络接口用于与终端连接通信。本领域技术人员可以理解，图2中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。其中，介质为一种可读的存储介质。
29.下面将结合附图3-5，对本技术实施例提供的可视化图表优化方法进行详细介绍。该方法可依赖于计算机程序实现，可运行于基于冯诺依曼体系的可视化图表优化系统上。
该计算机程序可集成在应用中，也可作为独立的工具类应用运行。
30.本技术实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(artificial intelligence，ai)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。
31.人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大可视化图表优化技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。
32.请参见图3，为本技术实施例提供了一种可视化图表优化方法的流程示意图。如图3所示，本技术实施例的方法可以包括以下步骤：
33.s101，确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；
34.其中，前端页面是web端的网页，每个网页中包括大量的可视化图表。
35.通常，在系统上线部署到生产环境之后,依旧难免会出现一些问题,例如网页中某个可视化图表的间距少了一点或者高度多了一些，该图表就是待优化可视化图表。
36.在本技术实施例中，首先确定出前端页面中待优化可视化图表，然后加载待优化可视化图表所属的web前端代码块，其次在web前端代码块中遍历搜索全部css对象，并构建全部css对象的深度树，以及确定待优化可视化图表的搜索标识符，再根据搜索标识符，并结合深度优先遍历算法在深度树中进行搜索，得到搜索结果，最后根据搜索结果确定为待优化可视化图表对应的css对象。
37.s102，在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；
38.其中，类名数据是用户在前端代码编辑器上输入的代码数据，该代码数据可以是一个字符，也可以是多个字符。预设css类名规则库是通过目前规范的css缩写类名创建的标准类名数据库。
39.在本技术实施例中，在接收到针对css对象输入的类名数据时，若类名数据为单个字符，则通过正则表达式在预设css类名规则库中进行模糊搜索，得到css对象的css缩写类名序列，然后展示css缩写类名序列，最后在接收到针对展示的css缩写类名序列的选择指令时，根据选择指令在css缩写类名序列确定出目标css缩写类名，例如目标css缩写类名为vueclass-mt-10。
40.具体的，在展示css缩写类名序列时，首先确定css缩写类名序列中每个css缩写类名的优先级，再基于优先级的高低顺序将css缩写类名序列进行排序，得到排序后的多个css缩写类名，然后根据预设尺寸参数构建可视化窗口，并计算可视化窗口中可容纳的元素数量，最后在排序后的多个css缩写类名中依次选取可容纳的元素数量的css缩写类名展示到可视化窗口中，并将选取后剩余的css缩写类名进行隐藏。
41.具体的，在确定css缩写类名序列中每个css缩写类名的优先级时，首先统计css缩写类名序列中每个css缩写类名的使用频次，然后基于每个css缩写类名的使用频次确定每个css缩写类名的优先级；
42.或者首先计算css缩写类名序列中每个css缩写类名与待优化可视化图表对应的css对象之间的关联度，得到每个css缩写类名的关联度，然后根据每个css缩写类名的关联度确定每个css缩写类名的优先级。
43.进一步地，在对隐藏的css缩写类名进行处理时，首先在实时接收到针对可视化窗口上滑动按键的滑动指令时，根据滑动指令确定出滑动距离，然后根据滑动距离计算可展示元素数量，最后在可视化窗口中展示的css缩写类名中依次选择可展示元素数量的css缩写类名进行隐藏，并在隐藏的css缩写类名中依次选取可展示元素数量的css缩写类名进行展示。
44.在本技术实施例中，若类名数据为多个字符且在预设时长内未新增字符，则判断多个字符是否存在于预设css类名规则库，若多个字符存在于预设css类名规则库，则将多个字符确定为目标css缩写类名。
45.或者，若多个字符不存在于预设css类名规则库，则构建错误描述文本进行展示，然后将多个字符的最后一个字符删除，若删除后的剩余字符存在于预设css类名规则库，则基于删除后的剩余字符构建正确描述文本进行展示，最后在接收到确定指令时，则将删除后的剩余字符确定为目标css缩写类名。
46.例如图4所示，首先接收到针对css对象输入的类名数据，然后分析类名数据。若输入的是单个字符，基于单个字符在预设css类名规则库中进行模糊搜索，并将搜索到的全部类名展示在提示框中供用户选择。若输入的是完整的类名，基于预设css类名规则库进行正确性校验，当输入的是正确的类名，则不提示，当输入的是错误的类名，则提示报错，并将输入的类名数据的最后一个字符删除，继续校验，若正确，则给出提示。
47.s103，针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
48.其中，图表优化参数是具体控制图表改变的参数，例如margin-top:10px。
49.在本技术实施例中，在得到目标css缩写类名后，可针对目标css缩写类名配置图表优化参数，具体可在解析页面时在vue文件下面直接添加一个style标签，里面自动生成图表优化参数为vueclass-mt-10{margin-top:10px}，最后可自动运行图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
50.在一种可能的实现方式中，可以在ide上做些处理.加一个专门处理简写类名的插件,开发文档中部分内容保存到插件里，把所有能够使用的css缩写类名保存一个集合，在用户填写缩写类名的时候,查找这个集合进行做个过滤,过滤出以用户填写内容为前缀的缩写，把这些缩写作为输入提示弹出，供用户选择。或者当用户把缩写样式写完之后,拿到缩写名称，在缩写集合里进行搜索，确定用户填写的是否是正确的格式,如果不是正确的格式,可以在ide中爆一个错，提示类名缩写错误(ide的错误提示,只是一个提示,与代码运行无关)。如果用户的类名缩写是错的,我们可以在拿到的类名中去掉最后一个字母,看集合中是否有类似的缩写类名,如果有,则在保存信息里提示,您要写的是否是’xxxx’，如果没有类似的,或类似的特别多时则不提示。这样就能够让用户不用去查线上开发文档，一直把注意力放在编辑器上的代码上，提升效率。
51.在本技术实施例中，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数
据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
52.请参见图5，为本技术实施例提供的另一种可视化图表优化方法的流程示意图。如图5所示，本技术实施例的方法可以包括以下步骤：
53.s201，确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；
54.s202，在接收到针对css对象输入的类名数据时，判断字符；
55.s203，若类名数据为单个字符，通过正则表达式在预设css类名规则库中进行模糊搜索，得到css对象的css缩写类名序列；
56.s204，展示css缩写类名序列；
57.s205，在接收到针对展示的css缩写类名序列的选择指令时，根据选择指令在css缩写类名序列确定出目标css缩写类名；
58.s206，若类名数据为多个字符且在预设时长内未新增字符，若多个字符存在于预设css类名规则库，则将多个字符确定为目标css缩写类名；
59.s207，若多个字符不存在于预设css类名规则库，则构建错误描述文本进行展示；将多个字符的最后一个字符删除；若删除后的剩余字符存在于预设css类名规则库，则基于删除后的剩余字符构建正确描述文本进行展示；在接收到确定指令时，则将删除后的剩余字符确定为目标css缩写类名；
60.s208，针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
61.在本技术实施例中，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
62.下述为本发明系统实施例，可以用于执行本发明方法实施例。对于本发明系统实施例中未披露的细节，请参照本发明方法实施例。
63.请参见图6，其示出了本发明一个示例性实施例提供的可视化图表优化系统的结构示意图。该可视化图表优化系统可以通过软件、硬件或者两者的结合实现成为设备的全部或一部分。该系统1包括css对象定位模块10、目标css缩写类名确定模块20、可视化图表优化模块30。
64.css对象定位模块10，用于确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；
65.目标css缩写类名确定模块20，用于在接收到针对css对象输入的类名数据时，根
据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；
66.可视化图表优化模块30，用于针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
67.需要说明的是，上述实施例提供的可视化图表优化系统在执行可视化图表优化方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的可视化图表优化系统与可视化图表优化方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。
68.上述本技术实施例序号仅仅为了描述，不代表实施例的优劣。
69.在本技术实施例中，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
70.在一个实施例中，提出了一种计算机设备，设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
71.在一个实施例中，处理器执行根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名时，具体执行以下操作：
72.若类名数据为单个字符，则通过正则表达式在预设css类名规则库中进行模糊搜索，得到css对象的css缩写类名序列；展示css缩写类名序列；在接收到针对展示的css缩写类名序列的选择指令时，根据选择指令在css缩写类名序列确定出目标css缩写类名。
73.在一个实施例中，处理器执行根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名时，具体执行以下操作：
74.若类名数据为多个字符且在预设时长内未新增字符，则判断多个字符是否存在于预设css类名规则库；若多个字符存在于预设css类名规则库，则将多个字符确定为目标css缩写类名；或者，若多个字符不存在于预设css类名规则库，则构建错误描述文本进行展示；将多个字符的最后一个字符删除；若删除后的剩余字符存在于预设css类名规则库，则基于删除后的剩余字符构建正确描述文本进行展示；在接收到确定指令时，则将删除后的剩余字符确定为目标css缩写类名。
75.在一个实施例中，处理器执行展示css缩写类名序列时，具体执行以下操作：
76.确定css缩写类名序列中每个css缩写类名的优先级；基于优先级的高低顺序将css缩写类名序列进行排序，得到排序后的多个css缩写类名；根据预设尺寸参数构建可视化窗口，并计算可视化窗口中可容纳的元素数量；在排序后的多个css缩写类名中依次选取
可容纳的元素数量的css缩写类名展示到可视化窗口中，并将选取后剩余的css缩写类名进行隐藏。
77.在一个实施例中，处理器执行确定css缩写类名序列中每个css缩写类名的优先级时，具体执行以下操作：
78.统计css缩写类名序列中每个css缩写类名的使用频次；基于每个css缩写类名的使用频次确定每个css缩写类名的优先级；或者，计算css缩写类名序列中每个css缩写类名与待优化可视化图表对应的css对象之间的关联度，得到每个css缩写类名的关联度；根据每个css缩写类名的关联度确定每个css缩写类名的优先级。
79.在一个实施例中，处理器还执行以下操作：
80.实时接收到针对可视化窗口上滑动按键的滑动指令时，根据滑动指令确定出滑动距离；根据滑动距离计算可展示元素数量；在可视化窗口中展示的css缩写类名中依次选择可展示元素数量的css缩写类名进行隐藏，并在隐藏的css缩写类名中依次选取可展示元素数量的css缩写类名进行展示。
81.在一个实施例中，处理器执行定位出待优化可视化图表对应的css对象时，具体执行以下操作：
82.加载待优化可视化图表所属的web前端代码块；在web前端代码块中遍历搜索全部css对象；构建全部css对象的深度树；确定待优化可视化图表的搜索标识符；根据搜索标识符，并结合深度优先遍历算法在深度树中进行搜索，得到搜索结果；根据搜索结果确定为待优化可视化图表对应的css对象。
83.在本技术实施例中，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
84.在一个实施例中，提出了一种存储有计算机可读指令的介质，该计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行以下步骤：确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象；在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名；针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。
85.在一个实施例中，处理器执行根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名时，具体执行以下操作：
86.若类名数据为单个字符，则通过正则表达式在预设css类名规则库中进行模糊搜索，得到css对象的css缩写类名序列；展示css缩写类名序列；在接收到针对展示的css缩写类名序列的选择指令时，根据选择指令在css缩写类名序列确定出目标css缩写类名。
87.在一个实施例中，处理器执行根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名时，具体执行以下操作：
88.若类名数据为多个字符且在预设时长内未新增字符，则判断多个字符是否存在于预设css类名规则库；若多个字符存在于预设css类名规则库，则将多个字符确定为目标css缩写类名；或者，若多个字符不存在于预设css类名规则库，则构建错误描述文本进行展示；将多个字符的最后一个字符删除；若删除后的剩余字符存在于预设css类名规则库，则基于删除后的剩余字符构建正确描述文本进行展示；在接收到确定指令时，则将删除后的剩余字符确定为目标css缩写类名。
89.在一个实施例中，处理器执行展示css缩写类名序列时，具体执行以下操作：
90.确定css缩写类名序列中每个css缩写类名的优先级；基于优先级的高低顺序将css缩写类名序列进行排序，得到排序后的多个css缩写类名；根据预设尺寸参数构建可视化窗口，并计算可视化窗口中可容纳的元素数量；在排序后的多个css缩写类名中依次选取可容纳的元素数量的css缩写类名展示到可视化窗口中，并将选取后剩余的css缩写类名进行隐藏。
91.在一个实施例中，处理器执行确定css缩写类名序列中每个css缩写类名的优先级时，具体执行以下操作：
92.统计css缩写类名序列中每个css缩写类名的使用频次；基于每个css缩写类名的使用频次确定每个css缩写类名的优先级；或者，计算css缩写类名序列中每个css缩写类名与待优化可视化图表对应的css对象之间的关联度，得到每个css缩写类名的关联度；根据每个css缩写类名的关联度确定每个css缩写类名的优先级。
93.在一个实施例中，处理器还执行以下操作：
94.实时接收到针对可视化窗口上滑动按键的滑动指令时，根据滑动指令确定出滑动距离；根据滑动距离计算可展示元素数量；在可视化窗口中展示的css缩写类名中依次选择可展示元素数量的css缩写类名进行隐藏，并在隐藏的css缩写类名中依次选取可展示元素数量的css缩写类名进行展示。
95.在一个实施例中，处理器执行定位出待优化可视化图表对应的css对象时，具体执行以下操作：
96.加载待优化可视化图表所属的web前端代码块；在web前端代码块中遍历搜索全部css对象；构建全部css对象的深度树；确定待优化可视化图表的搜索标识符；根据搜索标识符，并结合深度优先遍历算法在深度树中进行搜索，得到搜索结果；根据搜索结果确定为待优化可视化图表对应的css对象。
97.在本技术实施例中，可视化图表优化系统首先确定前端页面中待优化可视化图表，并定位出待优化可视化图表对应的css对象，然后在接收到针对css对象输入的类名数据时，根据类名数据和预设css类名规则库确定出css对象的目标css缩写类名，最后针对目标css缩写类名配置图表优化参数，并基于图表优化参数对待优化可视化图表进行优化，生成优化的可视化图表。由于本技术在接收到类名数据时，可通过类名数据和预设css类名规则库确定出目标css缩写类名，该预设css类名规则库集成了标准的css缩写类名，从而降低了正确css缩写类名的撰写时间，从而提升了可视化图表优化效率。
98.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的介质可为磁碟、光
盘、只读存储记忆体(read-only memory，rom)等非易失性介质，或随机存储记忆体(random access memory，ram)等。
99.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
100.以上实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。