CN116257666A - 一种基于Echarts的数据动态渲染展示方法及系统 - Google Patents

一种基于Echarts的数据动态渲染展示方法及系统 Download PDF

Info

Publication number
CN116257666A
CN116257666A CN202310168037.4A CN202310168037A CN116257666A CN 116257666 A CN116257666 A CN 116257666A CN 202310168037 A CN202310168037 A CN 202310168037A CN 116257666 A CN116257666 A CN 116257666A
Authority
CN
China
Prior art keywords
data
displayed
chart
rendering
echarts
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310168037.4A
Other languages
English (en)
Inventor
刘鹏
徐英辉
邓春宇
王大中
赵伟森
张保亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Electric Power Research Institute Co Ltd CEPRI
Original Assignee
China Electric Power Research Institute Co Ltd CEPRI
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Electric Power Research Institute Co Ltd CEPRI filed Critical China Electric Power Research Institute Co Ltd CEPRI
Priority to CN202310168037.4A priority Critical patent/CN116257666A/zh
Publication of CN116257666A publication Critical patent/CN116257666A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/904—Browsing; Visualisation therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/25—Integrating or interfacing systems involving database management systems
    • G06F16/258—Data format conversion from or to a database
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/901—Indexing; Data structures therefor; Storage structures
    • G06F16/9024—Graphs; Linked lists
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/903—Querying
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明实施例提供一种基于Echarts的数据动态渲染展示方法及系统，方法包括：根据所述数据查询请求在动态数据库中进行查询，将查询得到的动态实时数据作为待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；将所述待展示数据与所述目标图表进行关联和渲染，以通过目标图表展示所述待展示数据。对所述待展示数据进行数据监听，当待展示数据改变时，将改变后的数据与所述目标图表进行关联和渲染。本申请采用监听数据的方式，当待展示数据发生改变时，将改变后的数据与目标图表重新进行关联和渲染，以实现动态的渲染数据。

Description

一种基于Echarts的数据动态渲染展示方法及系统
技术领域
本发明实施例涉及数据处理技术领域，尤其涉及一种基于Echarts的数据动态渲染展示方法。
背景技术
目前人们在各个领域面对海量数据，需要借助数据可视化技术把海量数据转换为动态图像或图形，并利用交互手段帮助人们进行理解数据，以便完成进一步的数据分析。
在大数据的浪潮中，数据可视化技术得到了高度重视和广泛的应用，数据的图形化展示能够清楚直观地了解数据的特性和规律。目前，数据可视化技术在很多领域已经比较成熟，但是动态数据可视化技术仍在研究和探索中，如何实现数据的动态渲染，是需要解决的问题。
发明内容
本发明实施例提供一种基于Echarts的数据动态渲染展示方法，以解决现有技术的上述问题。
第一方面，本发明实施例提供一种基于Echarts的数据动态渲染展示方法，包括：
获取待展示数据；
加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
将所述待展示数据与所述目标图表进行关联和渲染。
作为优选的，所述获取待展示数据，包括:
接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据。
作为优选的，所述预设数据库为动态数据库，相应的，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据，包括:根据所述数据查询请求在动态数据库中进行查询，将查询得到的动态实时数据作为待展示数据。
作为优选的，基于Echarts的数据动态渲染展示方法还包括：对所述待展示数据进行数据监听，当待展示数据改变时，将改变后的数据与所述目标图表进行关联和渲染。
作为优选的，根据所述待展示数据，在Echarts图表库中选取目标图表，包括：
根据所述待展示数据的数据结构，在Echarts图表库的多种图表组件中选取目标图表；其中，所述目标图表的图表类型包括折线图、柱状图、散点图、饼图、K线图，地图、热力图和线图。
作为优选的，将所述待展示数据与所述目标图表进行关联和渲染：包括：
获取所述目标图表的数据格式，将待展示数据的格式转换转换为与目标图表的数据格式一致；
将格式转换后的待展示数据与目标图表进行关联，以获得目标图表的配置项和数据，根据目标图表的配置项和数据渲染目标图表。
作为优选的，所述目标图表的配置项至少包括标题组件title、系列列表组件series、提示框组件tooltip和视觉映射组件visualMap。
第二方面，本发明实施例提供一种基于Echarts的数据动态渲染展示系统，包括：
获取模块，用于获取待展示数据；
图表选取模块，用于加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
渲染模块，用于将所述待展示数据与所述目标图表进行关联和渲染。
第三方面，本发明实施例提供了一种电子设备，包括：
处理器、存储器、通信接口和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行上述一种基于Echarts的数据动态渲染展示方法。
第四方面，本发明实施例提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述一种基于Echarts的数据动态渲染展示方法。
本发明实施例提供的一种基于Echarts的数据动态渲染展示方法，获取待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；将所述待展示数据与所述目标图表进行关联和渲染，以通过目标图表展示所述待展示数据。当待展示数据发生改变时，将改变后的数据与目标图表进行再一次的关联和渲染，以实现动态的渲染数据。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的基于Echarts的数据动态渲染展示方法流程图；
图2为本发明实施例提供的基于Echarts的数据动态渲染展示方法另一流程图；
图3为本发明实施例提供的一种基于Echarts的数据动态渲染展示系统的结构框图；
图4是本发明实施例提供的一种电子设备的结构框图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
在大数据的浪潮中，数据可视化技术得到了高度重视和广泛的应用，数据的图形化展示能够清楚直观地了解数据的特性和规律。目前，数据可视化技术在很多领域已经比较成熟，但是动态数据可视化技术仍在研究和探索中，如何实现数据的动态渲染，是需要解决的问题。
因此，本发明实施例提供一种基于Echarts的数据动态渲染展示方法，图1为根据本发明实施例提供的基于Echarts的数据动态渲染展示方法流程图，参照图1，该方法包括：
步骤101，接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据。
其中，待展示数据是需要进行数据可视化渲染的目标数据。本实施例中，待展示数据可以从预先设置的数据库中获取。
步骤102，加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
ECharts是一款基于JavaScript的数据可视化图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
本实施例中，加载Echarts图表库，Echarts图表库中包含不同类型的图表模板，图表类型至少包括折线图、柱状图、散点图、饼图、K线图，地图、热力图和线图。在获取待展示数据后，根据所述待展示数据的数据结构，在Echarts图表库的多种图表组件中选取目标图表。例如，如果待展示数据为疫情在各地的分布数据，则分析疫情分布数据的数据结构特点，在Echarts图表库中选取地图作为目标图表。如果待展示数据为多组具体数值的业务数据(例如销售量)时，则选取柱状图作为目标图表。如果待展示数据为百分比数据时，则在Echarts图表库中选取饼图作为目标图表。本实施例分析待展示数据的数据结构特点后，能够选取合适的可视化图表类型。
步骤103，将所述待展示数据与所述目标图表进行关联和渲染。
对于步骤103，首先，获取所述目标图表的数据格式，将待展示数据的格式转换转换为与目标图表的数据格式一致。然后，将格式转换后的待展示数据与目标图表进行关联，以获得目标图表的配置项和数据，根据目标图表的配置项和数据渲染目标图表。其中，所述目标图表的配置项至少包括标题组件title、系列列表组件series、提示框组件tooltip和视觉映射组件visualMap。
本发明实施例提供的一种基于Echarts的数据动态渲染展示方法，获取待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表，用户能够根据需求灵活选取目标图表。将所述待展示数据与所述目标图表进行关联和渲染，以通过目标图表展示所述待展示数据，达到数据渲染展示的效果。
图2为本发明实施例提供的基于Echarts的数据动态渲染展示方法另一流程图，参照图2，在上述实施例的基础上，步骤101中，待展示数据可以从预先设置的数据库中获取，如果预先设置的数据库为动态数据库，例如用户想要获取天气预报数据进行数据动态渲染展示。则本实施例基于Echarts的数据动态渲染展示方法具体包括:
步骤201，根据所述数据查询请求在动态数据库中进行查询，将查询得到的动态实时数据作为待展示数据。
步骤202，加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表。
步骤203，将所述待展示数据与所述目标图表进行关联和渲染。
步骤204，对所述待展示数据进行数据监听，当待展示数据改变时，将改变后的数据与所述目标图表进行关联和渲染。
可以理解的是，本申请为实现动态数据的可视化渲染，在步骤204中采用监听数据的方式，当待展示数据发生改变时，将改变后的数据与目标图表重新进行关联和渲染，以实现动态的渲染数据。
图3为本发明实施例提供的一种基于Echarts的数据动态渲染展示系统的结构框图，如图3所示，该系统包括：获取模块301、图表选取模块302和渲染模块303，其中：
获取模块301，用于获取待展示数据；
图表选取模块302，用于加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
渲染模块303，用于将所述待展示数据与所述目标图表进行关联和渲染。
具体的如何通过获取模块301、图表选取模块302和渲染模块303以执行图1所示的一种基于Echarts的数据动态渲染展示方法，其具体步骤已在图1所示的实施例中描述，此处不再赘述。
图4是本发明实施例提供的一种电子设备的结构框图，参照图4，所述电子设备，包括：处理器(processor)401、通信接口(Communications Interface)402、存储器(memory)403和通信总线404，其中，处理器401，通信接口402，存储器403通过通信总线404完成相互间的通信。处理器401可以调用存储器403中的逻辑指令，以执行如下方法：接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；将所述待展示数据与所述目标图表进行关联和渲染。
本发明实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；将所述待展示数据与所述目标图表进行关联和渲染。
本发明实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据；加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；将所述待展示数据与所述目标图表进行关联和渲染。
需要说明的是，在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其它实施例的相关描述。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式计算机或者其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包括这些改动和变型在内。。

Claims (10)

1.一种基于Echarts的数据动态渲染展示方法，其特征在于，包括：
获取待展示数据；
加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
将所述待展示数据与所述目标图表进行关联和渲染。
2.根据权利要求1所述的基于Echarts的数据动态渲染展示方法，其特征在于，所述获取待展示数据，包括:
接收数据查询请求，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据。
3.根据权利要求2所述的基于Echarts的数据动态渲染展示方法，其特征在于，所述预设数据库为动态数据库，相应的，根据所述数据查询请求在预设数据库中进行查询，将查询得到的数据作为待展示数据，包括:
根据所述数据查询请求在动态数据库中进行查询，将查询得到的动态实时数据作为待展示数据。
4.根据权利要求3所述的基于Echarts的数据动态渲染展示方法，其特征在于，还包括：
对所述待展示数据进行数据监听，当待展示数据改变时，将改变后的数据与所述目标图表进行关联和渲染。
5.根据权利要求1所述的基于Echarts的数据动态渲染展示方法，其特征在于，根据所述待展示数据，在Echarts图表库中选取目标图表，包括：
根据所述待展示数据的数据结构，在Echarts图表库的多种图表组件中选取目标图表；其中，所述目标图表的图表类型包括折线图、柱状图、散点图、饼图、K线图，地图、热力图和线图。
6.根据权利要求1所述的基于Echarts的数据动态渲染展示方法，其特征在于，将所述待展示数据与所述目标图表进行关联和渲染：包括：
获取所述目标图表的数据格式，将待展示数据的格式转换转换为与目标图表的数据格式一致；
将格式转换后的待展示数据与目标图表进行关联，以获得目标图表的配置项和数据，根据目标图表的配置项和数据渲染目标图表。
7.根据权利要求6所述的基于Echarts的数据动态渲染展示方法，其特征在于，所述目标图表的配置项至少包括标题组件title、系列列表组件series、提示框组件tooltip和视觉映射组件visualMap。
8.一种基于Echarts的数据动态渲染展示系统，其特征在于，包括：
获取模块，用于获取待展示数据；
图表选取模块，用于加载Echarts图表库，根据所述待展示数据，在Echarts图表库中选取目标图表；
渲染模块，用于将所述待展示数据与所述目标图表进行关联和渲染。
9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至7任一项所述基于Echarts的数据动态渲染展示方法的步骤。
10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述基于Echarts的数据动态渲染展示方法的步骤。
CN202310168037.4A 2023-02-27 2023-02-27 一种基于Echarts的数据动态渲染展示方法及系统 Pending CN116257666A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310168037.4A CN116257666A (zh) 2023-02-27 2023-02-27 一种基于Echarts的数据动态渲染展示方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310168037.4A CN116257666A (zh) 2023-02-27 2023-02-27 一种基于Echarts的数据动态渲染展示方法及系统

Publications (1)

Publication Number Publication Date
CN116257666A true CN116257666A (zh) 2023-06-13

Family

ID=86683961

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310168037.4A Pending CN116257666A (zh) 2023-02-27 2023-02-27 一种基于Echarts的数据动态渲染展示方法及系统

Country Status (1)

Country Link
CN (1) CN116257666A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117687737A (zh) * 2024-02-01 2024-03-12 成都数之联科技股份有限公司 一种Echarts图表显示优化方法及系统

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117687737A (zh) * 2024-02-01 2024-03-12 成都数之联科技股份有限公司 一种Echarts图表显示优化方法及系统
CN117687737B (zh) * 2024-02-01 2024-04-12 成都数之联科技股份有限公司 一种Echarts图表显示优化方法及系统

Similar Documents

Publication Publication Date Title
CN110019560B (zh) 一种基于知识图谱的查询方法及装置
CN108228169B (zh) 基于eCharts工具的图表制作方法、装置、设备及介质
CN107944481B (zh) 用于生成信息的方法和装置
KR20200109230A (ko) 뉴럴 네트워크 생성 방법 및 장치
CN108255897B (zh) 可视化图表数据转换处理方法和装置
CN111049878A (zh) 微服务调用链具象化的方法、装置、电子装置及存储介质
CN111433762A (zh) 将软件应用的用户界面中的内容以图形方式进行组织
US20160147882A1 (en) Object Search Method and Apparatus
CN104850388A (zh) 网页绘制方法及装置
US11244153B2 (en) Method and apparatus for processing information
CN112527848A (zh) 基于多数据源的报表数据查询方法、装置、系统及存储介质
CN101667171A (zh) 生成报表的方法及报表生成装置
CN116257666A (zh) 一种基于Echarts的数据动态渲染展示方法及系统
CN114443992A (zh) 数据可视化展示方法、装置、电子设备及存储介质
CN111897812A (zh) 数据查询方法、装置、电子设备及计算机可读存储介质
CN111915420A (zh) 标签的创建方法、装置、电子设备及计算机可读存储介质
CN106598375B (zh) 智能终端应用内容呈现的方法、装置及智能终端
CN113010582A (zh) 数据处理方法、装置、计算机可读介质及电子设备
CN109933749B (zh) 用于生成信息的方法和装置
CN106569816B (zh) 一种渲染方法及装置
CN115277865A (zh) 一种设备面板的展示方法、设备及介质
CN111078518B (zh) 数据采集方法、终端设备和计算机可读存储介质
CN109299223B (zh) 用于查询指令的方法及装置
CN115034175A (zh) 表格数据处理方法、装置、终端和存储介质
CN108205527B (zh) 一种发动机数据平衡的绘制方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication