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

说明书

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

技术领域

本发明涉及计算机技术领域，特别涉及一种基于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的图表配置装置，包括：