一种基于echart组件动态渲染指标方法与流程

1.本发明涉及数据库处理技术领域，特别是一种基于echart组件动态渲染指标方法，适用于java和javascript编程语言主题查询配置个性化定制，并使用echarts提供直观、可交互的数据可视化图表的方法。


背景技术：

2.随着医院信息的飞速发展，单独地把医疗信息数据统计展现已经成为了医疗信息的孤岛，无法满足现有医疗行业的需求。因此需建立决策管理应用分析平台，将医院各系统的数据整合起来，提升医院的管理和经营决策响应能力。
3.运用echarts库提供数据可视化支撑，采用canvas画布导出，由ant design vue框架提供组件按钮样式导入控件，原生h5的drag和drop来实现拖拽。数据查询入口通过针对不同图表使用策略模式+spring代理模式，采用统一的查询接口定制每个图表查询逻辑的设计思路实现。
4.技术前端——核心技术分为3部分，视图、属性配置、数据状态管理。技术视图——由echarts库提供数据可视化支撑，采用canvas画布导出，由ant design vue框架提供组件按钮样式导入控件，原生h5的drag和drop来实现拖拽。属性配置——由 v-dragging来实现配置条件的前后拖拽排序，通过vue-color插件来控制颜色的选取，引入了lodashjs库做数据的深拷贝，判空，校验filter过滤和get查找，通过vue中动态组件component的is的方式进行比表单的渲染。
5.状态管理——通过原生js中的闭包发布订阅模式实现整个功能的数据状态管理，通过vue中ref去操作dom来传递数据，初始化数据通过init链式调用的的手法进行数据的分发，引入了event-bus插件，利用vue的事件流机制做跨组件数据传递，用class类的写法初始化主题配置的基类，通过继承的方式进行属性样式复用，表单复用。
6.现有方法已经不适用于海量数据处理方式，本技术针对不同图表使用策略模式+spring代理模式，采用统一的查询接口定制每个图表查询逻辑的设计思路，方便横向扩展和更好维护图表的动态配置，使用mybatis orm映射框架查询主题数据，针对查询超时或过慢问题，采用了sql优化技术提升主题数据查询性能，由于主题数据结构复杂，使用java有大量的算法分析和逻辑处理。


技术实现要素：

7.本发明解决现有技术主题的图表是动态变化，各个图表数据结构不同，查询无统一接口的问题，提出一种基于echart组件动态渲染指标方法。
8.包括如下步骤:s1、针对主题图表查询统一接口s101对每个图表组件设置一个图表标识id，图表标识id作为图表身份id，图表身份id对应后台接口，对应不同的查询逻辑分支节点；
s102根据图表标识id读取标识参数和查询逻辑分支节点查询参数，图表标识id对应连接查询逻辑分支节点，完成查询操作；s103后台接口无法精确对应图表身份id字段，单独设置查询逻辑分支节点采用json工具传输参数，参数传输完成后通过s1步骤给出图表标识id，json工具传输参数后为当前图表对应后台接口；s2、动态生成sql根据配置参数实现标识参数和查询参数的映射对应，实时动态sql生成；标识参数和查询参数对应保存在数据库表单中，使用动态sql完成对应逻辑分支节点及图表标识id查询。
9.所述步骤s1中查询逻辑分支节点分为图表标识id可识别组和图表标识id不可识别组，图表标识id可识别组数量大于图表标识id不可识别组，图表标识id可识别组数量恒定，将图表标识id分别添加索引和关联对应至图表标识id可识别组，图表标识id不可识别由图表标识id不可识别组统一采用json工具传输参数。
10.所述步骤s2中图表标识id分别添加索引和关联对应至图表标识id可识别组，实时动态sql生成，索引和关联更替后动态替换动态sql。
11.本发明有益效果为：方便后续扩展和接口的灵活性，可使用不同策略模式的图表基于echart组件进行动态渲染后接入接口，并通过统一接口完善生成查询逻辑，各自维护对应接口的查询逻辑。保证系统灵活接入性。同时增加动态生成sql功能，并对查询结果进行计算处理。优化技术提升主题数据查询性能。
附图说明
12.图1是本发明实施例主题canvas拖拽图；图2是本发明实施例主题基本配置图；图3是本发明实施例echarts图表属性图；图4是本发明实施例echarts基本属性图；图5是本发明实施例echarts指标列表图；图6是本发明实施例echarts钻取列表图；图7是本发明实施例配置config示意图。
具体实施方式
13.一种基于echart组件动态渲染指标方法，包括如下步骤:s1、针对主题图表查询统一接口s101对每个图表组件设置一个图表标识id，图表标识id作为图表身份id，图表身份id对应后台接口，对应不同的查询逻辑分支节点；s102根据图表标识id读取标识参数和查询逻辑分支节点查询参数，图表标识id对应连接查询逻辑分支节点，完成查询操作；s103后台接口无法精确对应图表身份id字段，单独设置查询逻辑分支节点采用json工具传输参数，参数传输完成后通过s1步骤给出图表标识id，json工具传输参数后为当前图表对应后台接口；
s2、动态生成sql根据配置参数实现标识参数和查询参数的映射对应，实时动态sql生成；标识参数和查询参数对应保存在数据库表单中，使用动态sql完成对应逻辑分支节点及图表标识id查询。这种处理方式也体现了图表查询的灵活性和强大的功能。
14.所述步骤s1中查询逻辑分支节点分为图表标识id可识别组和图表标识id不可识别组，图表标识id可识别组数量大于图表标识id不可识别组，图表标识id可识别组数量恒定，将图表标识id分别添加索引和关联对应至图表标识id可识别组，图表标识id不可识别由图表标识id不可识别组统一采用json工具传输参数。图表标识id可识别组数量恒定并数量上加以限制，避免过大数据的查询导致响应超时。保证大数据有效读取运行。
15.能够解决从各个系统抽取过来的数据表结构不统一、数据不规范、不同字段、不同计算方法等技术难点，经过统一实现一系列规范化处理，通过建立数据模型的方式来针对性的分析各个模块的数据，并在建立模型的过程中采用多维数据模型的方式，最终实现数据的统一化和多元化。
16.结合具体实施案例细化说明如下：图表标识数据前端主要采用echarts,vue,antdui,lodash,vue-color,v-dragging,drag,event-bus等技术解决。
17.图1 为canvas拖拽图，是根据原生drag事件， 通过按住左边tree的文字chart的选项拖拽进画布，内部数据的处理是通过eventbus去传递数据，可以通过拖拽动态的吧把chart放入画布中，目前没显示个数为后续的配置做准备；图2是可以动态的为chart配置样式颜色，点击配置弹窗弹窗配置表单，再点击面板布局右边的小眼睛，弹出弹窗。里面可以控制文字的颜色，外边背景的颜色，运用了vue的color插件，可以动态的选择所有颜色，点击保存之后可以看到动态的实时的刷新了图表的样式；图3是chart内置的图的外观属性，点开右边的侧滑栏，再点击图表可以动态的配置选中chart的外观属性，可以设置chart的坐标，尺寸，边距，图表的显示x轴还是y轴，内容对应chart的padding,可以配置chart里的颜色和chart对应的轴的旋转角度；图4是chart内置的数据的操作处理，点开右边的侧滑栏，再点击属性可以动态的配置选中chart的数据属性视图的名称、属性，数据的过滤，刷新时间，可以对数据进行统计跟随和独立查询，独立查询独立于整个查询之外，统计跟随可以跟着chart变化而变化；图5是chart数据的来源，点开右边的侧滑栏，再点击指标。这个指标控制着所有数据。可以根据自己的业务选择对应的指标，这个是动态的，这个指标泛指自己对应的业务数据，选择之后指标对应的有自己的维度，这个维度就是chart的坐标显示的数据；图6是 chart与chart之间的数据联动，点开右边的侧滑栏，再点击钻取。这个钻取内部有维度的选择，两个chart 之间必须要有相同的维度才能相互联动，钻取数据。选择了维度之后，有一个钻取的链路比如：年
‑‑
》月，点击应用之后，去配置里面配置钻取的视图之后，点击chart就会发现被钻取的chart 会被主视图的操作影响，根据链路数据变化。钻取是向下钻，联动是平级关系；图7是整个主题的配置config，点击配置弹窗弹窗配置表单，可以修改整个主题的名称编号，面板的布局，画布的宽高，视图布局的色系，水平间距，垂直间距。之前图4的统计
方式和查询条件都可以在这里得到展示，图6的钻取和联动都是在这里配置主视图和钻去视图。是这个主题配置的核心配置区域，串联整个主题的逻辑；上述实例内容主要说明：为了解决医疗信息的孤岛，将各个医疗系统的数据进行整合，对医疗数据进行展示和决策分析。指标绑定各种维度，然后指标通过组合的方式构成主题，数据展示以主题的形式展示，并以通过多种图表进行展示。 还解决了图表echart的属性，配置，样式，数据来源可以高度的自定义。达到按需展示，样式灵活多变，chart之间可以产生关联交互。还可以解决大屏的图表显示问题，不用重复引用创建视图，联调数据，自定义现配现用。本实例为了说明图表标识数据的多样性，本案仅是给出一种应用实例，相关配置参数替换对应调整图表标识id即可，参数调整和查询策略更新优化是动态进行的，故本案为了提升灵活性和系统稳定性，通过动态生成sql功能，并对查询结果进行计算处理，并通过限制图表标识id可识别组数量提升数据运行流畅度。

技术特征：
1.一种基于echart组件动态渲染指标方法，其特征在于包括如下步骤:s1、针对主题图表查询统一接口s101对每个图表组件设置一个图表标识id，图表标识id作为图表身份id，图表身份id对应后台接口，对应不同的查询逻辑分支节点；s102根据图表标识id读取标识参数和查询逻辑分支节点查询参数，图表标识id对应连接查询逻辑分支节点，完成查询操作；s103后台接口无法精确对应图表身份id字段，单独设置查询逻辑分支节点采用json工具传输参数，参数传输完成后通过s1步骤给出图表标识id，json工具传输参数后为当前图表对应后台接口；s2、动态生成sql根据配置参数实现标识参数和查询参数的映射对应，实时动态sql生成；标识参数和查询参数对应保存在数据库表单中，使用动态sql完成对应逻辑分支节点及图表标识id查询。2.根据权利要求1所述一种基于echart组件动态渲染指标方法，其特征在于所述步骤s1中查询逻辑分支节点分为图表标识id可识别组和图表标识id不可识别组，图表标识id可识别组数量大于图表标识id不可识别组，图表标识id可识别组数量恒定，将图表标识id分别添加索引和关联对应至图表标识id可识别组，图表标识id不可识别由图表标识id不可识别组统一采用json工具传输参数。3.根据权利要求2所述一种基于echart组件动态渲染指标方法，其特征在于所述步骤s2中图表标识id分别添加索引和关联对应至图表标识id可识别组，实时动态sql生成，索引和关联更替后动态替换动态sql。

技术总结
本发明涉及数据库处理技术领域，特别是一种基于echart组件动态渲染指标方法，适用于Java和JavaScript编程语言主题查询配置个性化定制，并使用ECharts提供直观、可交互的数据可视化图表的方法。方便后续扩展和接口的灵活性，可使用不同策略模式的图表基于echart组件进行动态渲染后接入接口，并通过统一接口完善生成查询逻辑，各自维护对应接口的查询逻辑。保证系统灵活接入性。同时增加动态生成SQL功能，并对查询结果进行计算处理。优化技术提升主题数据查询性能。主题数据查询性能。


技术研发人员：谢攀 周艺 张恒 郭凯强 杨智 向鹏宇 王强
受保护的技术使用者：中电万维信息技术有限责任公司
技术研发日：2022.12.12
技术公布日：2023/8/9