CN110781653B - 利用vue绘制svg图表的方法、装置、计算机设备和存储介质 - Google Patents
利用vue绘制svg图表的方法、装置、计算机设备和存储介质 Download PDFInfo
- Publication number
- CN110781653B CN110781653B CN201910972611.5A CN201910972611A CN110781653B CN 110781653 B CN110781653 B CN 110781653B CN 201910972611 A CN201910972611 A CN 201910972611A CN 110781653 B CN110781653 B CN 110781653B
- Authority
- CN
- China
- Prior art keywords
- chart
- user
- animation
- container
- vue
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 35
- 230000003993 interaction Effects 0.000 claims abstract description 35
- 238000004806 packaging method and process Methods 0.000 claims abstract description 32
- 238000004590 computer program Methods 0.000 claims abstract description 22
- 238000012545 processing Methods 0.000 claims abstract description 20
- 230000000694 effects Effects 0.000 claims description 64
- 238000009877 rendering Methods 0.000 claims description 18
- 230000000750 progressive effect Effects 0.000 claims description 10
- 238000010276 construction Methods 0.000 claims description 9
- 230000000007 visual effect Effects 0.000 claims description 4
- 230000002452 interceptive effect Effects 0.000 claims description 2
- 230000008569 process Effects 0.000 abstract description 9
- 238000005516 engineering process Methods 0.000 abstract description 3
- 230000007246 mechanism Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 7
- 230000006399 behavior Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了一种利用vue绘制svg图表的方法、装置、计算机设备和存储介质，方法包括：搭建vue框架；分别封装图表基础组件、图表容器；定义图表基础组件、图表容器各自的控制参数；根据用户图表样式需求配置图表基础组件和图表容器；封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并展示；根据交互请求处理图表。装置包括框架搭建单元、图标库建立单元、参数定义单元、图表组件配置单元、图表构建单元以及交互单元。计算机设备和存储介质通过执行计算机程序能够实现上述方法过程。本发明提供封装、提供定制化机制，以应对不同业务场景，提高了图表的自由度、可扩展性和复用性，且更符合目前工程技术体系，易于理解和开发。
Description
技术领域
本发明属于图表制作技术领域，特别涉及一种利用vue绘制svg图表的方法、装置、计算机设备和存储介质。
背景技术
Vue中展示图标，一般都是会用三方库如echarts、g2等来实现，这些三方库并不能与很好的与Vue结合，主要表现在四点：1、需要拿到一个dom元素，在用三方库对dom元素做处理，这违背了Vue不直接操作dom的理念。2、不能通过直接修改数据这种Vue的方式来更新图表，需要手动调用它们提供的api来更新图表。3、这些三方库都是配置化渲染一张图表，配置信息太多，难以理解，并且不能如Vue的模板一样直观反映内容的结构。4、这些库没有提供一种直观的方式来让用户添加自己内容，扩展报表展示内容，只能使用在他们提供的结构基础上做修改。
发明内容
本发明的目的在于提供一种具有较高自由度、定制化能力和扩展性的绘制svg图表的方法、装置、计算机设备和存储介质，用户可以根据自己的需求自定义快速绘制图表。
实现本发明目的的技术解决方案为：一种利用vue绘制svg图表的方法，包括以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据所述交互请求处理所述图表。
进一步地，所述接收用户图表样式需求，根据所述需求配置图表基础组件和图表容器，包括：
所述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
所述用户图表样式需求为自定义图表样式，配置所述控制参数构建新的图表基础组件和新的图表容器，并在所述新的图表基础组件之间插入自定义元素。
进一步地，在所述将该图表展示给用户之前，还包括：根据用户图表动画需求，配置图表动画效果，对图表所在视区进行渲染。
进一步地，所述根据用户图表动画需求，配置图表动画效果，包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
所述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；所述用户图表动画需求为自定义图表动画效果，配置所述图表动画效果的控制参数构建新的图表动画效果。
进一步地，根据所述交互请求处理所述图表的过程包括：
分析交互请求的对象及请求信息，所述对象包括图表基础组件、图表容器以及图表数据；所述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；
根据上述分析获得的交互请求的对象及请求信息，对所述图表进行处理。
一种利用vue绘制svg图表的装置，该装置包括：
框架搭建单元，用于搭建渐进式vue框架；
图标库建立单元，用于分别封装若干图表基础组件和若干图表容器，由此构建图标库；
参数定义单元，用于定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
图表组件配置单元，用于根据用户图表样式需求，根据图标库建立单元和参数定义单元配置图表基础组件和图表容器，并封装配置后的图表基础组件和图表容器形成图表组件；
图表构建单元，用于根据所述图表组件以及图表数据构建图表，并将该图表展示给用户；
交互单元，用于根据用户图表交互请求处理所述图表。
进一步地，该装置还包括图表渲染单元，用于对所述图表构建单元构建的图表进行动态效果渲染后展示给用户。
进一步地，所述参数定义单元还用于定义所述图表渲染单元的控制参数。
一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行所述计算机程序时实现以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据所述交互请求处理所述图表。
一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据所述交互请求处理所述图表。
本发明与现有技术相比，其显著优点为：1)提供了图表封装，降低了用户制作图表的门槛且能实现快速绘制图表，减少了工作量，提高了开发效率；2)提供了定制化机制，以应对不同业务场景，使得用户根据自己的需求采用基础组件或开发自定义的组件封装图表，并且可以在组件之间插入自定义的元素，具有较高的自由度、定制化能力和扩展性，同时提高了图表的复用性、降低维护成本；3)利用vue绘制图表，实时性更高；4)图表的组装形式更符合目前工程技术体系，易于理解和开发，且提高了开发代码的可维护性。
下面结合附图对本发明作进一步详细描述。
附图说明
图1为本发明一个实施例中利用vue绘制svg图表的方法流程图。
图2为本发明一个实施例中用户需要展示的折线图。
图3为本发明一个实施例中利用vue绘制svg图表的装置结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
在一个实施例中，结合图1，提供了一种利用vue绘制svg图表的方法，该方法包括以下步骤：
步骤S01、搭建渐进式vue框架；
步骤S02、分别封装若干图表基础组件和若干图表容器，由此构建图标库；
步骤S03、定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；
步骤S04、接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；
步骤S05、封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
步骤S06、接收用户的图表交互请求，根据上述交互请求处理上述图表。
上述利用vue绘制svg图表的方法中，提供了基础组件封装并定义了控制参数，用户可以根据需求直接使用基础组件或开发自己的组件，封装出图表。这降低了用户制作图表的门槛，提升了开发效率，也提高了图表的复用性、降低维护成本。利用该方法图表的组装形式更符合目前工程技术体系，易于理解和开发，且提高了开发代码的可维护性。
进一步地，在其中一个实施例中，上述封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。
采用本实施例的方案，可以通过简单分析现有图表资料方便快捷的封装出图表基础组件，复杂度比较低，任何不熟悉具体图表绘制的人员也可以完成该方案。
进一步地，在其中一个实施例中，上述控制参数用于改变图表基础组件或图表容器的结构、样式和或行为。
采用本实施例的方案，可以同时改变结构、样式、行为中的一种或多种，由此用户可以完全自定义开发封装图表的组件，没有任何约束，丰富了图表的各异性。
进一步地，在其中一个实施例中，上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：
上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。
采用本实施例的方案，可以适用于各种业务场景，也可以适用于不同等级的用户，降低用户制作图表的门槛，也可以满足用户的各种需求，提高图表的自由度、扩展性。
进一步地，在其中一个实施例中，在上述将图表展示给用户之前，还包括：对图表所在视区进行渲染。
采用本实施例的方案，可以适用于各种业务场景，且提高了可视化效果。
进一步地，在其中一个实施例中，在上述对图表所在视区进行渲染之前，还包括：根据用户图表动画需求，配置图表动画效果。
进一步优选地，在其中一个实施例中，上述根据用户图表动画需求，配置图表动画效果，过程包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。
采用本实施例的方案，可以适用于各种业务场景，也可以满足用户的各种个性化动画效果要求，增强图表展示的效果。
进一步地，在其中一个实施例中，上述根据交互请求处理图表的过程包括：
分析交互请求的对象及请求信息，上述对象包括图表基础组件、图表容器以及图表数据；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；
根据上述分析获得的交互请求的对象及请求信息，对上述图表进行处理。
采用本实施例的方案，用户只需通过修改控制参数实现对图表结构、样式和行为的更改，提高了图表的可复用性，简单易操作。
进一步地，在一个实施例中，用户需要展示某些数据对应的折线图，具体展示过程为：
使用者引入封装的常用折线图容器、常用图例、常用坐标轴和常用折线；
按照折线图容器>(图例,横坐标轴，纵坐标轴，折线，折线，折线)的结构编写Vue模板，基础常用组件的位置可以随意；
向容器组件传入宽高和折线区域位置，控制图标大小；向折线组件传入需要展示的字段值，以及字段值是否叠加展示，以此控制组件内容、结构和样式；向图例传入大小和方向等参数，传入位置信息参数，避免错位、重叠等布局问题。
根据需要，监听窗口改变事件，修改图表大小；
将数据输入容器组件，报表展示如图2所示。
在一个实施例中，如图3所示，提供了一种利用vue绘制svg图表的装置，包括：
框架搭建单元101，用于搭建渐进式vue框架；
图标库建立单元102，用于分别封装若干图表基础组件和若干图表容器，由此构建图标库；
参数定义单元103，用于定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；
图表组件配置单元104，用于根据用户图表样式需求，根据图标库建立单元和参数定义单元配置图表基础组件和图表容器，并封装配置后的图表基础组件和图表容器形成图表组件；
图表构建单元105，用于根据上述图表组件以及图表数据构建图表，并将该图表展示给用户；
交互单元107，用于根据用户图表交互请求处理上述图表。
进一步地，在其中一个实施例中，该装置还包括图表渲染单元106，用于对图表构建单元构建的图表进行动态效果渲染后展示给用户。
进一步地，在其中一个实施例中，该装置还包括图表动画配置单元108，用于在上述图表渲染单元渲染图表的过程中提供动画效果。
进一步地，在其中一个实施例中，上述参数定义单元103还用于定义图表动画配置单元的控制参数。
关于利用vue绘制svg图表的装置的具体限定可以参见上文中对于利用vue绘制svg图表的方法的限定，在此不再赘述。上述利用vue绘制svg图表的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据上述交互请求处理上述图表。
进一步地，在其中一个实施例中，处理器执行计算机程序实现封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。
进一步地，在其中一个实施例中，处理器执行计算机程序实现上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：
上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。
进一步地，在其中一个实施例中，处理器执行计算机程序实现将图表展示给用户之前，还需实现对图表所在视区进行渲染。
进一步地，在其中一个实施例中，处理器执行计算机程序实现对图表所在视区进行渲染之前，还需实现包括：根据用户图表动画需求，配置图表动画效果，过程包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。
进一步地，在其中一个实施例中，处理器执行计算机程序实现上述根据交互请求处理图表的过程包括：
分析交互请求的对象及请求信息，上述对象包括图表基础组件、图表容器以及图表数据；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；
根据上述分析获得的交互请求的对象及请求信息，对上述图表进行处理。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义上述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据上述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据上述交互请求处理上述图表。
进一步地，在其中一个实施例中，计算机程序被处理器执行实现封装若干图表基础组件具体包括：依据现有图表，提取公共基础部分，由此封装若干图表基础组件，包括图例、坐标轴、冒泡框、线柱体、折线等。
进一步地，在其中一个实施例中，计算机程序被处理器执行实现上述接收用户图表样式需求，根据上述需求配置图表基础组件和图表容器，包括：
上述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
上述用户图表样式需求为自定义图表样式，配置上述控制参数构建新的图表基础组件和新的图表容器，并在上述新的图表基础组件之间插入自定义元素。
进一步地，在其中一个实施例中，计算机程序被处理器执行实现将图表展示给用户之前，还需实现对图表所在视区进行渲染。
进一步地，在其中一个实施例中，计算机程序被处理器执行实现对图表所在视区进行渲染之前，还需实现包括：根据用户图表动画需求，配置图表动画效果，过程包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
上述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；上述用户图表动画需求为自定义图表动画效果，配置上述图表动画效果的控制参数构建新的图表动画效果。
进一步地，在其中一个实施例中，计算机程序被处理器执行实现根据交互请求对图表进行相应的处理具体为：
分析交互请求的对象，上述对象包括图表基础组件、图表容器以及数据；
针对交互请求的对象以及具体的请求信息，设置该对象对应的控制参数以实现依请求对图表进行处理；上述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新数据。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (7)
1.一种利用vue绘制svg图表的方法，其特征在于，包括以下步骤：
搭建渐进式vue框架；
分别封装若干图表基础组件和若干图表容器，由此构建图标库；
定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
接收用户图表样式需求，根据所述需求分别配置图表基础组件和图表容器；
封装所配置的图表基础组件和图表容器，并将图表数据传入图表容器，构建图表并将该图表展示给用户；
接收用户的图表交互请求，根据所述交互请求处理所述图表；
在所述将该图表展示给用户之前，还包括：根据用户图表动画需求，配置图表动画效果，对图表所在视区进行渲染；
所述根据用户图表动画需求，配置图表动画效果，包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
所述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；所述用户图表动画需求为自定义图表动画效果，配置所述图表动画效果的控制参数构建新的图表动画效果。
2.根据权利要求1所述的利用vue绘制svg图表的方法，其特征在于，所述接收用户图表样式需求，根据所述需求配置图表基础组件和图表容器，包括：
所述用户图表样式需求为常规图表样式，选取图标库中的图表基础组件和图表容器；
所述用户图表样式需求为自定义图表样式，配置所述控制参数构建新的图表基础组件和新的图表容器，并在所述新的图表基础组件之间插入自定义元素。
3.根据权利要求1所述的利用vue绘制svg图表的方法，其特征在于，根据所述交互请求处理所述图表的过程包括：
分析交互请求的对象及请求信息，所述对象包括图表基础组件、图表容器以及图表数据；所述请求信息包括修改图表基础组件的控制参数、修改图表容器的控制参数以及更新图表数据；
根据上述分析获得的交互请求的对象及请求信息，对所述图表进行处理。
4.一种利用vue绘制svg图表的装置，其特征在于，包括：
框架搭建单元，用于搭建渐进式vue框架；
图标库建立单元，用于分别封装若干图表基础组件和若干图表容器，由此构建图标库；
参数定义单元，用于定义所述图标库中每个图表基础组件和每个图表容器各自的控制参数；
图表组件配置单元，用于根据用户图表样式需求，根据图标库建立单元和参数定义单元配置图表基础组件和图表容器，并封装配置后的图表基础组件和图表容器形成图表组件；
图表构建单元，用于根据所述图表组件以及图表数据构建图表，并将该图表展示给用户；
交互单元，用于根据用户图表交互请求处理所述图表；
该装置还包括图表渲染单元，用于对所述图表构建单元构建的图表进行动态效果渲染后展示给用户；所述根据用户图表动画需求，配置图表动画效果，包括：
封装常规图表动画效果以及通过FLIP方案新增的图表动画效果；
定义上述图表动画效果的控制参数；
所述用户图表动画需求为常规的图表动画效果，选取上述封装的图表动画效果；所述用户图表动画需求为自定义图表动画效果，配置所述图表动画效果的控制参数构建新的图表动画效果。
5.根据权利要求4所述的利用vue绘制svg图表的装置，其特征在于，所述参数定义单元还用于定义所述图表渲染单元的控制参数。
6.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至3中任一项所述方法的步骤。
7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至3中任一项所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910972611.5A CN110781653B (zh) | 2019-10-14 | 2019-10-14 | 利用vue绘制svg图表的方法、装置、计算机设备和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910972611.5A CN110781653B (zh) | 2019-10-14 | 2019-10-14 | 利用vue绘制svg图表的方法、装置、计算机设备和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110781653A CN110781653A (zh) | 2020-02-11 |
| CN110781653B true CN110781653B (zh) | 2023-06-30 |
Family
ID=69385255
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910972611.5A Active CN110781653B (zh) | 2019-10-14 | 2019-10-14 | 利用vue绘制svg图表的方法、装置、计算机设备和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110781653B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111427574B (zh) * | 2020-03-17 | 2024-01-30 | 深圳市震有软件科技有限公司 | 列表自动翻页轮播组件实现方法及装置、设备、介质 |
| CN112149395A (zh) * | 2020-09-27 | 2020-12-29 | 建信金融科技有限责任公司 | 一种图表生成方法及装置 |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109471900A (zh) * | 2018-11-15 | 2019-03-15 | 中译语通科技股份有限公司 | 图表类数据自定义动作数据交互方法及系统、计算机程序 |
-
2019
- 2019-10-14 CN CN201910972611.5A patent/CN110781653B/zh active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109471900A (zh) * | 2018-11-15 | 2019-03-15 | 中译语通科技股份有限公司 | 图表类数据自定义动作数据交互方法及系统、计算机程序 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110781653A (zh) | 2020-02-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP5051466B2 (ja) | フィールド機器管理装置、フィールド機器管理システム、コンピュータプログラム、記録媒体 | |
| CN107766043B (zh) | 一种基于大屏数据可视化的实现方法及系统 | |
| CN110781653B (zh) | 利用vue绘制svg图表的方法、装置、计算机设备和存储介质 | |
| CN105094832A (zh) | 一种所见即所得的动态生成用户界面的方法和系统 | |
| CN111984902A (zh) | 可视化页面配置方法、系统、计算机设备和存储介质 | |
| US20160349931A1 (en) | Responsive user interface for an industrial environment | |
| CN108287718A (zh) | 基于游戏引擎的特效编辑方法及装置 | |
| CN105549817A (zh) | 字体包的生成方法、装置和图形的展示方法、装置 | |
| CN111936966A (zh) | 用于创建图形内容的设计系统 | |
| CN113326044A (zh) | 一种基于控件库的开发方法、系统及存储介质 | |
| CN114385940A (zh) | 一种数据可视化方法、装置、设备及介质 | |
| Jamro et al. | IEC 61131-3 programmable human machine interfaces for control devices | |
| CN110221832B (zh) | 一种恢复系统用户界面呈现控制方法、系统及存储介质 | |
| CN112783660B (zh) | 虚拟场景中的资源处理方法、装置及电子设备 | |
| CN112188292B (zh) | 一种基于安卓操作系统的电视桌面构建方法 | |
| CN110908655B (zh) | 换肤方法、装置、计算机设备和可读存储介质 | |
| CN106293679A (zh) | 一种元素名称冲突处理方法及装置 | |
| KR19990013904A (ko) | 빌딩자동화시스템의 실시간정보 관측 및 제어방법과 그 장치 | |
| CN114489645A (zh) | 一种基于Vue和Element-UI的表单生成构造方法、系统和存储介质 | |
| CN113449502A (zh) | 基于动态数据的文档生成方法与系统 | |
| US11803179B2 (en) | SCADA web HMI system | |
| CN111079382A (zh) | 基于mvvm模式的表单渲染方法及系统 | |
| CN112486378A (zh) | 图形生成方法、装置、终端及存储介质 | |
| CN110866379A (zh) | 数据可视化图表库系统 | |
| KR101745287B1 (ko) | 웹 기반 hmi의 이미지 편집 장치 및 그 방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address |
Address after: No.1-1 Suning Avenue, Xuzhuang Software Park, Xuanwu District, Nanjing, Jiangsu Province, 210000 Patentee after: Jiangsu Suning cloud computing Co.,Ltd. Country or region after: China Address before: No.1-1 Suning Avenue, Xuzhuang Software Park, Xuanwu District, Nanjing, Jiangsu Province, 210000 Patentee before: Suning Cloud Computing Co.,Ltd. Country or region before: China |
|
| CP03 | Change of name, title or address | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240407 Address after: 210000, 1-5 story, Jinshan building, 8 Shanxi Road, Nanjing, Jiangsu. Patentee after: SUNING.COM Co.,Ltd. Country or region after: China Address before: No.1-1 Suning Avenue, Xuzhuang Software Park, Xuanwu District, Nanjing, Jiangsu Province, 210000 Patentee before: Jiangsu Suning cloud computing Co.,Ltd. Country or region before: China |
|
| TR01 | Transfer of patent right |