可视化数据显示方法、系统、设备及计算机可读存储介质技术方案

本发明专利技术涉及数据可视化技术领域，公开了一种可视化数据显示方法、系统、设备及计算机可读存储介质。该方法包括：父组件接收后台数据，并在第一显示区显示后台数据；父组件通过props接口将后台数据传递给Echarts‑vue组件；Echarts‑vue组件根据后台数据生成Echarts图例，并在第二显示区显示Echarts图例；当Echarts‑vue组件监听到基于Echarts图例触发的图例点击事件时，在第一显示区显示图例点击事件对应的目标数据，目标数据为图例点击事件对应的图例元素在后台数据中对应的数据。本发明专利技术实现了图例双向联动功能，使得交互更加生动，对可视化数据的显示更加清晰明了。

Visual data display method, system, equipment and computer readable storage medium

【技术实现步骤摘要】
可视化数据显示方法、系统、设备及计算机可读存储介质
本专利技术涉及数据可视化
，尤其涉及可视化数据显示方法、系统、设备及计算机可读存储介质。
技术介绍
web前端原生技术对于绘制图表可以使用html5的canvas。但是对于一些复杂的图表显示，若通过canvas实现，需要编写数量庞大且复杂的代码，时间成本和人力成本都很大。Echarts的出现很好的解决了这一问题。Echarts是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，且兼容当前绝大部分浏览器。现有技术中，常用的做法是在Echarts插件基础上结合vueJs组件化特性，二次封装了一个Echarts-vue组件。但是，单纯封装后的Echarts-vue组件只能实现通过对父组件数据进行控制，从而控制图例的显示，而不能通过对显示的图例进行控制，从而控制父组件数据的显示。
技术实现思路
本专利技术的主要目的在于提供一种可视化数据显示方法、系统、设备及计算机可读存储介质，旨在解决现有技术中，单纯封装后的Echarts-vue组件只能实现通过对父组件数据进行控制，从而控制图例的显示，而不能通过对显示的图例进行控制，从而控制父组件数据的显示的技术问题。为实现上述目的，本专利技术提供一种可视化数据显示方法，应用于可视化数据展示系统，所述可视化数据展示系统包括父组件和Echarts-vue组件，所述可视化数据显示方法包括：所述父组件接收后台数据，并在第一显示区显示所述后台数据；<br>所述父组件通过props接口将所述后台数据传递给所述Echarts-vue组件；所述Echarts-vue组件根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例；当所述Echarts-vue组件监听到基于所述Echarts图例触发的图例点击事件时，在所述第一显示区显示所述图例点击事件对应的目标数据，所述目标数据为所述图例点击事件对应的图例元素在所述后台数据中对应的数据。此外，为实现上述目的，本专利技术还提供一种可视化数据显示系统，所述可视化数据显示系统包括：父组件和Echarts-vue组件，所述父组件，用于接收后台数据，并在第一显示区显示所述后台数据；通过props接口将所述后台数据传递给Echarts-vue组件；所述Echarts-vue组件，用于根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例；当监听到基于所述Echarts图例触发的图例点击事件时，在所述第一显示区显示所述图例点击事件对应的目标数据，所述目标数据为所述图例点击事件对应的图例元素在所述后台数据中对应的数据。此外，为实现上述目的，本专利技术还提供一种可视化数据显示设备，所述可视化数据显示设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的可视化数据显示程序，所述可视化数据显示程序被所述处理器执行时实现如上所述的可视化数据显示方法的步骤。此外，为实现上述目的，本专利技术还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有可视化数据显示程序，所述可视化数据显示程序被处理器执行时实现如上所述的可视化数据显示方法的步骤。本专利技术中，所述父组件接收后台数据，并在第一显示区显示所述后台数据；所述父组件通过props接口将所述后台数据传递给所述Echarts-vue组件；所述Echarts-vue组件根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例；当所述Echarts-vue组件监听到基于所述Echarts图例触发的图例点击事件时，在所述第一显示区显示所述图例点击事件对应的目标数据，所述目标数据为所述图例点击事件对应的图例元素在所述后台数据中对应的数据。通过本专利技术，实现了对显示的图例进行控制，从而控制父组件数据的显示的技术效果，即实现了图例双向联动功能，使得交互更加生动，对可视化数据的显示更加清晰明了。附图说明图1为本专利技术实施例方案涉及的硬件运行环境的可视化数据显示设备结构示意图；图2为本专利技术可视化数据显示方法一实施例的流程示意图；图3为本专利技术可视化数据显示方法一实施例中在第一显示区显示后台数据的场景示意；图4为本专利技术可视化数据显示方法一实施例中在第二显示区显示Echarts图例的场景示意图；图5为本专利技术可视化数据显示方法一实施例中图例点击事件的场景示意图；图6为本专利技术可视化数据显示方法另一实施例中在第一显示区显示后台数据的场景示意图；图7为本专利技术可视化数据显示方法一实施例中在y轴零刻度为预设高度的坐标轴上根据后台数据生成的Echarts图例的示意图；图8为本专利技术可视化数据显示系统一实施例的功能模块示意图。本专利技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。具体实施方式应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。如图1所示，图1为本专利技术实施例方案涉及的硬件运行环境的可视化数据显示设备结构示意图。如图1所示，该可视化数据显示设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatilememory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。本领域技术人员可以理解，图1中示出的可视化数据显示设备结构并不构成对可视化数据显示设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及可视化数据显示程序。在图1所示的可视化数据显示设备中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的可视化数据显示程序，并执行以下可视化数据显示方法各个实施例的操作。参照图2，图2为本专利技术可视化数据显示方法一实施例的流程示意图。在一实施例中，可视化数据显示方法应用于可视化数据展示系统，所述可视化数据展示系统包括父组件和Echarts-vue组件，所述可视化数据显示方法包括：步骤S10，所述父组件接收后台数据，并在第一显示区显示所述后台数据；本实施例中，Echarts-vue组件是在Echarts插件基础上结合vu本文档来自技高网...

【技术保护点】
1.一种可视化数据显示方法，其特征在于，应用于可视化数据展示系统，所述可视化数据展示系统包括父组件和Echarts-vue组件，所述可视化数据显示方法包括：/n所述父组件接收后台数据，并在第一显示区显示所述后台数据；/n所述父组件通过props接口将所述后台数据传递给所述Echarts-vue组件；/n所述Echarts-vue组件根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例；/n当所述Echarts-vue组件监听到基于所述Echarts图例触发的图例点击事件时，在所述第一显示区显示所述图例点击事件对应的目标数据，所述目标数据为所述图例点击事件对应的图例元素在所述后台数据中对应的数据。/n

【技术特征摘要】
1.一种可视化数据显示方法，其特征在于，应用于可视化数据展示系统，所述可视化数据展示系统包括父组件和Echarts-vue组件，所述可视化数据显示方法包括：
所述父组件接收后台数据，并在第一显示区显示所述后台数据；
所述父组件通过props接口将所述后台数据传递给所述Echarts-vue组件；
所述Echarts-vue组件根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例；
当所述Echarts-vue组件监听到基于所述Echarts图例触发的图例点击事件时，在所述第一显示区显示所述图例点击事件对应的目标数据，所述目标数据为所述图例点击事件对应的图例元素在所述后台数据中对应的数据。


2.如权利要求1所述的可视化数据显示方法，其特征在于，所述Echarts-vue组件根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例的步骤，包括：
所述Echarts-vue组件检测所述后台数据对应的时间点个数是否小于或等于预设阈值；
若所述后台数据对应的时间点个数小于或等于预设阈值，则根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例。


3.如权利要求2所述的可视化数据显示方法，其特征在于，所述根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例的步骤，包括：
当检测到所述后台数据中在坐标系中包括纵坐标轴为零的数据时，在纵坐标轴零刻度为预设高度的坐标轴上根据所述后台数据生成Echarts图例，并在第二显示区显示所述Echarts图例。


4.如权利要求2所述的可视化数据显示方法，其特征在于，在所述Echarts-vue组件检测所述后台数据对应的时间点个数是否小于或等于预设阈值的步骤之后，还包括：
若所述后台数据对应的时间点个数大于预设阈值，则显示时间选择窗口；
接收基于所述时间选择窗口输入的设定时间点；
根据所述设定时间点以及所述预设阈值，从所述后台数据中确定待渲染数据；
根据所述待渲染数据生成Echarts图例，并在第二显示区显示所述Echarts图例。


5.如权利要求4所述的可视化数据显示方法，其特征在于，所述根据所述设定时间点以及所述预设阈值，从所述后台数据中确定待渲染数据的步骤包括：
检测所述后台数据对应的有效时间点中是否存在与所述设定时间点相同的时间点；
若所述后台数据对应的有效时间点中存在与所述设定时间点相...

【专利技术属性】
技术研发人员：杜珍，
申请(专利权)人：深圳壹账通智能科技有限公司，
类型：发明
国别省市：广东;44