[发明专利]一种图表渲染方法及装置

说明书

本发明公开了一种图表渲染方法及装置，应用于WEB技术领域,该方法包括：获取当前页面待渲染图表的图表配置项和图表数据项；拆分当前页面待渲染图表的图表配置项为M类图表配置对象，M类图表配置对象对应于ReactECharts组件的M个属性，M为正整数；图表数据项插入至M类图表配置对象中对应的图表配置对象，以形成M个选项；组合M个选项为同一ECharts标准配置对象；将ECharts标准配置对象传递给ReactECharts组件，使得ReactECharts组件根据ECharts标准配置对象渲染图表，从而本发明解决了现有技术开发效率低且后期维护难度大的技术问题。

技术领域

本发明涉及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后端获取与所解析出的图表配置信息对应的图表数据项。