本发明专利技术实施例公开了一种可视化数据显示方法、装置及可读介质，所述方法应用于WEB页面，所述WEB页面包括第一区域、第二区域以及第三区域；所示方法包括，以监听所述第一区域的用于选择可视化模板的选择操作为触发，确定与所述选择操作对应的模板配置文件；依据所述模板配置文件渲染可视化数据，并在所述第二区域中显示所述可视化数据；基于所述模板配置文件确定属性面板渲染参数；依据所述属性面板渲染参数渲染显示面板，并在所述第三区域显示所述属性面板；建立所述属性面板中组件与所述可视化数据的关联关系；其中，所述组件的组件参数改动时能够影响所述可视化数据的显示效果。改动时能够影响所述可视化数据的显示效果。改动时能够影响所述可视化数据的显示效果。
【技术实现步骤摘要】
一种可视化数据显示方法、装置和可读介质
[0001]本申请涉及计算机领域，尤其涉及一种可视化数据显示方法、装置和可读介质。
技术介绍
[0002]目前，利用开源的ECharts图表库，能够在Web页面上展示可视化图表。ECharts是 JavaScript开源库，目前很多可视化图表采用此库进行图表开发。
[0003]图1是现有技术中，利用EChart图表库展示可视化数据的界面示意图。从图1中可以 看出，目前的成熟技术中，页面分为两个区域，区域11是代码区域，区域12是展示区域。 当用户需要修改展示区域中的各种展示效果时，需要将代码区域中的代码，然后对代码进 行编译后才能够改变展示区域中所显示的内容。
[0004]为了解决现有技术所存在的缺陷，另一现有技术中，如图2所示，图2是现 有技术中，利用EChart图表库展示可视化数据的另一种界面示意图，区域21不 显示代码而显示可视化模板，如图2的区域21中示出的基础柱状图、基础条形 图、柱状堆叠图、逆向条形图、条形堆叠图、百分比柱状堆叠图、百分比条形堆 叠图等可视化模板，用户可以根据需要选择可视化模板，在区域22中显示可视 化模板对应的内容。
[0005]但是，此种方式如果需要修改某一属性，例如标题，则需要定制化修改模板。
[0006]可见，现有的可视化数据显示方法需要修改展示效果时，学习成本高，操作复杂。
技术实现思路
[0007]有鉴于此，本说明书实施例提供一种可视化数据显示方法、装置和可读介质，以在对 可视化数据的显示效果进行修改时，能够降低学习成本，提高操作效率。
[0008]为解决上述技术问题，本说明书实施例是这样实现的：
[0009]本专利技术实施例提供了一种可视化数据显示方法，应用于WEB页面，所述WEB页面包 括第一区域、第二区域以及第三区域；所示方法包括：
[0010]以监听所述第一区域的用于选择可视化模板的选择操作为触发，确定与所述选择操作 对应的模板配置文件；
[0011]依据所述模板配置文件渲染可视化数据，并在所述第二区域中显示所述可视化数据；
[0012]基于所述模板配置文件确定属性面板渲染参数；
[0013]依据所述属性面板渲染参数渲染显示面板，并在所述第三区域显示所述属性面板；
[0014]建立所述属性面板中组件与所述可视化数据的关联关系；其中，所述组件的组件参数 改动时能够影响所述可视化数据的显示效果。
[0015]在一些实施例中，所述方法还包括：
[0016]接收对所述属性面板中组件的组件参数进行修改的修改操作；
[0017]基于所述修改操作，确定所述模板配置文件中与所述组件参数对应的模板参数；
[0018]将所述模板参数修改为所述组件参数；
[0019]基于更新后的所述组件参数刷新所述可视化数据。
[0020]在一些实施例中，所述页面还包括第四区域，所述方法还包括：
[0021]确定所述可视化数据对应的可修改参数；
[0022]基于所述可修改参数在所述第四区域中显示可修改参数表格。
[0023]在一些实施例中，所述方法还包括：
[0024]基于更新后的所述组件参数刷新所述可修改参数表格。
[0025]在一些实施例中，所述第四区域还包括代码第一子区域，所述代码第一子区域用于显 示所述可修改参数表格对应的代码。
[0026]在一些实施例中，还包括：
[0027]接收对所述代码的修改操作；
[0028]基于修改后的代码，更新所述可视化数据。
[0029]在一些实施例中，所述基于修改后的代码，更新所述可视化数据具体包括：
[0030]调用所述目标配置文件对应的实例接口，将所述代码渲染为可视化图表。
[0031]在一些实施例中，所述基于所述模板配置文件确定属性面板渲染参数具体包括：
[0032]提取所述模板配置文件对应的代码特征；
[0033]基于所代码特征确定与所述代码特征中控件类型相匹配的目标组件；
[0034]至少将所述模板配置文件对应的渲染样式以及所述目标组件的组件类型、组件参数作 为所述属性面板渲染参数。
[0035]本专利技术实施例另一方面提供了一种可视化数据显示装置，应用于WEB页面，所述WEB 页面包括第一区域、第二区域以及第三区域；所示装置包括：
[0036]触发模块，用于以监听所述第一区域的用于选择可视化模板的选择操作为触发，确定 与所述选择操作对应的模板配置文件；
[0037]第一渲染模块，用于依据所述模板配置文件渲染可视化数据，并在所述第二区域中显 示所述可视化数据；
[0038]参数确定模块，用于基于所述模板配置文件确定属性面板渲染参数；
[0039]第二渲染模块，用于依据所述属性面板渲染参数渲染显示面板，并在所述第三区域显 示所述属性面板；
[0040]关联模块，用于建立所述属性面板中组件与所述可视化数据的关联关系；其中，所述 组件的组件参数改动时能够影响所述可视化数据的显示效果。
[0041]本专利技术实施例另一方面还提供了一种计算机可读介质，其上存储有计算机可读指令， 所述计算机可读指令可被处理器执行以实现上述所述的可视化数据显示方法
[0042]本说明书一个实施例至少能够达到以下有益效果：在对可视化数据的显示效果进行修 改时，可以通过实时生成的属性面板就能够实现相应的操作，能够降低学习成本，提高操 作效率。
附图说明
[0043]为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有 技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是
本申 请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下， 还可以根据这些附图获得其他的附图。
[0044]图1是现有技术中，利用EChart图表库展示可视化数据的界面示意图。
[0045]图2是现有技术中，利用EChart图表库展示可视化数据的另一种界面示意图。
[0046]图3是本专利技术实施例提供的一种可视化数据显示方法的流程示意图。
[0047]图4是本专利技术实施例中提供的一种可视化数据显示方法的界面示意图。
[0048]图5为本专利技术实施例中一种可视化数据显示方法的另一种界面示意图。
[0049]图6为本说明书实施例提供的对应于图3的一种可视化数据显示装置的结构示意图。
具体实施方式
[0050]为了便于理解，对专利技术实施例中可能用到的名称进行解释。
[0051]1)组件：可视化网页应用中可配置的最小单元
[0052]2)可配置属性：组件向外暴露出的可调整、可配置参数的集合。
[0053]3)数据特征：基于数据类型的特征，如整形，浮点，字符串，哈希表，列表等。
[0054]4)echarts图表库：apache基金会本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种可视化数据显示方法，其特征在于，应用于WEB页面，所述WEB页面包括第一区域、第二区域以及第三区域；所述方法包括：以监听所述第一区域的用于选择可视化模板的选择操作为触发，确定与所述选择操作对应的模板配置文件；依据所述模板配置文件渲染可视化数据，并在所述第二区域中显示所述可视化数据；基于所述模板配置文件确定属性面板渲染参数；依据所述属性面板渲染参数渲染显示面板，并在所述第三区域显示所述属性面板；建立所述属性面板中组件与所述可视化数据的关联关系；其中，所述组件的组件参数改动时能够影响所述可视化数据的显示效果。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：接收对所述属性面板中组件的组件参数进行修改的修改操作；基于所述修改操作，确定所述模板配置文件中与所述组件参数对应的模板参数；将所述模板参数修改为所述组件参数；基于更新后的所述组件参数刷新所述可视化数据。3.根据权利要求2所述的方法，其特征在于，所述页面还包括第四区域，所述方法还包括：确定所述可视化数据对应的可修改参数；基于所述可修改参数在所述第四区域中显示可修改参数表格。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：基于更新后的所述组件参数刷新所述可修改参数表格。5.根据权利要求3所述的方法，其特征在于，所述第四区域还包括代码第一子区域，所述代码第一子区域用于显示所述可修改参数表格对应的代码。6.根据权利要求5所述的方法，其特征在于，还包括：接收对所述代码的修改操作...
【专利技术属性】
技术研发人员：李承展，李慧洁，王波，蒋品，
申请(专利权)人：北京光启元数字科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。