一种基于vue的图表配置方法、装置、设备和介质制造方法及图纸

本发明专利技术提供一种基于vue的图表配置方法、装置、设备和介质，方法包括下述步骤：S1、提供图表控件，在图表控件被选择时响应一图表类型选择框；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；S2、提供三种数据源获取方式供选择：通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；通过访问数据接口地址直接获；通过代码块访问获取；S3、渲染获取到的展示数据。本发明专利技术是在v‑charts的基础上，将配置项文字化，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解即可以实现常见的图表展示。

【技术实现步骤摘要】
一种基于vue的图表配置方法、装置、设备和介质
本专利技术涉及计算机
，特别涉及一种基于vue的图表配置方法、装置、设备和介质。
技术介绍
ECharts是一款由百度前端技术部开发的、基于Javascript的数据可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。但是目前在使用ECharts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项。如图1所示，ECharts要实现一个多轴堆叠柱形图需要有左侧大量的配置，横轴/维度(xAxis)与纵轴/指标(yAxis)以数组里面存对象的形式组成，几个轴就有几个对象，堆叠项以series数组里的对象配置stack属性定义而成(见图1左侧部分)，层级较深，内容固定，处理麻烦。而v-charts的出现正是为了解决这个痛点，v-charts一种基于ECharts图表形成的插件，将Echarts中许多复杂的配置项重新封装，降低配置间的耦合性，操作灵活，自由度高；基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。但目前的v-charts图表组件仍需要用户自定义配置项后才能使用，而不能直接使用。举例说明：如图1所示，使用ECharts生成图表时，用户每建立一个图表都需要去定义一个变量，比如定义变量option1去存储配置项，还需要将option1挂到id1对应的div标签上然后初始化展示图表。而使用v-charts图表组件生成图表时，v-charts图表组件封装后，虽然减少了用户需要将option1挂到id1对应的div标签上的定义标签过程，但如图2所示，仍需定义option配置项(见图2左侧部分)，因此仍然为用户造成一定程度的不便。
技术实现思路
本专利技术要解决的技术问题，在于提供一种基于vue的图表配置方法、装置、设备和介质，在v-charts的基础上，将配置项文字化，以切换开关、选择框或输入框为主要配置方式，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解即可以实现常见的图表展示。第一方面，本专利技术提供了一种基于vue的图表配置方法，包括下述步骤：S1、提供图表控件，在图表控件被选择时响应一图表类型选择框；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；S2、提供三种数据源获取方式供选择：第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；第二种，通过访问数据接口地址直接获取展示数据；第三种，通过代码块访问获取展示数据；S3、根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。第二方面，本专利技术提供了一种基于vue的图表配置装置，包括：图表控件，在被选择时响应一图表类型选择框；当图表类型选择框被选中时，于图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；数据源获取模块，用于提供三种数据源获取方式供选择：第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；第二种，通过访问数据接口地址直接获取展示数据；第三种，通过代码块访问获取展示数据；渲染展示模块，用于根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。第三方面，本专利技术提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。第四方面，本专利技术提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。本专利技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：在v-charts的基础上，将配置项文字化，以切换开关、选择框或输入框为主要配置方式，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解，也可以实现常见的图表展示，打破技术的束缚，通过图表基础配置丰富图表内容，通过自定义配置可实现更多复杂功能。其次，用于展示的数据来源共有三种选择方式，就可使用的图表展示页面，还可配置多久请求一次实现动态展示，也可以根据业务需求动态切换展示轴，灵活多变。再者，图表控件可以直接被拖拽从而方便地定义图表类型，同时触发配置项，方便操作。还提供了自定义配置项，继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效，方便观察调整。所以本次技术实现是一种基于ECharts图表形成的v-charts插件，不需要再通过前端初始化配置，操作灵活，自由度高。只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。保证所使用的图表，都是最小的文件，通过直接封装ECharts配置项，生成逻辑在组件内部，避免了开发者直接生成繁琐的配置项；并且，v-charts内部处理了Echarts的打包问题，每种图表只引入对应的模块，保证了最后生成的代码体积为最小。能使用户可以快速看出数据存在的问题、趋势、比较分析。因为人类对图表中的颜色、大小、形状更加敏感，所以采取配置项文字化，不需要对前端技术有太多的了解，后端人员也可轻松实现。数据可通过配置多久请求一次实现动态展示，也可以根据业务需求动态切换展示轴，不再是固定写死的坐标轴，灵活多变。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明下面参照附图结合实施例对本专利技术作进一步的说明。图1为现有通过ECharts实现一个多轴堆叠柱形图时的配置状态示意图。图2为现有通过v-charts图表组件生成图表时的配置状态示意图。图3为本专利技术实施例一中方法的流程图。图4为采用本专利技术图表控件生成图表时的配置状态示意图。图5为本专利技术提供三种数据源获取方式的流程示意图。图6和图7均为本专利技术基础配置项的配置状态示意图。图8为本专利技术自定义配置项的配置状态示意图。图9为本专利技术将展示数据整理成第一种格式时的配置状态示意图。图10为本专利技术将展示数据整理成第二种格式时的配置状态示意图。图11为本专利技术根据实际业务需求动态调整显示的指标的配置状态示意图。图12为本专利技术图表联动配置的流程示意图。图13为本专利技术实施例二中装置的结构示意图；本文档来自技高网...

【技术保护点】
1.一种基于vue的图表配置方法，其特征在于：包括下述步骤：/nS1、提供图表控件，在图表控件被选择时响应一图表类型选择框；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；/nS2、提供三种数据源获取方式供选择：/n第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；/n第二种，通过访问数据接口地址直接获取展示数据；/n第三种，通过代码块访问获取展示数据；/nS3、根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。/n

【技术特征摘要】
1.一种基于vue的图表配置方法，其特征在于：包括下述步骤：
S1、提供图表控件，在图表控件被选择时响应一图表类型选择框；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；
S2、提供三种数据源获取方式供选择：
第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；
第二种，通过访问数据接口地址直接获取展示数据；
第三种，通过代码块访问获取展示数据；
S3、根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。


2.根据权利要求1所述的一种基于vue的图表配置方法，其特征在于：
所述步骤S1中，所述图表控件为拖拽控件，设于拖拽区，选择方式为拖拽；
所述步骤S2中，通过所述第三种数据源获取方式时能兼容已经编写好的展示数据，通过监听定时器来控制多久请求一次展示数据；
所述步骤S2中，当获取到展示数据时，数据整理成如下两种格式：
(1)、针对都只有一个指标且只一个维度的情况，将维度值存在name属性中，将指标值存在value属性中，使内容随着标维度值的变换而变换；
(2)、针对其它情况，将维度值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到指标存放的地方，并根据实际业务需求动态调整显示的指标；或者是将指标值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到维度存放的地方，并根据实际业务需求动态调整显示的维度。


3.根据权利要求1所述的一种基于vue的图表配置方法，其特征在于：
所述配置项还包括自定义配置项，自定义配置项继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效；
所述基础配置项具体包含：
标题、数据、提示框、图例、横轴和纵轴的配置项；
图例、标题、显示/隐藏，显示的情况下提供图例字体大小、颜色、定位和格式化的配置项；以及
横轴/纵轴：轴数据显示/隐藏、轴数据、轴刻度的格式化、分隔线显示/隐藏、轴名称、轴刻度标签大小、轴刻度标签旋转角度、轴/刻度标签颜色的配置项。


4.根据权利要求3所述的一种基于vue的图表配置方法，其特征在于：还包括：
步骤S4、所述图表配置区还显示联动配置项，供配置传递参数的控件别名和取值字段，用以将副图表通过所述传递参数绑定于主图表上，实时监听主图表的传递参数，一旦主图表的传递参数的取值字段内容发生变化，就触发联动查询，将该变化更新渲染至副图表。


5.一种基于vue的图表配置装置，其特征在于：包括：
图表控件，在被选择时响应一图表类型选择框；当图表类型选择框被选中时，于图表配置区显示...

【专利技术属性】
技术研发人员：黄家昌，陈雪梅，杨辉，邱道椿，
申请(专利权)人：福建亿能达信息技术股份有限公司，
类型：发明
国别省市：福建;35