CN107730572A - 一种图表渲染方法及装置 - Google Patents
一种图表渲染方法及装置 Download PDFInfo
- Publication number
- CN107730572A CN107730572A CN201710930588.4A CN201710930588A CN107730572A CN 107730572 A CN107730572 A CN 107730572A CN 201710930588 A CN201710930588 A CN 201710930588A CN 107730572 A CN107730572 A CN 107730572A
- Authority
- CN
- China
- Prior art keywords
- chart
- configuration
- item
- rendered
- data item
- 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.)
- Granted
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 24
- 238000000034 method Methods 0.000 claims abstract description 14
- 238000004590 computer program Methods 0.000 claims description 12
- 238000012986 modification Methods 0.000 claims description 12
- 230000004048 modification Effects 0.000 claims description 12
- 238000012546 transfer Methods 0.000 claims description 4
- 238000012423 maintenance Methods 0.000 abstract description 9
- 238000011161 development Methods 0.000 abstract description 7
- 230000006870 function Effects 0.000 description 9
- 230000008569 process Effects 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 230000018109 developmental process Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 6
- 238000013079 data visualisation Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005538 encapsulation Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000005194 fractionation Methods 0.000 description 2
- 230000002123 temporal effect Effects 0.000 description 2
- 241001269238 Data Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/904—Browsing; Visualisation therefor
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种图表渲染方法及装置，应用于WEB技术领域,该方法包括：获取当前页面待渲染图表的图表配置项和图表数据项；拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；图表数据项插入至M类图表配置对象中对应的图表配置对象，以形成M个选项；组合M个选项为同一ECharts标准配置对象；将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染图表，从而本发明解决了现有技术开发效率低且后期维护难度大的技术问题。
Description
技术领域
本发明涉及WEB技术领域，尤其涉及一种图表渲染方法及装置。
背景技术
ECharts(Enterprise Charts，商业级数据图表)是目前使用比较普遍的开源图表类库，是一款基于Javascript的数据可视化图表库，提供直观，生动，可交互，ECharts提供大量常用的数据可视化图表，可个性化定制的数据可视化图表。
但是，由于ECharts提供的API众多，图表配置项较为复杂且文档，因此，开发效率低，且后期维护难度大。
发明内容
本发明实施例通过提供一种图表渲染方法及装置，解决了生成ECharts图表的开发效率低，且后期维护复杂度的技术问题。
第一方面，本发明实施例提供一种图表渲染方法，包括：
获取当前页面待渲染图表的图表配置项和图表数据项；
拆分所述当前页面待渲染图表的图表配置项为M类图表配置对象，所述M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；
所述图表数据项插入至所述M类图表配置对象中对应的图表配置对象，以形成M个选项；
组合所述M个选项为同一ECharts标准配置对象；
将所述ECharts标准配置对象传递给所述ReactECharts组件，使得所述ReactECharts组件根据所述ECharts标准配置对象渲染图表。
可选的，所述获取当前页面待渲染图表的图表配置项和图表数据项，包括：
通过预置的图表配置项接口，从web后端获取所述当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息；
通过预置的图表数据项接口，从所述web后端获取所述当前页面待渲染图表的图表数据项，所述图表数据项接口与所述图表配置项接口相互独立。
可选的，所述M类图表配置对象包括：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息。
可选的，通过预置的图表配置项接口从web后端获取所述当前页面待渲染图表的图表配置项，包括：
调用所述图表配置项接口，以与所述web后端相同的图表配置项数据结构和配置项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表配置项。
可选的，通过预置的图表数据项接口从所述web后端获取所述当前页面待渲染图表的图表数据项，包括：
调用所述图表数据项接口，以与所述web后端相同的数据项数据结构和数据项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表数据项。
可选的，从所述web后端获取所述当前页面待渲染图表的图表数据项，包括：
从所述当前页面待渲染图表的图表配置项中解析出所含有的图表配置信息；
从所述web后端获取与所解析出的图表配置信息对应的图表数据项。
可选的，在将所述ECharts标准配置对象传递给所述ReactECharts组件之后，所述方法还包括：
存储所述M类图表配置对象于所述ReactECharts组件的用于组件内部状态的对象中；
在检测到所述M类图表配置对象中的至少一类图表配置对象存在修改，根据修改后的图表配置对象更新当前显示图表。
第二方面，本发明实施例提供一种图表渲染装置，包括：
图表信息获取单元，用于获取当前页面待渲染图表的图表配置项和图表数据项；
配置拆分单元，用于拆分所述当前页面待渲染图表的图表配置项为M类图表配置对象，所述M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；
数据插入单元，用于所述图表数据项插入至所述M类图表配置对象中对应的图表配置对象，以形成M个选项；
组合单元，用于组合所述M个选项为同一ECharts标准配置对象；
传递单元，用于将所述ECharts标准配置对象传递给所述ReactECharts组件，使得所述ReactECharts组件根据所述ECharts标准配置对象渲染图表。
可选的，所述图表信息获取单元，包括：
第一获取子单元，用于通过预置的图表配置项接口，从web后端获取所述当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息；
第二获取子单元，用于通过预置的图表数据项接口，从所述web后端获取所述当前页面待渲染图表的图表数据项，所述图表数据项接口与所述图表配置项接口相互独立。
可选的，所述M类图表配置对象包括：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息。
可选的，所述第一获取子单元，具体用于：
调用所述图表配置项接口，以与所述web后端相同的图表配置项数据结构和配置项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表配置项。
可选的，所述第二获取子单元，具体用于：
调用所述图表数据项接口，以与所述web后端相同的数据项数据结构和数据项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表数据项。
可选的，所述第二获取子单元，具体用于：
从所述当前页面待渲染图表的图表配置项中解析出所含有的图表配置信息；
从所述web后端获取与所解析出的图表配置信息对应的图表数据项。
可选的，所述装置还包括：
存储单元，用于存储所述M类图表配置对象于所述ReactECharts组件的用于组件内部状态的对象中；
更新单元，用于在检测到所述M类图表配置对象中的至少一类图表配置对象存在修改，根据修改后的图表配置对象更新当前显示图表。
第三方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面中任一实施方式所述的步骤。
第四方面，本发明实施例提供了一种计算机设备，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现第一方面中任一实施方式所述的步骤。
本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：
获取当前页面待渲染图表的图表配置项和图表数据项，拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，图表数据项插入至M类图表配置对象中对应的图表配置对象以形成M个选项；组合M个选项为同一ECharts标准配置对象；将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染图表。从而对ECharts图表渲染所需的复杂配置进行拆封、归类、最后封装生成一个ECharts标准配置对象，达到通用和简化开发流程的目的。避免了生成ECharts图表的配置复杂，从而解决了生成ECharts图表的开发效率低，且后期维护难度的技术问题。提高了生成ECharts图表的开发效率和后期维护复杂度。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的图表渲染方法的流程图；
图2为本发明实施例提供的图表渲染装置的程序模块图；
图3为本发明实施例提供的计算机可读存储介质的结构示意图；
图4为本发明实施例提供的计算机设备的结构示意图。
具体实施方式
本发明实施例通过提供一种图表渲染方法及装置，解决了现有技术开发效率低且后期维护难度大的技术问题。
为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。
参考图1所示，本发明实施例提供的图表渲染方法，应用于web前端，该方法包括如下步骤：
步骤S101、获取当前页面待渲染图表的图表配置项和图表数据项。
在本实施例中，图表配置项为用于形成图表框架，图表数据项用于填入图表框架中。
具体来讲，图表配置项可以含有：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息、标题、图例、时间轴、值域选择、漫游缩放组件、直角坐标系内绘图网格等等。
具体的，分开获取图表配置项和图表数据项。在一具体实施方式中，步骤S101包括如下步骤S1011和S1012：
步骤S1011、通过预置的图表配置项接口从web后端获取当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息。
具体的，根据实际情况不同，从web后端获取的图表配置项为一个或多个。以坐标轴图表配置项为例，可以包括如下多个图表配置信息中的至少一个：坐标轴名字位置、坐标轴文字样式、数值起始和结束两端空白策略、分割段数、坐标轴线、分隔线。
需要说明的是，这里仅为举例说明，在具体实施过程中，坐标轴图表配置项还可以包括更多个图表配置信息。
步骤S1012、通过预置的图表数据项接口从web后端获取当前页面待渲染图表的图表数据项。
具体的，图表数据项接口与图表配置项接口为相互独立的接口。需要说明的是，步骤S1011与步骤S1012可以独立执行,通过将用于获取图表配置项的图表配置项接口和用于获取数据项的图表数据项接口单独执行配置项和数据项，而不是通过同一接口从web后端获取图表配置项和图表数据项，使整个应用的逻辑更为清晰。
在一优选的实施方式中，分先后执行步骤S1011与步骤S1012。具体来讲，实现流程如下：
S1011’：通过预置的图表配置项接口从web后端获取当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息。
S1012’：通过预置的图表数据项接口从web后端获取与当前页面待渲染图表图表配置项所对应的图表数据项。
具体的，在步骤S1012’的一种具体实施方式为：从当前页面待渲染图表的图表配置项中解析出所含有的图表配置信息，从web后端获取与所解析出的图表配置信息对应的图表数据项。
先根据从图表配置项中解析出的图表配置对象指定对应的图表数据项；再通过预置的图表数据项接口从web后端请求所指定的图表数据项。
在具体实施过程中，根据图表配置项中所含有图表配置信息的情况不同，可以是为获取所有图表数据项，也可以是为获取所有图表数据项中的特定一项或多项。
举例来讲，其中的一个图表配置项A在web后端有K个图表配置信息而言，如果从web后端获取图表配置项A的K个图表配置信息，则获取与图表配置项A对应的所有图表数据项，如果从web后端获取图表配置项A的一个图表配置信息A1，则仅从web后端获取与图表配置项A中的图表配置信息A1对应的图表数据项，依次类推。
举例来讲，在从web后端获取的坐标轴图表配置项中仅含有与坐标轴X轴相关的各个图表配置信息，而没有与坐标轴Y轴相关的各个图表配置信息，则通过预置的图表数据项接口从web后端获取与当前页面待渲染图表的图表配置项中的图表配置信息对应的图表数据项。
通过分先后获取图表配置项和对应的图表数据项使整个设计更为灵活，特别是对于同一个图表配置项中包含有多个图表配置信息的情况，可根据具体需求的图表配置信息来指定所要获取的图标数据项中，从而满足不同的业务场景。
对于图表配置项接口而言，可以设置为：
/monitor/frontend/draw/dashboard/getConfig
从而通过/monitor/frontend/draw/dashboard/getConfig接口统一获取每个图表配置项，而对于图表数据项接口而言，可以设置为/monitor/frontend/draw/dataPoints，从而通过/monitor/frontend/draw/dataPoints接口统一获取每个图表数据项。
具体的，调用图表配置项接口，以与web后端相同的图表配置项数据结构和配置项成员信息结构，从web后端获取当前页面待渲染图表的图表配置项。
在具体实施过程中，图表配置项数据结构和配置项成员信息结构具体如下：
{code:图表配置项接口的返回状态,
data:图表配置项数据，
msg:图表配置项接口返回的描述信息}
具体的，调调用图表数据项接口，以与web后端相同的数据项数据结构和数据项成员信息结构，从web后端获取当前页面待渲染图表的图表数据项。
在具体实施过程中，数据项数据结构和数据项成员信息结构可以如下：
{
code:图表数据项接口的返回状态,
data:图表数据项的数据数组，
msg:图表数据项接口返回的描述信息
}
通过与web后端约定了图表配置项和图表数据项各自的数据结构、成员信息结构，能减少后期的沟通成本和维护成本，并且利于后序的图表配置项和图表数据项的处理。
在步骤S101之后，接着执行步骤S102、拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数。
具体的，将从web后端获取的图表配置项传递给同一ES6(ECMAScript6，是JavaScript语言的下一代标准)类库，在同一ES6类库中拆分当前页面待渲染图表的图表配置项为对应于ReactECharts组件的M个属性的M类图表配置对象。
具体来讲，通过同一ES6类库创建与ReactECharts组件的M个属性各自对应的类，则需要创建M个ES6类，在M个ES6类中的每个ES6类各自解析并生成M类图表配置对象中的一类图表配置对象。
具体的，拆分出的M类图表配置对象包括：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息中的至少一种。
可以创建有对应于ECharts组件的X轴属性的一个ES6类，比如为Xaxis类，则Xaxis类解析并生成的图表配置对象为：坐标轴X轴。也可以创建有对应于ECharts组件的Y轴属性的一个ES6类，比如为Yaxis类，则Yaxis类解析并生成的图表配置对象为：坐标轴Y轴。可以创建有对应于ECharts组件的数据项属性的一个ES6类，比如为Series类，则Series类解析并生成的图表配置对象为：数据项信息。可以创建有对应于ECharts组件的提示属性的一个ES6类，比如为tooltip类，则tooltip类解析并生成数据提示信息。
具体的，基于同一ES6类库中的对应ES6类导出的getOption函数获得生成的图表配置对象。比如，同一ES6类库中的Xaxis类的Xaxis.getOption函数获得生成的坐标轴X轴，Yaxis类的yAxis.getOption函数获得生成的坐标轴Y轴。
S103、当前页面待渲染图表的图表数据项插入至M类图表配置对象中对应的图表配置对象，以形成M个选项。
需要说明的是，M个选项之间为离散。下面以M类配置项对象中的坐标轴X轴、坐标轴Y轴的这两个选项的形成过程进行举例描述，其他类图标配置与之基本相同:
创建有对应于ECharts组件的X轴属性的Xaxis类，将图表数据项中对应的X轴相关数据传递给Xaxis类并生成实例，以形成X轴坐标信息，记为xAxis。比如，X轴相关数据可以为时间信息，则以X轴数据为时间信息为例的实现方式如下：const xAxis＝new Xaxis(this.time)。
创建有对应于ECharts组件的Y轴属性的Yaxis类，将数据项中对应的Y轴相关数据传递给Yaxis类并生成实例，以形成Y轴坐标信息，记为yAxis，实现方式如下：const yAxis＝new Yaxis(this.config)。
通过本步骤完成了各个ES6类分别根据数据项接口返回的对应的图表数据项生成不同的选项。
通过上述步骤S102～S103将图表配置项拆分到具体的处理单元中并封装成ES6，这样不仅保证了功能复用，还能使整个解决方案更为灵活，例如在特定的场景中，不需要X轴坐标信息或者Y轴坐标信息，那么只需要同一ES6类库这个统一入口中配置是否使引入对应的类即可，做到高度定制化了，满足不同的业务场景。最后将具体的功能模块拆分实现还使得整个功能的实现更为清晰，维护和功能的扩展更为方便和简单。
在步骤S103之后，接着执行步骤S104：组合M个选项为同一ECharts标准配置对象。
具体来讲，通过将M个选项中各自的配置信息和数据信息传递给Options类，然后调用Options类的getOptions方法就可以获取到ECharts标准配置对象，将ECharts标准配置对象传递给ReactEcharts组件，实现方式可以如下：
const options＝(new Options(graphData.config,graphData.data)).getOptions()；
在步骤S103之后，接着执行步骤S105、将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染出当前页面待渲染图表。
ReactECharts组件为基于现有的ECharts组件封装的React组件，在本实施例中，React为用于构建用户界面的JAVASCRIPT库，React主要用于构建用户界面UI。
进一步的，为了动态更新图表，在将ECharts标准配置对象传递给ReactECharts组件之后，存储M类图表配置对象于ReactECharts组件的用于组件内部状态的对象中，从而能够对配置信息进行修改，就可以在图表的配置信息修改的时候达到动态更新图表。
在存储M类图表配置对象于ReactECharts组件的用于组件内部状态的对象中之后，还包括：存储M类图表配置对象于ReactECharts组件的用于组件内部状态的对象中；在检测到M类图表配置对象中的至少一类图表配置对象存在修改，根据修改后的图表配置对象更新当前显示图表。
由于React的功能特性，任何对存储的M类图表配置对象的修改更新都将使页面重绘，一旦存储的M类图表配置对象中的至少一类被更改了，图表将被更新，因此对应的图表数据项将被重新从web后端获取，进而对应的图表配置对象将被重新生成，因此达到了ECharts图表动态、自动更新的目的。
基于同一发明构思，本发明实施例提供一种图表渲染装置，参考图2所示，包括：
图表信息获取单元201，用于获取当前页面待渲染图表的图表配置项和图表数据项；
配置拆分单元202，用于拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；
数据插入单元203，用于图表数据项插入至M类图表配置对象中对应的图表配置对象，以形成M个选项；
组合单元204，用于组合M个选项为同一ECharts标准配置对象；
传递单元205，用于将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染图表。
可选的，图表信息获取单元201，包括：
第一获取子单元，用于通过预置的图表配置项接口，从web后端获取当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息；
第二获取子单元，用于通过预置的图表数据项接口，从web后端获取当前页面待渲染图表的图表数据项，图表数据项接口与图表配置项接口相互独立。
可选的，M类图表配置对象包括：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息。
可选的，第一获取子单元，具体用于：
调用图表配置项接口，以与web后端相同的图表配置项数据结构和配置项成员信息结构，从web后端获取当前页面待渲染图表的图表配置项。
可选的，第二获取子单元，具体用于：
调用图表数据项接口，以与web后端相同的数据项数据结构和数据项成员信息结构，从web后端获取当前页面待渲染图表的图表数据项。
可选的，第二获取子单元，具体用于：
从当前页面待渲染图表的图表配置项中解析出所含有的图表配置信息；
从web后端获取与所解析出的图表配置信息对应的图表数据项。
可选的，装置还包括：
存储单元，用于存储M类图表配置对象于ReactECharts组件的用于组件内部状态的对象中；
更新单元，用于在检测到M类图表配置对象中的至少一类图表配置对象存在修改，根据修改后的图表配置对象更新当前显示图表。
本领域所属技术人员能够了解本实施例中装置的具体实施方式以及其各种变化形式，所以在此对于该装置如何实现本发明图表渲染方法实施例不再详细介绍。只要本领域所属技术人员实施本发明中图表渲染方法实施例所采用的装置，都属于本发明所欲保护的范围。
基于同一发明构思，参考图3所示，本发明实施例提供了一种计算机可读存储介质301，其上存储有计算机程序302，该程序302被处理器执行时实现前述图表渲染方法实施例中的任一实施方式的步骤。
基于同一发明构思，本发明实施例提供了一种计算机设备400，参考图4所示，包括存储器410、处理器420及存储在存储器410上并可在处理器420上运行的计算机程序411，处理器420执行程序411时实现前述图表渲染方法中任一实施方式的步骤。
本发明提供的一个或多个实施例，至少具有如下技术效果或优点：
获取当前页面待渲染图表的图表配置项和图表数据项，拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，图表数据项插入至M类图表配置对象中对应的图表配置对象以形成M个选项；组合M个选项为同一ECharts标准配置对象；将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染图表。从而对ECharts图表渲染所需的复杂配置进行拆封、归类、最后封装生成一个ECharts标准配置对象，达到通用和简化开发流程的目的。避免了生成ECharts图表的配置复杂，从而解决了生成ECharts图表的开发效率低，且后期维护难度的技术问题。提高了生成ECharts图表的开发效率和后期维护复杂度。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
Claims (10)
1.一种图表渲染方法，其特征在于，包括：
获取当前页面待渲染图表的图表配置项和图表数据项；
拆分所述当前页面待渲染图表的图表配置项为M类图表配置对象，所述M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；
所述图表数据项插入至所述M类图表配置对象中对应的图表配置对象，以形成M个选项；
组合所述M个选项为同一ECharts标准配置对象；
将所述ECharts标准配置对象传递给所述ReactECharts组件，使得所述ReactECharts组件根据所述ECharts标准配置对象渲染图表。
2.如权利要求1所述的图表渲染方法，其特征在于，所述获取当前页面待渲染图表的图表配置项和图表数据项，包括：
通过预置的图表配置项接口，从web后端获取所述当前页面待渲染图表的图表配置项，其中，同一图表配置项中包含至少一个图表配置信息；
通过预置的图表数据项接口，从所述web后端获取所述当前页面待渲染图表的图表数据项，所述图表数据项接口与所述图表配置项接口相互独立。
3.如权利要求1所述的图表渲染方法，其特征在于，所述M类图表配置对象包括：坐标轴X轴、坐标轴Y轴、提示项信息、数据提示信息、工具栏、数据项信息。
4.如权利要求2所述的图表渲染方法，其特征在于，通过预置的图表配置项接口从web后端获取所述当前页面待渲染图表的图表配置项，包括：
调用所述图表配置项接口，以与所述web后端相同的图表配置项数据结构和配置项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表配置项。
5.如权利要求2所述的图表渲染方法，其特征在于，通过预置的图表数据项接口从所述web后端获取所述当前页面待渲染图表的图表数据项，包括：
调用所述图表数据项接口，以与所述web后端相同的数据项数据结构和数据项成员信息结构，从所述web后端获取所述当前页面待渲染图表的图表数据项。
6.如权利要求5所述的图表渲染方法，其特征在于，从所述web后端获取所述当前页面待渲染图表的图表数据项，包括：
从所述当前页面待渲染图表的图表配置项中解析出所含有的图表配置信息；
从所述web后端获取与所解析出的图表配置信息对应的图表数据项。
7.如权利要求1-6中任一所述的图表渲染方法，其特征在于，在将所述ECharts标准配置对象传递给所述ReactECharts组件之后，所述方法还包括：
存储所述M类图表配置对象于所述ReactECharts组件的用于组件内部状态的对象中；
在检测到所述M类图表配置对象中的至少一类图表配置对象存在修改，根据修改后的图表配置对象更新当前显示图表。
8.一种图表渲染装置，其特征在于，包括：
图表信息获取单元，用于获取当前页面待渲染图表的图表配置项和图表数据项；
配置拆分单元，用于拆分所述当前页面待渲染图表的图表配置项为M类图表配置对象，所述M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；
数据插入单元，用于所述图表数据项插入至所述M类图表配置对象中对应的图表配置对象，以形成M个选项；
组合单元，用于组合所述M个选项为同一ECharts标准配置对象；
传递单元，用于将所述ECharts标准配置对象传递给所述ReactECharts组件，使得所述ReactECharts组件根据所述ECharts标准配置对象渲染图表。
9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7中任一权利要求所述的步骤。
10.一种计算机设备，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7中任一权利要求所述的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710930588.4A CN107730572B (zh) | 2017-10-09 | 2017-10-09 | 一种图表渲染方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710930588.4A CN107730572B (zh) | 2017-10-09 | 2017-10-09 | 一种图表渲染方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107730572A true CN107730572A (zh) | 2018-02-23 |
| CN107730572B CN107730572B (zh) | 2021-05-28 |
Family
ID=61208654
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710930588.4A Active CN107730572B (zh) | 2017-10-09 | 2017-10-09 | 一种图表渲染方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107730572B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109712216A (zh) * | 2018-11-30 | 2019-05-03 | 东软集团股份有限公司 | 图表渲染方法、装置、可读存储介质及电子设备 |
| CN113761304A (zh) * | 2021-09-23 | 2021-12-07 | 北京航空航天大学青岛研究院 | 基于动态参数的大数据智慧展示配置方法 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102292719A (zh) * | 2009-01-21 | 2011-12-21 | 微软公司 | 用于基于web的图表可视化的可扩展性 |
| CN105608088A (zh) * | 2014-11-19 | 2016-05-25 | 中国航空工业集团公司西安飞机设计研究所 | 一种基于配置文件的数据库自动创建与数据动态记录方法 |
| CN105653716A (zh) * | 2015-12-31 | 2016-06-08 | 北京奇艺世纪科技有限公司 | 一种基于分类-属性-值的数据库构造方法和构造系统 |
| CN106055535A (zh) * | 2016-06-02 | 2016-10-26 | 深圳市中润四方信息技术有限公司 | 一种图表生成方法及装置 |
| CN106293649A (zh) * | 2015-05-15 | 2017-01-04 | 北京国双科技有限公司 | 渲染图表的方法及装置 |
| CN106575360A (zh) * | 2014-08-21 | 2017-04-19 | 微软技术许可有限责任公司 | 图表数据的增强识别 |
| US20170280264A1 (en) * | 2016-03-22 | 2017-09-28 | Dolby Laboratories Licensing Corporation | Adaptive panner of audio objects |
-
2017
- 2017-10-09 CN CN201710930588.4A patent/CN107730572B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102292719A (zh) * | 2009-01-21 | 2011-12-21 | 微软公司 | 用于基于web的图表可视化的可扩展性 |
| CN106575360A (zh) * | 2014-08-21 | 2017-04-19 | 微软技术许可有限责任公司 | 图表数据的增强识别 |
| CN105608088A (zh) * | 2014-11-19 | 2016-05-25 | 中国航空工业集团公司西安飞机设计研究所 | 一种基于配置文件的数据库自动创建与数据动态记录方法 |
| CN106293649A (zh) * | 2015-05-15 | 2017-01-04 | 北京国双科技有限公司 | 渲染图表的方法及装置 |
| CN105653716A (zh) * | 2015-12-31 | 2016-06-08 | 北京奇艺世纪科技有限公司 | 一种基于分类-属性-值的数据库构造方法和构造系统 |
| US20170280264A1 (en) * | 2016-03-22 | 2017-09-28 | Dolby Laboratories Licensing Corporation | Adaptive panner of audio objects |
| CN106055535A (zh) * | 2016-06-02 | 2016-10-26 | 深圳市中润四方信息技术有限公司 | 一种图表生成方法及装置 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109712216A (zh) * | 2018-11-30 | 2019-05-03 | 东软集团股份有限公司 | 图表渲染方法、装置、可读存储介质及电子设备 |
| CN113761304A (zh) * | 2021-09-23 | 2021-12-07 | 北京航空航天大学青岛研究院 | 基于动态参数的大数据智慧展示配置方法 |
| CN113761304B (zh) * | 2021-09-23 | 2023-11-24 | 北京航空航天大学青岛研究院 | 基于动态参数的大数据智慧展示配置方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107730572B (zh) | 2021-05-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103208046B (zh) | 基于交互式动态流程图的工作流引擎架构方法和系统 | |
| US7610545B2 (en) | Annotations for tracking provenance | |
| CN110507986B (zh) | 动画信息的处理方法和装置 | |
| CN109284180A (zh) | 一种任务调度方法、装置、电子设备及存储介质 | |
| CN106156306A (zh) | 一种模板渲染方法和装置 | |
| CN111459463A (zh) | 算法模块生成方法和线状符号绘制方法 | |
| CN109614565A (zh) | 网页生成方法与装置 | |
| CN109582305B (zh) | 用于移动应用页面元素的编码方法、装置及电子设备 | |
| CN106201224A (zh) | 一种数据批量处理的方法及装置 | |
| CN107729897A (zh) | 一种文本操作方法、装置及终端 | |
| CN107730572A (zh) | 一种图表渲染方法及装置 | |
| US20050108681A1 (en) | Method and system for applying user interface elements to data | |
| CN107562464A (zh) | 一种命令行接口的调用方法、装置及设备 | |
| CN110362298B (zh) | 一种基于浏览器的目标对象绘制方法、装置和浏览器 | |
| CN116301813B (zh) | 低代码平台开发方法及系统 | |
| CN107180168A (zh) | 文件加载、生成方法和装置，以及智能终端 | |
| CN110018866B (zh) | 用户界面主题更新方法、装置、系统、车机及车辆 | |
| CN108399156A (zh) | 一种pdf文件中公式的排版方法及装置 | |
| CN106598375A (zh) | 智能终端应用内容呈现的方法、装置及智能终端 | |
| CN107491311A (zh) | 生成页面文件的方法、系统以及计算机设备 | |
| CN103473106A (zh) | 一种页面生成的方法及系统 | |
| CN109446295B (zh) | 一种svg数据地图编辑工具、编辑方法及计算机可读介质 | |
| CN106569816A (zh) | 一种渲染方法及装置 | |
| CN111880803A (zh) | 一种应用于多平台的软件构建方法及装置 | |
| CN106814931A (zh) | 一种终端及应用程序图标的定位方法 |
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 | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231218 Address after: Room 1006, 10th Floor, Office Building, Free Trade Building, No. 8 Xiyuan North Street, High tech Zone, Shapingba District, Chongqing, 400000 Patentee after: Chongqing Youxie Technology Co.,Ltd. Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |
|
| TR01 | Transfer of patent right |