一种可视化图表组件的配置方法.pdf

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN114546364A(43)申请公布日2022.05.27(21)申请号202210165616.9(22)申请日2022.02.23(71)申请人徐工汉云技术股份有限公司地址221000江苏省徐州市徐州经济技术开发区科技路6号(72)发明人金娜刘通(74)专利代理机构南京纵横知识产权代理有限公司32224专利代理师范青青(51)Int.Cl.G06F8/34(2018.01)G06F9/445(2018.01)G06F9/455(2006.01)权利要求书1页说明书4页附图1页(54)发明名称一种可视化图表组件的配置方法(57)摘要本发明公开了Canvas渲染图表处理技术领域的一种可视化图表组件的配置方法，旨在解决数据可视化大屏图表组件开发周期长、不能灵活配置、扩展性较差以及业务耦合度太高的技术问题。其包括以下步骤：利用预创建的图表组件容器渲染自定义图表组件实例，在渲染元素中编写图表配置参数，所述图表配置参数基于Echarts图表库的图表配置参数配置；在图表组件容器中编写预留的自定义图表属性参数；将配置好的自定义图表组件发布，在可视化工具中使用并运行显示自定义图表组件的展示效果。本发明基于Echarts图表库创建图表组件容器来渲染自定义图表组件，以图形化界面完成编辑和配置，不但简化了开发过程，提高了开发效率，能够充分满足可视化工具的功能需求。CN114546364ACN114546364A权利要求书1/1页1.一种可视化图表组件的配置方法，其特征在于，包括以下步骤：利用预创建的图表组件容器渲染自定义图表组件实例，在渲染元素中编写图表配置参数，所述图表配置参数基于Echarts图表库的图表配置参数配置；在图表组件容器中编写预留的自定义图表属性参数；将配置好的自定义图表组件发布，在可视化工具中使用自定义图表组件并运行显示自定义图表组件的展示效果。2.根据权利要求1所述的可视化图表组件的配置方法，其特征在于，所述图表组件容器的创建方法包括：封装生成矢量JSON文件的renderHTML函数；利用所述renderHTML函数在Canvas画布上渲染第三方DOM元素。3.根据权利要求2所述的可视化图表组件的配置方法，其特征在于：所述JSON文件中配置有自定义图表组件所需的通用基础图表参数，所述通用基础图表参数在渲染元素时编写。4.根据权利要求3所述的可视化图表组件的配置方法，其特征在于，所述方法还包括：将所述自定义图表属性参数与通用基础图表参数进行双向绑定，以展示不同形式的图表。5.根据权利要求1所述的可视化图表组件的配置方法，其特征在于：所述的编写预留的自定义图表属性参数之前，根据图表的种类和功能预先确定自定义图表属性参数的值类型。6.根据权利要求1所述的可视化图表组件的配置方法，其特征在于：所述自定义图表属性参数包括图表主题色、图表X/Y轴线样式、图表选项控制显隐、图表数据源、图表位置、图表倾斜角度中的一种或多种。7.根据权利要求1所述的可视化图表组件的配置方法，其特征在于，所述方法还包括：通过layoutHTML函数监听自定义图表属性参数，并在自定义图表属性参数变更时实时更新自定义图表组件的展示效果。2CN114546364A说明书1/4页一种可视化图表组件的配置方法技术领域[0001]本发明涉及一种可视化图表组件的配置方法，属于Canvas渲染图表处理技术领域。背景技术[0002]目前，数据可视化有利于挖掘数据背后的价值和规律，提高决策效率，但现有的数据可视化系统需要针对特定场景进行单独的开发、效率低下、维护成本高。开源Echarts图表是一个纯Javascript的图表库，兼容当前绝大部分的浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互，可高度个性化定制的数据可视化图表。但这些可视化工具不能提供可视化组件，以供用户二次开发。[0003]大多数的网站在制作可视化大屏的过程中需要设计编写代码，需要大量的图表来渲染数据，大大增加了开发人员的难度，导致开发效率降低，冗余代码量增大，后期维护成本较高。同时，现有的可视化技术支持的组件较少，扩展性较差，展示的数据维度不够，支持的用户交互较少，难以满足可视化大屏的功能需求。发明内容[0004]本发明的目的在于克服现有技术中的不足，提供一种可视化图表组件的配置方法，不但简化了开发过程，提高了开发效率，还增强了扩展性，降低了业务耦合度。[0005]为达到上述目的，本发明是采用下述技术方案实现的：本发明提供了一种可视化图表组件的配置方法，包括以下步骤：利用预创建的图表组件容器渲染自定义图表组件实例，在渲染元素中编写图表配置参数，所述图表配置参数基于Echarts图表库的图表配置参数配置；在图表组件容器