基于动态传入数据的echarts调用封装方法、装置、介质及设备制造方法及图纸

本发明专利技术公开一种基于动态传入数据的echarts调用封装方法、装置、介质及设备，其中，所述装置包括动态传入数据调用模块、参数配置模块、参数解析模块和封装模块，其中，动态传入数据调用模块用于对接口动态传入的数据进行调用，参数配置模块用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装，参数解析模块用于对封装后的配置参数R解析，封装模块用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装。本发明专利技术将动态传入数据的处理及参数解析封装在一个json文件里，有效地提高了基于动态传入数据生成echarts图像报表的开发效率和重复利用率。echarts图像报表的开发效率和重复利用率。echarts图像报表的开发效率和重复利用率。

【技术实现步骤摘要】
基于动态传入数据的echarts调用封装方法、装置、介质及设备


[0001]本专利技术涉及vue前端开发的
具体地说是一种基于数据动态传入的echarts函数封装方法、介质及设备。

技术介绍

[0002]随着前端开发技术的发展和人们对可视化大数据的期待，出现在开发者视野中的大数据图形报表的种类也越来越多。echarts 凭借着强大丰富的图表展示和高度自定义的配置参数，越来越多地应用于各种数据展示的项目中。echarts 的范例中提供了说明，加载方式对于很多开发人员来说都是很陌生的，需要使用额外的时间去了解。每次调用都需要正确配置echarts 的位置，这样重复加载信息和参数严重影响的了开发效率；而且一旦页面上有与不同的类型和动态相关的数据，就需要重复写echarts 的配置信息。同时echarts 高度自定义的配置参数意味着需要传入大量的且复杂不便记忆的参数；其中，有相当一部分的参数是相对固定的且修改概率非常小的。这就导致了开发者在每次调用echarts 生成图表的时候，都需要带上好些固定且一样的样式参数。而且一旦系统的图形报表样式需要变更，开发者不得不查找每次的调用，将每次调用的样式修改，显然这样操作很浪费时间。

技术实现思路

[0003]为此，本专利技术所要解决的技术问题在于提供一种基于数据动态传入的echarts调用封装方法、介质及设备，将动态传入数据的处理及参数解析封装在echarts函数里，有效地提高了基于动态传入数据生成echarts图像报表的开发效率和重复利用率。
[0004]为解决上述技术问题，本专利技术提供如下技术方案：基于数据动态传入的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纵坐标相关的每一个参数；所述与动态传入的数据中含有的配置参数R纵坐标相关的每一个参数为纵坐标的name、legend等，即echarts中用到的与纵坐标相关的参数； S2
‑5‑
3）将步骤S2
‑5‑
1）和步骤S2
‑5‑
2）中得到的数据分配至预先定义好的且用于展示echarts图形报表的数据类中；S2
‑
6）取消echarts图形报表的图例上的点击事件；S2
‑
7）动态传入echarts图形报表展示用的legend参数；S2
‑
8）动态传入配置参数R的横坐标的值；S2
‑
9）动态传入legend所需的颜色的值；S2
‑
10）动态传入配置参数R的纵坐标的值的json数据S3）利用id名称对步骤S2）中的配置参数R进行简化；S4）将预定报表展示类型与简化后的配置参数R封装成json文件。
[0005]上述基于动态传入数据的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格式数据。
[0006]上述基于动态传入数据的echarts调用封装方法，在步骤S2）中，动态传入的数据通过调用接口传入。
[0007]上述基于动态传入数据的echarts调用封装方法，动态传入的数据通过映射的方式传入。
[0008]上述基于动态传入数据的echarts调用封装方法，echarts图形报表生成所需的辅助参数通过映射的方式定义在生成echarts图形报表时所调用的函数中。
[0009]上述基于动态传入数据的echarts调用封装方法，简化后的echarts配置参数R为json格式数据。
[0010]基于动态传入数据的echarts调用封装装置，包括：动态传入数据调用模块，用于对接口动态传入的数据进行调用；参数配置模块，用于依据调用的动态传入的数据对echarts图形报表生成时所需的配置参数R的横坐标、legend以及纵坐标进行配置和封装；参数解析模块，用于对封装后的配置参数R解析；
封装模块，用于将动态传入数据调用模块、参数配置模块和参数解析模块进行封装。
[0011]一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现基于动态传入数据的echarts调用封装方法。
[0012]一种计算机设备，包括可读存储介质、处理器以及存储在可读存储介质上并可在处理器上运行的计算机程序，所述计算机程序被处理器执行时实现基于动态传入数据的echarts调用封装方法。
[0013]本专利技术的技术方案取得了如下有益的技术效果：本专利技术免去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
‑
8）动态传入配置参数R的横坐标的值；S2<...

【专利技术属性】
技术研发人员：申小霞，张大伟，
申请(专利权)人：北京安盟信息技术股份有限公司，
类型：发明
国别省市：