本发明公开一种基于动态传入数据的echarts调用封装方法、装置、介质及设备，其中，所述装置包括动态传入数据调用模块、参数配置模块、参数解析模块和封装模块，其中，动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析，封装模块用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装。本发明将动态传入数据的处理及参数解析封装在一个json文件里，有效地提高了基于动态传入数据生成echarts图像报表的开发效率和重复利用率。
1.基于动态传入数据的echarts调用封装方法，其特征在于，用于将生成echarts图形报表所用的动态传入数据调用模块、参数配置模块和参数解析模块封装在一个格式为json格式的配置参数R输出文件内，在vue前端通过echarts工具调用配置参数R输出文件并通过接口动态传入配置配置参数R所需的数据生成echarts图形报表；动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析；其中，参数配置模块依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装的具体步骤为：S1）构造一个带有html元素的id名称；
S2）依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标、legend和纵坐标并对配置参数R进行封装；其中，定义配置参数R的原始横坐标为默认值，当有外部接口动态传入的数据中有配置参数R的横坐标时，则对配置参数R的原始横坐标进行覆盖替换，反之，则保留原始横坐标；具体包括如下步骤：S2‑1）定义动态legend所需的颜色组数；
S2‑2）清空当前画布所有数据，并根据外部接口返回的动态传入的数据对已清空所有数据的画布进行重新渲染；
S2‑3）定义动态传入的数据中含有的配置参数R纵坐标的空数组；
S2‑4）定义动态传入的数据中含有的配置参数R的legend参数的空数组；
S2‑5）将动态传入的数据处理成符合echarts图形报表生成所需的配置参数R；具体操作为：S2‑5‑1）设定动态传入的数据所能对应生成的echarts图形报表的类型；
S2‑5‑2）调取与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数；
S2‑5‑3）将步骤S2‑5‑1）和步骤S2‑5‑2）中得到的数据分配至预先定义好的且用于展示echarts图形报表的数据类中；
S2‑6）取消echarts图形报表的图例上的点击事件；
S2‑7）动态传入echarts图形报表展示用的legend参数；
S2‑10）动态传入配置参数R的纵坐标的值的json数据；
S3）利用id名称对步骤S2）中的配置参数R进行简化；
S4）将预定报表展示类型与简化后的配置参数R封装成json文件。
2.根据权利要求1所述的基于动态传入数据的echarts调用封装方法，其特征在于，在步骤S2）中，动态传入的数据以如下形式传入：echartFun('container',this.axisDataNum,this.seriesDataNum,'line')其中，container 即为需要展示图表的html 元素的id 值，this.axisDataNum＝['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']和this.seriesDataNum是container对应的echarts 图形报表的配置参数R，配置参数R为json格式数据。
3.根据权利要求1所述的基于动态传入数据的echarts调用封装方法，其特征在于，在步骤S2）中，动态传入的数据通过调用接口传入。
4.根据权利要求3所述的基于动态传入数据的echarts调用封装方法，其特征在于，动态传入的数据通过映射的方式传入。
5.根据权利要求1～4任一所述的基于动态传入数据的echarts调用封装方法，其特征在于，echarts图形报表生成所需的辅助参数通过映射的方式定义在生成echarts图形报表时所调用的配置参数R输出文件中。
6.根据权利要求5所述的基于动态传入数据的echarts调用封装方法，其特征在于，简化后的echarts配置参数R为json格式数据。
7.基于动态传入数据的echarts调用封装装置，其特征在于，包括：动态传入数据调用模块，用于对接口动态传入的数据进行调用；
参数配置模块，用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装；
封装模块，用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装；其中，参数配置模块依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装的具体步骤为：S1）构造一个带有html元素的id名称；
S2）依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标、legend和纵坐标并对配置参数R进行封装；其中，定义配置参数R的原始横坐标为默认值，当有外部接口动态传入的数据中有配置参数R的横坐标时，则对配置参数R的原始横坐标进行覆盖替换，反之，则保留原始横坐标；具体包括如下步骤：S2‑1）定义动态legend所需的颜色组数；
S2‑2）清空当前画布所有数据，并根据外部接口返回的动态传入的数据对已清空所有数据的画布进行重新渲染；
S2‑3）定义动态传入的数据中含有的配置参数R纵坐标的空数组；
S2‑4）定义动态传入的数据中含有的配置参数R的legend参数的空数组；
S2‑5）将动态传入的数据处理成符合echarts图形报表生成所需的配置参数R；具体操作为：S2‑5‑1）设定动态传入的数据所能对应生成的echarts图形报表的类型；
S2‑5‑2）调取与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数；
S2‑5‑3）将步骤S2‑5‑1）和步骤S2‑5‑2）中得到的数据分配至预先定义好的且用于展示echarts图形报表的数据类中；
S2‑6）取消echarts图形报表的图例上的点击事件；
S2‑7）动态传入echarts图形报表展示用的legend参数；
S2‑10）动态传入配置参数R的纵坐标的值的json数据；
S3）利用id名称对步骤S2）中的配置参数R进行简化；
S4）将预定报表展示类型与简化后的配置参数R封装成json文件。
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～6中任一所述的基于动态传入数据的echarts调用封装方法。
9.一种计算机设备，包括可读存储介质、处理器以及存储在可读存储介质上并可在处理器上运行的计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～
6中任一所述的基于动态传入数据的echarts调用封装方法。
基于动态传入数据的echarts调用封装方法、装置、介质及
设备
技术领域
[0001] 本发明涉及vue前端开发的技术领域。具体地说是一种基于数据动态传入的echarts函数封装方法、介质及设备。
背景技术
[0002] 随着前端开发技术的发展和人们对可视化大数据的期待，出现在开发者视野中的大数据图形报表的种类也越来越多。echarts 凭借着强大丰富的图表展示和高度自定义的配置参数，越来越多地应用于各种数据展示的项目中。echarts 的范例中提供了说明，加载方式对于很多开发人员来说都是很陌生的，需要使用额外的时间去了解。每次调用都需要正确配置echarts 的位置，这样重复加载信息和参数严重影响的了开发效率；而且一旦页面上有与不同的类型和动态相关的数据，就需要重复写echarts 的配置信息。同时echarts 高度自定义的配置参数意味着需要传入大量的且复杂不便记忆的参数；其中，有相当一部分的参数是相对固定的且修改概率非常小的。这就导致了开发者在每次调用echarts 生成图表的时候，都需要带上好些固定且一样的样式参数。而且一旦系统的图形报表样式需要变更，开发者不得不查找每次的调用，将每次调用的样式修改，显然这样操作很浪费时间。
发明内容
[0003] 为此，本发明所要解决的技术问题在于提供一种基于数据动态传入的echarts调用封装方法、介质及设备，将动态传入数据的处理及参数解析封装在echarts函数里，有效地提高了基于动态传入数据生成echarts图像报表的开发效率和重复利用率。
[0004] 为解决上述技术问题，本发明提供如下技术方案：
[0005] 基于数据动态传入的echarts调用封装方法，用于将生成echarts图形报表所用的动态传入数据调用模块、参数配置模块和参数解析模块封装在一个格式为json格式的配置参数R输出文件内，在vue前端通过echarts工具调用配置参数R输出文件并通过接口动态传入配置配置参数R所需的数据生成echarts图形报表；动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析；其中，参数配置模块依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装的具体步骤为：
[0006] S1）构造一个带有html元素的id名称；
[0007] S2）依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标、legend和纵坐标并对配置参数R进行封装；其中，定义配置参数R的原始横坐标为默认值，当有外部接口动态传入的数据中有配置参数R的横坐标时，则对配置参数R的原始横坐标进行覆盖替换，反之，则保留原始横坐标；具体包括如下步骤：
[0008] S2‑1）定义动态legend所需的颜色组数；
[0009] S2‑2）清空当前画布所有数据，并根据外部接口返回的动态传入的数据对已清空所有数据的画布进行重新渲染；
[0010] S2‑3）定义动态传入的数据中含有的配置参数R纵坐标的空数组；
[0011] S2‑4）定义动态传入的数据中含有的配置参数R的legend参数的空数组；
[0012] S2‑5）将动态传入的数据处理成符合echarts图形报表生成所需的配置参数R；具体操作为：
[0013] S2‑5‑1）设定动态传入的数据所能对应生成的echarts图形报表的类型；
[0014] S2‑5‑2）调取与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数；所述与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数为纵坐标的name、legend等，即echarts中用到的与纵坐标相关的参数；
[0015] S2‑5‑3）将步骤S2‑5‑1）和步骤S2‑5‑2）中得到的数据分配至预先定义好的且用于展示echarts图形报表的数据类中；
[0016] S2‑6）取消echarts图形报表的图例上的点击事件；
[0017] S2‑7）动态传入echarts图形报表展示用的legend参数；
[0018] S2‑8）动态传入配置参数R的横坐标的值；
[0019] S2‑9）动态传入legend所需的颜色的值；
[0020] S2‑10）动态传入配置参数R的纵坐标的值的json数据
[0021] S3）利用id名称对步骤S2）中的配置参数R进行简化；
[0022] S4）将预定报表展示类型与简化后的配置参数R封装成json文件。
[0023] 上述基于动态传入数据的echarts调用封装方法，在步骤S2）中，动态传入的数据以如下形式传入：
[0024] echartFun('container',this.axisDataNum,this.seriesDataNum,'line')[0025] 其中，container 即为需要展示图表的html 元素的id 值， this.axisDataNum＝['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']和this.seriesDataNum是container对应的echarts 图形报表的配置参数R，配置参数R为json格式数据。
[0026] 上述基于动态传入数据的echarts调用封装方法，在步骤S2）中，动态传入的数据通过调用接口传入。
[0027] 上述基于动态传入数据的echarts调用封装方法，动态传入的数据通过映射的方式传入。
[0028] 上述基于动态传入数据的echarts调用封装方法，echarts图形报表生成所需的辅助参数通过映射的方式定义在生成echarts图形报表时所调用的函数中。
[0029] 上述基于动态传入数据的echarts调用封装方法，简化后的echarts配置参数R为json格式数据。
[0030] 基于动态传入数据的echarts调用封装装置，包括：
[0031] 动态传入数据调用模块，用于对接口动态传入的数据进行调用；
[0032] 参数配置模块，用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装；
[0033] 参数解析模块，用于对封装后的配置参数R解析；
[0034] 封装模块，用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装。
[0035] 一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现基于动态传入数据的echarts调用封装方法。
[0036] 一种计算机设备，包括可读存储介质、处理器以及存储在可读存储介质上并可在处理器上运行的计算机程序，所述计算机程序被处理器执行时实现基于动态传入数据的echarts调用封装方法。
[0037] 本发明的技术方案取得了如下有益的技术效果：
[0038] 本发明免去echarts 函数每次单独固定一种类型和单一写死数据不能动态展示数据等细节问题；仅需使用使用封装程序定义的少量简单的配置配置参数即可生成echarts 图形报表，且在使用过程中，仅需通过调用接口将数据动态传入配置参数R输出文件内，然后再依次调用运行配置参数R输出文件和echarts工具即可获得echarts图形报表。
附图说明
[0039] 图1为依据动态传入数据配置配置参数R并封装的流程示意图；
[0040] 图2为基于动态传入数据的echarts调用封装装置；
[0041] 图3为本发明中可进行基于动态传入数据的echarts调用封装的计算机设备原理图。
具体实施方式
[0042] 下面结合示例，针对本发明进行进一步说明。
[0043] 本实施例中，将以在vue前端项目中使用的echarts工具生成图形报表为例进行说明。在vue前端项目中使用echarts生成图形报表，具体流程为：
[0044] 第一步，在vue前端项目中安装echarts.js安装包；
[0045] 第二步，将json格式的配置参数R输出文件引入echarts使用；
[0046] 第三步，通过调用接口动态传入配置配置参数R所需的数据， json格式的配置参数R输出文件对不同的参数执行不同的处理；动态传入的数据为配置参数R类型的数据（json格式数据），则echarts可以直接生成各种类型的图形报表，而对由配置参数R输出文件处理的数据则需要通过解析后得到配置参数R，然后在调用echarts生成图形报表；
[0047] 第四步，将配置参数R输出文件定义的配置参数R解析成原生echarts配置参数；
[0048] 第五步，使用echarts调用解析后得到的原生echarts配置参数图形报表。
[0049] 其中，json格式的配置参数R输出文件由将生成echarts图形报表所用的动态传入数据调用模块、参数配置模块和参数解析模块封装在一个json格式文件内；动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析；其中，如图1所示，参数配置模块依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装的具体步骤为：
[0050] S1）构造一个带有html元素的id名称；
[0051] S2）依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标、legend和纵坐标并对配置参数R进行封装；其中，定义配置参数R的原始横坐标为默认值，当有外部接口动态传入的数据中有配置参数R的横坐标时，则对配置参数R的原始横坐标进行覆盖替换，反之，则保留原始横坐标；依据动态传入的数据配置配置参数R纵坐标的种类及legend参数；具体包括如下步骤：
[0052] S2‑1）定义动态legend所需的颜色组数；
[0053] S2‑2）清空当前画布所有数据，并根据外部接口返回的动态传入的数据对已清空所有数据的画布进行重新渲染；
[0054] S2‑3）定义动态传入的数据中含有的配置参数R纵坐标的空数组；
[0055] S2‑4）定义动态传入的数据中含有的配置参数R的legend参数的空数组；
[0056] S2‑5）将动态传入的数据处理成符合echarts图形报表生成所需的配置参数R；具体操作为：
[0057] S2‑5‑1）设定动态传入的数据所能对应生成的echarts图形报表的类型；
[0058] S2‑5‑2）调取与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数；
[0059] S2‑5‑3）将步骤S2‑5‑1）和步骤S2‑5‑2）中得到的数据分配至预先定义好的且用于展示echarts图形报表的数据类中；
[0060] S2‑6）取消echarts图形报表的图例上的点击事件；
[0061] S2‑7）动态传入echarts图形报表展示用的legend参数；
[0062] S2‑8）动态传入配置参数R的横坐标的值；
[0063] S2‑9）动态传入legend所需的颜色的值；
[0064] S2‑10）动态传入配置参数R的纵坐标的值的json数据；
[0065] S3）利用id名称对步骤S2）中的配置参数R进行简化；简化后的echarts配置参数R为json格式数据；
[0066] S4）将预定报表展示类型与简化后的配置参数R封装成json文件。
[0067] 本发明中，利用基于动态传入数据的echarts调用封装装置将将生成echarts图形报表所用的动态传入数据调用模块、参数配置模块和参数解析模块封装在一个格式为json格式的配置参数R输出文件内。如图2所示，基于动态传入数据的echarts调用封装装置包括动态传入数据调用模块、参数配置模块、参数解析模块和封装模块，其中，动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析，封装模块用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装。
[0068] 其中，在步骤S2）中，动态传入的数据以如下形式传入：
[0069] echartFun('container',this.axisDataNum,this.seriesDataNum,'line')[0070] 其中，container 即为需要展示图表的html 元素的id 值，this.axisDataNum＝['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']和this.seriesDataNum是container对应的echarts 图形报表的配置参数R，配置参数R为json格式数据。
[0071] 在步骤S2）中，动态传入的数据通过调用接口以映射的方式传入；echarts图形报表生成所需的辅助参数通过映射的方式定义在生成echarts图形报表时所调用的配置参数R输出文件中。
[0072] 在本发明中，echarts利用本发明封装得到的配置参数R输出文件，通过数据调用接口动态传入数据，即可生成echarts图形报表，免去echarts 函数每次单独固定一种类型和单一写死数据不能动态展示数据等细节问题。
[0073] 基于上述基于动态传入数据的echarts调用封装方法，相应的，本实施例还提供了一种存储有计算机程序的计算机可读存储介质，该计算机程序被处理器执行时实现如下步骤：先构造一个带有html元素的id名称，然后依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标和纵坐标，接着利用id名称对配置参数R进行简化，再传入预定报表展示类型，最后将动态传入数据调用模块、参数配置模块和参数解析模块封装在一个格式为json格式的配置参数R输出文件内。
[0074] 如图3所示，基于上述基于数据动态传入的echarts函数封装方法以及计算机可读存储介质，本实施例中，还提供了一种计算机设备，其包括可读存储介质、处理器以及存储在可读存储介质上并可在处理器上运行的计算机程序，其中可读存储介质与处理器均设置在总线上，处理器执行计算机程序时实现如下步骤：先构造一个带有html元素的id名称，然后依据动态传入的数据配置echarts图形报表生成时所需的配置参数R的横坐标和纵坐标，接着利用id名称对配置参数R进行简化，再传入预定报表展示类型，最后将动态传入数据调用模块、参数配置模块和参数解析模块封装在一个格式为json格式的配置参数R输出文件内。
[0075] 在vue页面上需要生成图形报表时，通过数据调用接口调取数据，数据调用接口返回数据，将数据动态传入配置参数R输出文件内，调用配置参数R输出文件就可以生成echarts图形报表，能够完全屏蔽echarts 加载模块调用的细节，快捷简单地使用json 数据动态生成echarts 图形报表，可以提高项目的开发效率；很适合在vue 框架项目中频繁调用echarts 动态传参的项目，对比官方的例子，代码量有所缩减。
[0076] 显然，上述实施例仅仅是为清楚地说明所作的举例，而并非对实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。而由此所引伸出的显而易见的变化或变动仍处于本专利申请权利要求的保护范围之中。
