CN111984177A - 一种基于vue的图表配置方法、装置、设备和介质 - Google Patents
一种基于vue的图表配置方法、装置、设备和介质 Download PDFInfo
- Publication number
- CN111984177A CN111984177A CN202010650518.5A CN202010650518A CN111984177A CN 111984177 A CN111984177 A CN 111984177A CN 202010650518 A CN202010650518 A CN 202010650518A CN 111984177 A CN111984177 A CN 111984177A
- Authority
- CN
- China
- Prior art keywords
- chart
- configuration
- data
- display
- configuration items
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000013515 script Methods 0.000 claims abstract description 14
- 238000009877 rendering Methods 0.000 claims abstract description 10
- 238000010586 diagram Methods 0.000 claims description 28
- 230000006870 function Effects 0.000 claims description 26
- 230000000694 effects Effects 0.000 claims description 18
- 238000004590 computer program Methods 0.000 claims description 15
- 230000005540 biological transmission Effects 0.000 claims description 12
- 230000002457 bidirectional effect Effects 0.000 claims description 8
- 230000008859 change Effects 0.000 claims description 7
- 230000001960 triggered effect Effects 0.000 claims description 6
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000000926 separation method Methods 0.000 claims description 4
- 238000006243 chemical reaction Methods 0.000 claims description 3
- 238000005516 engineering process Methods 0.000 abstract description 12
- 230000008569 process Effects 0.000 abstract description 9
- 238000012545 processing Methods 0.000 description 7
- 238000012546 transfer Methods 0.000 description 7
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000003491 array Methods 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 238000010835 comparative analysis Methods 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/109—Font handling; Temporal or kinetic typography
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明提供一种基于vue的图表配置方法、装置、设备和介质，方法包括下述步骤：S1、提供图表控件，在图表控件被选择时响应一图表类型选择框；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；S2、提供三种数据源获取方式供选择：通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；通过访问数据接口地址直接获；通过代码块访问获取；S3、渲染获取到的展示数据。本发明是在v‑charts的基础上，将配置项文字化，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解即可以实现常见的图表展示。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种基于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为本发明实施例二中装置的结构示意图；
图14为本发明实施例三中电子设备的结构示意图；
图15为本发明实施例四中介质的结构示意图。
具体实施方式
本申请实施例通过提供一种基于vue的图表配置方法、装置、设备和介质，在v-charts的基础上，将配置项文字化，以切换开关、选择框或输入框为主要配置方式，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解即可以实现常见的图表展示。
本申请实施例中的技术方案，总体思路如下：在v-charts的基础上，将配置项文字化，以切换开关、选择框或输入框为主要配置方式，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解，也可以实现常见的图表展示，打破技术的束缚，通过图表基础配置丰富图表内容，通过自定义配置可实现更多复杂功能。配置简单便捷实时生效，扩展性强，可根据实际业务需求动态改变显示轴，可定时更新数据，避免后期重复性的开发工作，有效的契合了业务频繁变更的场景，使后端开发人员不再受前端代码的约束展示自己想要的图表。不需要通过多次的更新部署，直接在线修改即可生效。
实施例一
如图3所示，本实施例提供一种基于vue的图表配置方法，包括下述步骤：
S1、提供图表控件，在图表控件被选择时响应一图表类型选择框；为便于操作，可将图表控件设计为拖拽控件，设于专门的拖拽区中，拖拽后即被选择；当图表类型选择框被选中时，图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；如图4所示，图表控件页面分成三部分，左侧为各种控件的拖拽区，中间为图表展示区、右侧为配置项的图表配置区，操作时，先从拖拽区拖拽出图表控件，页面响应一图表类型选择框，当用户选择其种一种图表类型时，图表配置区显示相应的基础配置项以供配置，用户只需简单地进行开关切换、选择或输入即可。
S2、如图5所示，提供三种数据源获取方式供选择：
第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；
第二种，通过访问数据接口地址直接获取展示数据；
第三种，通过代码块访问获取展示数据；这种数据源获取方式时能兼容之前已经编写好的展示数据，通过监听定时器来控制多久请求一次展示数据。
S3、根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。
如图1所示，要实现一个多轴堆叠柱形图需要有左侧大量的配置，横轴/维度(xAxis)与纵轴/指标(yAxis)以数组里面存对象的形式组成，几轴就有几个对象，堆叠项以series数组里的对象配置stack属性定义而成，层级较深内容固定处理麻烦。为了杜绝这种麻烦，本发明实施例采用的方法是：如前面所说当图表类型确定后，该图表类型所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能(v-model双向绑定功能是vue框架自带功能：页面配置发生改变，配置存储内容option也跟着变化，同步更新)，且能根据配置内容在图表展示区实时显示配置效果；如图6和图7所示，其中，所述基础配置项具体包含：
标题、数据、提示框、图例、横轴和纵轴的配置项；
图例、标题、显示/隐藏，显示的情况下提供图例字体大小、颜色、定位和格式化的配置项；以及
横轴/纵轴：轴数据显示/隐藏、轴数据、轴刻度的格式化、分隔线显示/隐藏、轴名称、轴刻度标签大小、轴刻度标签旋转角度、轴/刻度标签颜色的配置项。
其中，作为本实施例的一种更优的实现方式，所述方法中的配置项还包括自定义配置项，如图8所示，自定义配置项继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效；由于继承了用户使用ECharts图表属性的习惯，使配置不局限于v-charts，因此只要ECharts能做的基本都可以实现自定义控制，自定义配置包含了当前图表的所有信息，也可以直接修改基础配置，配置实时生效，方便代码复用，当基础配置项不能满足用户需求时，可以通过自定义配置项丰富界面达到效果。
本发明的图表类型种类多，分类细致，大类含小类只需定义不需要用户再转换。根据Echarts的配置项按照类型不同提前定义了不同类型图表所拥有的配置项，当用户确定选择图表类型后程序将根据选中类型获取属于该类型的配置项信息，在后台数据返回成功后，图表将按照默认定义的配置项渲染。
如图2所示，由于v-charts统一将数据存储到rows当中，指定维度(dimension)、指标(metrics)后渲染图表，当展示的维度或者指标发送变化的时候，需要代码中修改配置，本发明为了解决这一问题，三种数据来源，统一的数据格式动态展示，即在上述步骤S2中，当获取到展示数据时，展示数据整理成如下两种格式：
(1)、针对都只有一个指标且只一个维度的情况，如图8所示，将维度值存在name属性中，将指标值存在value属性中，使内容随着标维度值的变换而变换；
(2)、针对其它情况，如图9所示，将维度值存在name属性上动态展示，在查询成功后通过相应的api接口函数(如函数api：EA.reqResult)获取查询返回的值以及通过相应的api接口函数(如函数api：EA.getComponentByKeyName(keyName))获取当前图表控件所有属性，如图10所示，找到指标存放的地方，并根据实际业务需求动态调整显示的指标；或者是将指标值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到维度存放的地方，并根据实际业务需求动态调整显示的维度。
其中，作为本实施例的一种更优的实现方式，所述方法还包括：
步骤S4、所述图表配置区还显示联动配置项，供配置传递参数的控件别名和取值字段，如图12所示，用以将副图表通过所述传递参数绑定于主图表上，实时监听主图表的传递参数，一旦主图表的传递参数的取值字段内容发生变化，就触发联动查询，将该变化更新渲染至副图表。
例如：所述拖拽区的图表控件先后被拖拽两次，使展示区显示两个图表A、B，在图表配置区的联动配置项配置传递参数的控件别名和取值字段，将B图表通过所述传递参数绑定于A图表上，通过传递参数实现监听A图表的变化来触发联动查询，将该变化更新渲染至B图表。
基于同一发明构思，本申请还提供了与实施例一中的方法对应的装置，详见实施例二。
实施例二
如图13所示，在本实施例中提供了一种基于vue的图表配置装置，包括：
图表控件，在被选择时响应一图表类型选择框；具体的，为了操作方便，可将所述图表控件设置为拖拽控件，设于控件页面的拖拽区中，当图表类型选择框被选中时，选择方式为拖拽，于图表配置区显示相应的配置项以供配置，所述配置项包括以切换开关、选择框或输入框为配置方式的基础配置项；所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；如图4所示，图表控件页面分成三部分，左侧为各种控件的拖拽区，中间为图表展示区、右侧为配置项的图表配置区，操作时，先从拖拽区拖拽出图表控件，页面响应一图表类型选择框，当用户选择其种一种图表类型时，图表配置区显示相应的基础配置项以供配置，用户只需简单地进行开关切换、选择或输入即可。
数据源获取模块，用于提供三种数据源获取方式供选择，且三种数据来源，统一成两种数据格式，动态展示：
第一种，通过本地数据集sql编写脚本形成的脚本列表来选择已经编写好的展示数据；
第二种，通过访问数据接口地址直接获取展示数据；
第三种，通过代码块访问获取展示数据；
渲染展示模块，用于根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。
还包括：
联动配置项，联动配置项，设于所述图表配置区，供配置传递参数的控件别名和取值字段，经配置后将副图表通过所述传递参数绑定于主图表上，实时监听主图表的传递参数，一旦主图表的传递参数的取值字段内容发生变化，就触发联动查询，将该变化更新渲染至副图表。
其中，作为本实施例的一种更优或更为具体的实现方式，本实施例的基于vue的图表配置装置还具有如下特征：
所述数据源获取模块中，通过所述第三种数据源获取方式时能兼容已经编写好的展示数据，通过监听定时器来控制多久请求一次展示数据；
如图2所示，由于v-charts统一将数据存储到rows当中，指定维度(dimension)、指标(metrics)后渲染图表，当展示的维度或者指标发送变化的时候，需要代码中修改配置，本发明为了解决这一问题，在所述数据源获取模块中，当获取到展示数据时，展示数据整理成如下两种格式：
(1)、针对都只有一个指标且只一个维度的情况，如图8所示，将维度值存在name属性中，将指标值存在value属性中，使内容随着标维度值的变换而变换；
(2)、、针对其它情况，如图9所示，将维度值存在name属性上动态展示，在查询成功后通过相应的api接口函数(如函数api：EA.reqResult)获取查询返回的值以及通过相应的api接口函数(如函数api：EA.getComponentByKeyName(keyName))获取当前图表控件所有属性，如图10所示，找到指标存放的地方，并根据实际业务需求动态调整显示的指标；或者是将指标值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到维度存放的地方，并根据实际业务需求动态调整显示的维度。
如图1所示，要实现一个多轴堆叠柱形图需要有左侧大量的配置，横轴/维度(xAxis)与纵轴/指标(yAxis)以数组里面存对象的形式组成，几轴就有几个对象，堆叠项以series数组里的对象配置stack属性定义而成，层级较深内容固定处理麻烦。为了杜绝这种麻烦，本发明图表控件采用的方法是：如前面所说当图表类型确定后，该图表类型所述基础配置项的内容预先在内部已经定义好，并通过vue的v-model双向绑定功能，且能根据配置内容在图表展示区实时显示配置效果；如图6和图7所示，其中，所述基础配置项具体包含：
标题、数据、提示框、图例、横轴和纵轴的配置项；
图例、标题、显示/隐藏，显示的情况下提供图例字体大小、颜色、定位和格式化的配置项；以及
横轴/纵轴：轴数据显示/隐藏、轴数据、轴刻度的格式化、分隔线显示/隐藏、轴名称、轴刻度标签大小、轴刻度标签旋转角度、轴/刻度标签颜色的配置项。
其中，作为本实施例的一种更优的实现方式，所述方法中的配置项还包括自定义配置项，如图8所示，自定义配置项继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效；由于继承了用户使用ECharts图表属性的习惯，使配置不局限于v-charts，因此只要ECharts能做的基本都可以实现自定义控制，自定义配置包含了当前图表的所有信息，也可以直接修改基础配置，配置实时生效，方便代码复用，当基础配置项不能满足用户需求时，可以通过自定义配置项丰富界面达到效果。
本发明的图表类型种类多，分类细致，大类含小类只需定义不需要用户再转换。根据Echarts的配置项按照类型不同提前定义了不同类型图表所拥有的配置项，当用户确定选择图表类型后程序将根据选中类型获取属于该类型的配置项信息，在后台数据返回成功后，图表将按照默认定义的配置项渲染。
由于本发明实施例二所介绍的装置，为实施本发明实施例一的方法所采用的装置，故而基于本发明实施例一所介绍的方法，本领域所属人员能够了解该装置的具体结构及变形，故而在此不再赘述。凡是本发明实施例一的方法所采用的装置都属于本发明所欲保护的范围。
基于同一发明构思，本申请提供了实施例一对应的电子设备实施例，详见实施例三。
实施例三
本实施例提供了一种电子设备，如图14所示，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，可以实现实施例一中任一实施方式。
由于本实施例所介绍的电子设备为实施本申请实施例一中方法所采用的设备，故而基于本申请实施例一中所介绍的方法，本领域所属技术人员能够了解本实施例的电子设备的具体实施方式以及其各种变化形式，所以在此对于该电子设备如何实现本申请实施例中的方法不再详细介绍。只要本领域所属技术人员实施本申请实施例中的方法所采用的设备，都属于本申请所欲保护的范围。
基于同一发明构思，本申请提供了实施例一对应的存储介质，详见实施例四。
实施例四
本实施例提供一种计算机可读存储介质，如图15所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。
本申请实施例中提供的技术方案，至少具有如下技术效果或优点：本申请实施例提供的方法、装置、系统、设备及介质，在v-charts的基础上，将配置项文字化，以切换开关、选择框或输入框为主要配置方式，取消用户初始化自定义过程，统一数据格式，不需要对前端技术有太多的了解，也可以实现常见的图表展示，打破技术的束缚，通过图表基础配置丰富图表内容，通过自定义配置可实现更多复杂功能。其次，用于展示的数据来源共有三种选择方式，就可使用的图表展示页面，还可配置多久请求一次实现动态展示，也可以根据业务需求动态切换展示轴，灵活多变。再者，图表控件可以直接被拖拽从而方便地定义图表类型，同时触发配置项，方便操作。还提供了自定义配置项，继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效，方便观察调整。
本领域内的技术人员应明白，本发明的实施例可提供为方法、装置或系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。
Claims (10)
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编写脚本形成的脚本列表来选择已经编写好的展示数据；
第二种，通过访问数据接口地址直接获取展示数据；
第三种，通过代码块访问获取展示数据；
渲染展示模块，用于根据图表配置区的配置项的配置内容，渲染获取到的展示数据，在所述图表展示区进行图表展示。
6.根据权利要求5所述的一种基于vue的图表配置装置，其特征在于：
所述图表控件为拖拽控件，设于拖拽区，选择方式为拖拽；
所述数据源获取模块中，通过所述第三种数据源获取方式时能兼容已经编写好的展示数据，通过监听定时器来控制多久请求一次展示数据；
所述数据源获取模块中，当获取到展示数据时，数据整理成如下两种格式：
(1)、针对都只有一个指标且只一个维度的情况，将维度值存在name属性中，将指标值存在value属性中，使内容随着标维度值的变换而变换；
(2)、针对其它情况，将维度值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到指标存放的地方，并根据实际业务需求动态调整显示的指标；或者是将指标值存在name属性上动态展示，在查询成功后通过相应的api接口函数获取查询返回的值以及获取当前图表控件所有属性，找到维度存放的地方，并根据实际业务需求动态调整显示的维度。
7.根据权利要求5所述的一种基于vue的图表配置装置，其特征在于：所述配置项还包括自定义配置项，自定义配置项继承了ECharts图表属性，能配置当前图表的所有信息，且配置实时生效；
所述基础配置项具体包含：
标题、数据、提示框、图例、横轴和纵轴的配置项；
图例、标题、显示/隐藏，显示的情况下提供图例字体大小、颜色、定位和格式化的配置项；以及
横轴/纵轴：轴数据显示/隐藏、轴数据、轴刻度的格式化、分隔线显示/隐藏、轴名称、轴刻度标签大小、轴刻度标签旋转角度、轴/刻度标签颜色的配置项。
8.根据权利要求5所述的一种基于vue的图表配置装置，其特征在于：还包括：
联动配置项，设于所述图表配置区，供配置传递参数的控件别名和取值字段，经配置后将副图表通过所述传递参数绑定于主图表上，实时监听主图表的传递参数，一旦主图表的传递参数的取值字段内容发生变化，就触发联动查询，将该变化更新渲染至副图表。
9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至4任一项所述的方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至4任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010650518.5A CN111984177A (zh) | 2020-07-08 | 2020-07-08 | 一种基于vue的图表配置方法、装置、设备和介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010650518.5A CN111984177A (zh) | 2020-07-08 | 2020-07-08 | 一种基于vue的图表配置方法、装置、设备和介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111984177A true CN111984177A (zh) | 2020-11-24 |
Family
ID=73439078
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010650518.5A Pending CN111984177A (zh) | 2020-07-08 | 2020-07-08 | 一种基于vue的图表配置方法、装置、设备和介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111984177A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112560422A (zh) * | 2020-12-10 | 2021-03-26 | 北京煜邦电力技术股份有限公司 | 一种图表的处理方法、装置、设备和介质 |
| CN112668294A (zh) * | 2021-01-06 | 2021-04-16 | 许继集团有限公司 | 一种变电站监控系统画面ECharts图表显示方法 |
| CN113918257A (zh) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | 一种基于Vue的echarts性能优化方法及系统 |
| CN115328486A (zh) * | 2022-10-17 | 2022-11-11 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN116842600A (zh) * | 2023-07-28 | 2023-10-03 | 安及义实业（上海）有限公司 | 管道仪表流程图的元器件选型方法和装置 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160364740A1 (en) * | 2015-06-10 | 2016-12-15 | Cheryl Parker | System and Method for Economic Analytics and Business Outreach, Including Layoff Aversion |
| US20170076091A1 (en) * | 2015-09-14 | 2017-03-16 | Salesforce.Com, Inc. | Secure isolation of scripting from native graphic rendering of animated data visualizations |
| CN107844297A (zh) * | 2017-10-17 | 2018-03-27 | 广东广业开元科技有限公司 | 一种数据可视化实现系统及方法 |
| CN109992589A (zh) * | 2019-04-11 | 2019-07-09 | 北京启迪区块链科技发展有限公司 | 基于可视化页面生成sql语句的方法、装置、服务器及介质 |
| CN110442550A (zh) * | 2019-07-05 | 2019-11-12 | 北京邮电大学 | 日志聚屏实时可视化方法及装置 |
| CN111142984A (zh) * | 2019-11-27 | 2020-05-12 | 深圳壹账通智能科技有限公司 | 可视化数据显示方法、系统、设备及计算机可读存储介质 |
-
2020
- 2020-07-08 CN CN202010650518.5A patent/CN111984177A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160364740A1 (en) * | 2015-06-10 | 2016-12-15 | Cheryl Parker | System and Method for Economic Analytics and Business Outreach, Including Layoff Aversion |
| US20170076091A1 (en) * | 2015-09-14 | 2017-03-16 | Salesforce.Com, Inc. | Secure isolation of scripting from native graphic rendering of animated data visualizations |
| CN107844297A (zh) * | 2017-10-17 | 2018-03-27 | 广东广业开元科技有限公司 | 一种数据可视化实现系统及方法 |
| CN109992589A (zh) * | 2019-04-11 | 2019-07-09 | 北京启迪区块链科技发展有限公司 | 基于可视化页面生成sql语句的方法、装置、服务器及介质 |
| CN110442550A (zh) * | 2019-07-05 | 2019-11-12 | 北京邮电大学 | 日志聚屏实时可视化方法及装置 |
| CN111142984A (zh) * | 2019-11-27 | 2020-05-12 | 深圳壹账通智能科技有限公司 | 可视化数据显示方法、系统、设备及计算机可读存储介质 |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112560422A (zh) * | 2020-12-10 | 2021-03-26 | 北京煜邦电力技术股份有限公司 | 一种图表的处理方法、装置、设备和介质 |
| CN112668294A (zh) * | 2021-01-06 | 2021-04-16 | 许继集团有限公司 | 一种变电站监控系统画面ECharts图表显示方法 |
| CN113918257A (zh) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | 一种基于Vue的echarts性能优化方法及系统 |
| CN113918257B (zh) * | 2021-09-30 | 2024-04-26 | 百融至信(北京)科技有限公司 | 一种基于Vue的echarts性能优化方法及系统 |
| CN115328486A (zh) * | 2022-10-17 | 2022-11-11 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN115328486B (zh) * | 2022-10-17 | 2023-02-03 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN116842600A (zh) * | 2023-07-28 | 2023-10-03 | 安及义实业（上海）有限公司 | 管道仪表流程图的元器件选型方法和装置 |
| CN116842600B (zh) * | 2023-07-28 | 2024-01-23 | 安及义实业（上海）有限公司 | 管道仪表流程图的元器件选型方法和装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111984177A (zh) | 一种基于vue的图表配置方法、装置、设备和介质 | |
| US20200210445A1 (en) | Interactive Visual Analysis of Datasets Using A Specialized Virtual Machine | |
| US10380140B2 (en) | Systems and methods for implementing a virtual machine for interactive visual analysis | |
| US8711148B2 (en) | Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects | |
| KR102021915B1 (ko) | 프로그래밍 속성의 그래픽 표현 | |
| EP1480136A2 (en) | System and method of visual grouping of elements in a diagram | |
| JP6018045B2 (ja) | 選択したデータの一時的な書式設定とグラフ化 | |
| US6678880B1 (en) | System for iteratively designing an object heterarchy in an object-oriented computing environment | |
| US20100079461A1 (en) | method and system for generating and displaying an interactive dynamic culling graph view of multiply connected objects | |
| CN105094832A (zh) | 一种所见即所得的动态生成用户界面的方法和系统 | |
| CN112506494B (zh) | 基于vue的可扩展动态组件的实现方法、装置、设备和介质 | |
| US9513778B1 (en) | Defining objects using an object-relationship map | |
| Ono et al. | Interactive data visualization in jupyter notebooks | |
| EP2137643A1 (en) | Method and system for navigation and visualization of data in relational and/or multidimensional databases | |
| US20050289450A1 (en) | User interface virtualization | |
| CN113535165A (zh) | 界面生成方法、装置、电子设备及计算机可读存储介质 | |
| US20150205840A1 (en) | Dynamic Data Analytics in Multi-Dimensional Environments | |
| US9361074B2 (en) | Method for creating a user interface | |
| US11789775B2 (en) | Progress visualization of computational job | |
| Stasko | Data structure visualization | |
| US9996559B2 (en) | Maintenance actions and user-specific settings of the attribute value derivation instruction set user interface | |
| US10529100B2 (en) | Interaction-driven format for graph visualization | |
| JP2022115747A (ja) | コンテンツ作成システム及び方法 | |
| EP3611635B1 (en) | User interfaces and parameterized dashboards | |
| US20180150194A1 (en) | Three dimensional hierarchical data display |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |