[发明专利]一种简化echarts调用的封装方法

说明书

本发明涉及前端开发技术领域，尤其是一种简化echarts调用的封装方法。本发明将echarts的参数分成：固定样式参数、数据展示参数、功能模块参数和不常用参数等四类参数，使用简化、映射、模块封装和参数固化等处理，对各种参数进行相应的处理方式，封装一个echarts调用模块；传入一个以html元素ID值为key配置参数为value的json数据，便可实现批量生成echarts图表。本发明在封装的逻辑中使用了简化映射的方式和定义默认全局样式等方式，使开发人员能够使用简单快捷的方式调用echarts批量生成图表；非常适合多次调用echarts生成图表展示的场合。

技术领域

本发明涉及前端开发技术领域，尤其是一种简化echarts调用的封装方法。

背景技术

近几年随着前端技术的发展和人们对大数据的重视，各种大数据图表展示工具越来越多地出现在开发者的视野中，百度也提供了一款优秀的开源的echarts。echarts凭借着强大丰富的图表展示和高度自定义的配置参数，越来越多出现在各种数据展示的项目中。echarts也采用了时下流行的AMD的开发标准，echarts的范例中提供了说明，但是AMD加载方式对于很多开发人员来说都是很陌生的，需要使用额外的时间去了解AMD。每次调用都需要正确配置echarts的位置和require加载必要的模块，显然重复着复杂的加载信息不是高效的开发方式；而且万一echarts的存放位置变更了，开发人员不得不查找所有的调用去修正echarts的路径。同时echarts高度自定义的配置参数意味着需要传入大量的且复杂不好记忆的参数；其中有相当一部分的参数是相对固定的且修改的概率非常小的。结果是开发者在每次调用echarts生成图表的时候，都需要带上好些固定且一样的样式参数，显然这种调用方式是效率的浪费。一旦系统的图形报表样式需要变更，开发者不得不查找每次的调用，将每次调用的样式修改，显然项目开发中不能将宝贵的时间和人力投入到这种低效的修改中。

发明内容

本发明解决的技术问题在于提供一种简化echarts调用的封装方法；有效提供调用echarts生成图表的效率。

本发明解决上述技术问题的技术方案是：

通过参数分类、简化映射、定义默认值、模块封装处理方式构造一个带html元素ID值和对应echarts配置参数的批量json数据；其中echarts配置参数为简化后或原生态的配置参数，调用封装程序中的接口解析json数据，使用echarts批量生成图表；

所述的批量json数据类似以下形式：

var config＝{“chart1”：chart1_config}；

其中key值即chart1为需要展示图表的html元素的ID值，chart1_config是chart1对应的echarts配置参数，同样使用了json格式，配置参数为经过封装后的json数据和/或原生的json数据，调用函数判断当前配置参数的类型，决定是否调用解析逻辑将封装后的json配置参数解析成echarts原生的json配置参数；

所述的封装程序将参数解析、定义默认参数和echarts引入调用等逻辑封装在一个js文件中，免去echarts引入和加载模块等细节问题；仅需使用使用封装程序定义的少量简单的配置配置参数即可生成echarts图形报表。

所述方法的具体流程为：

第一步，引入echarts.js主文件和封装模块createEcharts.js两个文件；

第二步，修改封装js模块文件顶部的echarts路径并引入；

第三步，通过调用BEcharts.load({domID：config})的接口传入数据，load遍历数据，判断config是封装模块定义的配置参数还是echarts原生的配置参数，对不同的参数执行不同的处理：