[发明专利]一种基于vue的图表配置方法、装置、设备和介质

权利要求书

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的图表配置装置，其特征在于：包括：

图表控件，在被选择时响应一图表类型选择框；当图表类型选择框被选中时，于图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；

数据源获取模块，用于提供三种数据源获取方式供选择：

第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；

第二种，通过访问数据接口地址直接获取展示数据；

第三种，通过代码块访问获取展示数据；

渲染展示模块，用于根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。