一种前端页面图表组件化的方法技术

本发明专利技术涉及前端页面图表制作技术领域，尤其是一种前端页面图表组件化的方法。本发明专利技术方法将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁等通用事件组件化为子组件；在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；把父组件已经封装好的数据源对象以父子组件通信的具体形式传递给子组件进一步处理；子组件接收传入的参数并加入默认配置，最后再次对其进行装配成一个新的对象；子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件；然后向父组件返回结果。本发明专利技术使得在制作图表时能调用组件简化操作，使各图表更易于维护，能更有效的降低前端开发的工作量。

A Componentized Method for Front-end Page Charts

The invention relates to the technical field of front-end page chart making, in particular to a method of front-end page chart componentization. The method of the invention componentizes common events such as assembling, initializing, monitoring and redrawing and destroying of the defined chart data source into sub-components; obtains the data returned from the background in the parent component, encapsulates the customized chart configuration parameters and data into an object as the data source of the incoming sub-component; and takes the data source object encapsulated by the parent component as the parent. The specific form of sub-component communication is passed to the sub-component for further processing; the sub-component receives the incoming parameters and adds the default configuration, and finally assembles them again into a new object; the sub-component passes the assembled object to the initialization chart event processing, and adds the chart redrawing and destruction events to the initialization chart event; and then returns the results to the parent component. The invention makes it possible to call components to simplify operation when making charts, makes charts easier to maintain, and reduces the workload of front-end development more effectively.

【技术实现步骤摘要】
一种前端页面图表组件化的方法
本专利技术涉及前端页面图表制作
，尤其是一种前端页面图表组件化的方法。
技术介绍
在大数据时代的背景下，越来越多庞大的数据需要在页面上展示；通过图表的形式展示数据是如今最常用的形式。页面图表制作是前端页面开发的一项十分重要的技术，它解决了用户在一个页面同时展示大量数据的需求；因此前端开发人员需要考虑在不同的大量数据下，使用不同形式的图表展示不同的数据。在一个页面中，往往有许多相同样式或不同样式的图表，在具体实现时，各个图表往往需要配置一些大同小异的配置项；就会存在大量相同代码且变得十分紊乱，降低了代码的可读性，加大了后期维护的难度。
技术实现思路
本专利技术解决的技术问题在于提供一种前端页面图表组件化的方法，解决在页面中有大量图表时出现大量配置项导致页面存在有大量相同代码且十分紊乱、可读性差等问题。本专利技术解决上述技术问题的技术方案是：所述方法包括：步骤1：将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁等通用事件组件化为子组件；步骤2：在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；本文档来自技高网...

【技术保护点】
1.一种前端页面图表组件化的方法，其特征在于，所述方法包括：步骤1：将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁通用事件组件化为子组件；步骤2：在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；步骤3：把父组件已经封装好的数据源对象以父子组件通信的形式传递给子组件进一步处理；步骤4：子组件接收传入的参数并加入默认配置，再次对其进行装配成一个新的对象；步骤5：子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件以保证在触发监听事件重绘或销毁图表时，图表的内容能及时清空再重绘或销毁，然后向父...

【技术特征摘要】
1.一种前端页面图表组件化的方法，其特征在于，所述方法包括：步骤1：将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁通用事件组件化为子组件；步骤2：在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；步骤3：把父组件已经封装好的数据源对象以父子组件通信的形式传递给子组件进一步处理；步骤4：子组件接收传入的参数并加入默认配置，再次对其进行装配成一个新的对象；步骤5：子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件以保证在触发监听事件重绘或销毁图表时，图表的内容能及时清空再重绘或销毁，然后向父组件返回结果。2.根据权利要求1所述的方法，其特征在于：所述图表配置是指图表的展现形式、颜色、图表和字体大小、图表位置、提示框。3.根据权利要求1所述的方法，其特征在于：所述的图表监听是监听浏览器窗口大小变更并重绘图表，使图表能依据当前窗口大小来改变尺寸、用wa...

【专利技术属性】
技术研发人员：张跃聪，季统凯，
申请(专利权)人：国云科技股份有限公司，
类型：发明
国别省市：广东,44