一种基于dsl的声明式可视化图表开发方法及系统
技术领域
1.本发明涉及计算机及数据处理技术领域，特别涉及一种基于dsl的声明式可视化图表开发方法及系统。
背景技术：2.数据可视化旨在借助图形化手段，以一种更直观、高效的方式呈现数据，可视化图表是数据可视化中最常用的一种表现形式。然而，将数据转换为可视化图表的过程会涉及到数据分析、数据处理、数据映射、图形绘制、图形属性、计算机视觉以及用户界面等诸多领域的专业知识，导致可视化图表的开发门槛和成本极高。现有的解决方法基本上都是：使用第三方可视化图表库或可视化引擎（如：echarts、g2/g2plot、d3.js等），通过调用现成的api方法完成图形绘制、图表配置以及数据映射，从而将数据转换为可视化图表进行展示。但这类方式仍有不足：一方面，由于第三方可视化图表库或可视化引擎都是基于图表分类和图形语法构建，需要开发者先学习和掌握新的语法之后，才能通过调用api方法将数据转换为可视化图表。
3.另一方面，第三方可视化图表库或可视化引擎的功能特性和应用场景不同，有时候需要在一个复杂的项目中引入多种不同的第三方可视化图表库或可视化引擎，以实现个性化的可视化图表，造成业务代码中混合多种不同的语法，导致整个项目难以维护。
技术实现要素：4.针对现有技术存在的问题，本发明的目的在于提供一种系统及方法，能够降低可视化图表的开发难度，开发者不需要学习和掌握新的语法，便能够使用第三方可视化图表库或可视化引擎开发可视化图表；同时，在项目中引入多种不同的可视化图表库或可视化引擎时，可以使用统一的语法进行可视化图表的开发。
5.为实现上述目的，本发明提供一种基于dsl的声明式可视化图表开发方法，所述方法包括以下步骤：步骤s110，使用dsl声明图表配置；基于json语法描述可视化图表的配置项及参数，并指定渲染可视化图表所使用的第三方可视化图表库或可视化引擎；步骤s120，解析图表配置为转译语法；通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法；步骤s130，调用api方法创建图表，将最终的ast抽象语法树输出为宿主语言，生成echarts图表库的语法和api方法。
6.进一步，在步骤s110中，由于第三方可视化图表库或可视化引擎的图表分类和图形语法存在差异，因此使用dsl描述图表配置，包括可视化图表对象、规则和运行方式；将可视化图表构成抽象为图表容器、数据映射、图形样式、图表组件、图表交互和图表事件，使用json对象进行描述。
7.进一步，每个json对象包含键值对、对象或数组，用于描述可视化图表的配置；所
述图表容器包含图表宽度、图表高度、图表自适应、画布内边距、图表渲染方式和api方法。
8.进一步，在步骤s120中，通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法；dsl解析器接收json格式的图表配置作为第一个参数，并将可选的解析配置作为第二个参数，最终返回图表配置的抽象语法树。
9.进一步，在需要兼容多种不同的可视化图表库或可视化引擎的情况下，对节点进行操作将其转译为使用的可视化图表库或可视化引擎的语法和api方法。
10.进一步，步骤s120中，还包括dsl解析器接收图表配置，对源代码进行语法检测，验证通过后进行解析并返回图表配置的ast抽象语法树；得到图表配置的ast抽象语法树后，根据parseroptions传入的解析配置将图表配置的抽象语法树转译为第三方可视化图表库或可视化引擎的语法和api方法，使用echarts图表库作为转译语言；转译抽象语法树的过程如下：通过遍历抽象语法树节点，对节点属性进行添加、删除和替换操作来实现；如果需要兼容多种不同的可视化图表库或可视化引擎，对节点进行操作将其转译为使用的可视化图表库或可视化引擎的语法和api方法；dsl解析器得到图表配置的ast抽象语法树后，对smooth节点进行操作，为其添加属性值为series的父节点，进行语法转译；通过dsl解析器转换完成后的ast抽象语法树；由此得到以echarts图表库作为转译语言的dsl图表配置的ast抽象语法树。
11.进一步，步骤s120中，通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法。
12.进一步，其中dsl解析器的具体执行过程包括以下步骤：s210，dsl解析器进行词法分析，将json格式的图表配置转换成一个标识数组，用以描述dsl源代码的语法；s220，dsl解析器进行语法分析，接收步骤s210分析出来的标识数组并将它们组合成一个描述dsl图表配置各部分之间关系的中间表达形式，形成ast抽象语法树；ast中每一层描述结构的对象叫做节点；s230，dsl解析器进行代码转换，根据parseroptions解析配置，对ast抽象语法树中的节点进行添加、删除、替换操作，将其转换为宿主语言对应的ast抽象语法树；s240，dsl解析器基于转换后ast抽象语法树生成目标代码。
13.进一步，步骤s240中，还包括，通过自定义一个“代码生成器”，递归地调用自身将ast抽象语法树中的每一个节点打印出来，最终形成一个巨大的字符串；由此，dsl解析器完成针对dsl图表配置的代码转译，通过词法分析、语法分析、代码转换和代码生成，将json格式的图表配置转译为第三方可视化图表库或可视化引擎的语法和api方法。
14.另一方面，本发明提供一种基于dsl的声明式可视化图表开发系统，所述系统应用根据本发明的的基于dsl的声明式可视化图表开发方法。
15.本发明的基于dsl的声明式可视化图表开发技术，基于标准的json语法和词汇，就可以方便地使用dsl声明图表配置，开发者不需要了解第三方可视化图表库或可视化引擎的语法和api方法，降低了可视化图表的开发难度，同时也节约了开发时间和成本。
附图说明
16.图1示出了根据本发明实施例中使用dsl开发可视化图表的流程图;
图2示出了根据本发明实施例中基于dsl开发可视化图表的架构图；图3示出了根据本发明实施例中dsl解析器的工作流程图。
具体实施方式
17.下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
18.在本发明的描述中，需要说明的是，术语“中心”、“上”、“下”、“左”、“右”、“竖直”、“水平”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。
19.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
20.以下结合附图1-3对本发明的具体实施方式进行详细说明。应当理解的是，此处所描述的具体实施方式仅用于说明和解释本发明，并不用于限制本发明。
21.根据本发明的基于dsl的声明式可视化图表开发方法及系统的发明构思在于使用dsl声明图表配置，通过解析器将图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法，最终通过解析器调用api方法完成可视化图表的创建和配置。
22.本文中涉及的术语解释说明如下：dsl：（domain specific language）又称领域特定语言，是为了解决某一类任务而专门设计的计算机语言。
23.api：（application programming interface）又称应用程序接口，是软件系统不同组成部分衔接的约定，是一些预先定义的函数，主要用来提供应用程序与开发人员以访问一组例程的能力。这里的api特指echarts图表库公开的可供开发人员访问以创建图表的一系列函数。
24.json：（javascript object notation）由一个序列化的对象或数组构成，是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得json成为理想的数据交换语言，易于人阅读和编写，同时也易于机器解析和生成。
25.ast：（abstract syntax tree）又称抽象语法树，是一个树形结构的对象。dsl在执行之前需要将源码转换为抽象语法树，通过对树的处理，能实现对代码的分析、优化和执行等操作。
26.parseroptions：解析器。
27.echarts：是一款基于javascript的数据可视化图表库，提供直观，生动，可交互，
可个性化定制的数据可视化图表。
28.如图1所示，根据本发明的基于dsl的声明式可视化图表开发方法的基本流程为：步骤s110，使用dsl声明图表配置；步骤s120，解析图表配置为转译语法；步骤s130，调用api方法创建图表；具体地，在步骤s110中，使用dsl声明图表配置，基于标准的json语法描述可视化图表的配置项及参数，并指定渲染可视化图表所使用的第三方可视化图表库或可视化引擎。
29.由于第三方可视化图表库或可视化引擎的图表分类和图形语法存在差异，因此本发明基于标准的json语法定义了一种特定领域的语言domain specific language，简称dsl，以更高效的方式描述可视化图表对象、规则和运行方式。
30.具体地，将可视化图表构成抽象为图表容器、数据映射、图形样式、图表组件、图表交互和图表事件，使用json对象进行描述，“json对象
”ꢀ
指描述可视化图表构成（如图表容器、数据映射等）的具体代码，所有代码均符合 dsl 定义的语法和词法；其结构如下：{
ꢀꢀꢀꢀ
"container": {}, // 图表容器
ꢀꢀꢀꢀ
"data": {}, // 数据映射
ꢀꢀꢀꢀ
"style": {}, // 图形样式
ꢀꢀꢀꢀ
"components": {},// 图表组件
ꢀꢀꢀꢀ
"action": {},// 图表交互
ꢀꢀꢀꢀ
"events": {}// 图表事件}其中，每个json对象包含键值对、对象或数组，用于进一步描述可视化图表的配置。例如，图表容器包含图表宽度、图表高度、图表自适应、画布内边距、图表渲染方式等属性和api方法，其示例代码如下：{
ꢀꢀ
"container": {
ꢀꢀꢀꢀꢀꢀ
"width": 400, // 设置图表高度
ꢀꢀꢀꢀꢀꢀ
"height": "auto", // 设置图表高度
ꢀꢀꢀꢀꢀꢀ
"autofit": true, // 图表是否自适应容器宽高
ꢀꢀꢀꢀꢀꢀ
"padding": [16, 8], // 画布内边距
ꢀꢀꢀꢀꢀꢀ
"render": "canvas" // 图表渲染方式
ꢀꢀ
}}这样，基于标准的json语法和词汇，本发明实施例就可以方便地使用dsl声明图表配置，开发者不需要了解第三方可视化图表库或可视化引擎的语法和api方法，降低了可视化图表的开发难度，同时也节约了开发时间和成本。
[0031]
具体的，在步骤s120中，通过dsl解析器（parser）将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法。dsl解析器接收json格式的图表
配置作为第一个参数，并将可选的解析配置（parseroptions）作为第二个参数，最终返回图表配置的抽象语法树（abstract syntax tree，简称ast）。
[0032]
以面积图为例，使用dsl声明图表配置：{
ꢀꢀ
"smooth": true, // 曲线是否平滑
ꢀꢀ
"line": { // 折线样式
ꢀꢀꢀꢀ
"color": "#5cdbd3" // 折线颜色
ꢀꢀ
},
ꢀꢀ
"areastyle": { // 面积图样式
ꢀꢀ
"file": "#87e8de", // 图形填充颜色
ꢀꢀꢀꢀ
"fillopacity": 0.8, // 填充透明度
ꢀꢀꢀꢀ
"linewidth": 1, // 图形描边宽度
ꢀꢀꢀꢀ
"stroke": "black" // 图形描边类型
ꢀꢀ
}}dsl解析器接收图表配置，对源代码进行语法检测，验证通过后进行解析并返回图表配置的ast抽象语法树，其示例代码如下：{
ꢀꢀ
"type": "object",
ꢀꢀ
"children": [
ꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀꢀ
"type": "property",
ꢀꢀꢀꢀꢀꢀꢀ
"key": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "identifier",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": "smooth",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"raw": "\"smooth\""
ꢀꢀꢀꢀꢀꢀꢀ
},
ꢀꢀꢀꢀꢀꢀꢀ
"value": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "literal",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": true,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"raw": "true"
ꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀ
},
ꢀꢀ
// ...
ꢀ…ꢀ
]}得到图表配置的ast抽象语法树后，就可以根据parseroptions传入的解析配置将图表配置的抽象语法树转译为第三方可视化图表库或可视化引擎的语法和api方法，默认使用echarts图表库作为转译语言。转译抽象语法树的过程，通过遍历抽象语法树节点，对
节点属性进行添加、删除和替换操作来实现；如果需要兼容多种不同的可视化图表库或可视化引擎，只需要对节点进行操作将其转译为使用的可视化图表库或可视化引擎的语法和api方法。
[0033]
以面积图的smooth属性（又称平滑属性）为例，其dsl图表配置如下：{
ꢀꢀ
"smooth": true}使用echarts图表库作为转译语言，其标准语法如下：{
ꢀꢀꢀꢀ
"series": {
ꢀꢀꢀꢀꢀꢀ
"smooth": true
ꢀꢀꢀꢀ
}}dsl解析器得到图表配置的ast抽象语法树后，对smooth节点进行操作，为其添加属性值为series的父节点，进行语法转译。其示例代码如下：fuction transformer(ast, visitor) {
ꢀꢀꢀꢀ
const smooth = ast.program.body[0]; // 获取当前节点
ꢀꢀꢀꢀ
const parent = { // 创建父节点
ꢀꢀꢀꢀꢀꢀ
type: 'object',
ꢀꢀꢀꢀꢀꢀ
body: {},
ꢀꢀꢀꢀ
};
ꢀꢀꢀꢀ
return parent._context.push(smooth);// 返回最终 ast}通过dsl解析器转换完成后的ast抽象语法树，其示例代码如下：{
ꢀꢀꢀꢀ
"type": "object",
ꢀꢀꢀꢀ
"children": [
ꢀꢀꢀꢀꢀꢀ
{"type": "property",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"key": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "identifier",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": "series",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"raw": "\"series\""
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
},
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": {"type": "object",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"children": [
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "property",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"key": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "identifier",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": "smooth",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"raw": "\"smooth\""
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
},
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": {
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"type": "literal",
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"value": true,
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
"raw": "true"
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀꢀꢀꢀꢀꢀ
]
ꢀꢀꢀꢀꢀꢀꢀ
}
ꢀꢀꢀꢀ
}
ꢀꢀ
]}当上述步骤执行完成，本发明得到了以echarts图表库作为转译语言的dsl图表配置的ast抽象语法树，步骤s130会将最终的ast抽象语法树输出为宿主语言（hosting language），生成echarts图表库的语法和api方法。其示例代码如下：fuction generator(node) {
ꢀꢀꢀꢀ
switch (node.type) {
ꢀꢀꢀꢀꢀꢀ
case 'program':
ꢀꢀꢀꢀꢀꢀꢀꢀ
return node.body.map(codegenerator).join('\n');
ꢀꢀꢀꢀꢀꢀ
case 'expressionstatement':
ꢀꢀꢀꢀꢀꢀꢀꢀ
return (codegenerator(node.expression) + ';'
ꢀꢀꢀꢀꢀꢀ
);
ꢀꢀꢀꢀꢀ
//
ꢀ…ꢀ…ꢀꢀꢀꢀꢀꢀ
default:
ꢀꢀꢀꢀꢀꢀꢀꢀ
throw new typeerror(node.type);
ꢀꢀꢀ
}}以s120步骤转换完成后的ast抽象语法树为例，最终生成的代码如下：const mychart = echarts.init(document.getelementbyid('container'));const options = {
ꢀꢀꢀ
"series": {
ꢀꢀꢀꢀꢀ
"smooth": true
ꢀꢀꢀ
}}
mychart.setoption(options);dsl解析器首先将dsl图表配置解析为ast抽象语法树，再根据parseroptions解析配置将ast抽象语法树转译为echarts图表库的语法和api方法，最后通过调用echarts图表库的init() 方法和setoption() 方法完成可视化图表的创建和配置，由此实现基于dsl的声明式可视化图表开发，其整体架构图如图2所示。
[0034]
步骤s120中可以通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法。参见图3，dsl解析器的具体执行过程为：首先，步骤s210，dsl解析器进行词法分析，将json格式的图表配置转换成一个标识（tokens）数组，用以描述dsl源代码的语法。其示例代码如下：// 使用dsl声明图表配置{
ꢀꢀꢀꢀ
"smooth": true}// dsl解析器进行词法分析，输出一个标识数组[
ꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀ
"type": "punctuator",
ꢀꢀꢀꢀꢀꢀ
"value": "{"
ꢀꢀꢀꢀ
},
ꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀ
"type": "string",
ꢀꢀꢀꢀꢀꢀ
"value": "\"smooth\""
ꢀꢀꢀꢀ
},
ꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀ
"type": "punctuator",
ꢀꢀꢀꢀꢀꢀ
"value": ":"
ꢀꢀꢀꢀ
},{
ꢀꢀꢀꢀꢀꢀ
"type": "boolean",
ꢀꢀꢀꢀꢀꢀ
"value": "true"
ꢀꢀꢀꢀ
},
ꢀꢀꢀꢀ
{
ꢀꢀꢀꢀꢀꢀ
"type": "punctuator",
ꢀꢀꢀꢀꢀꢀ
"value": "}"
ꢀꢀꢀꢀ
}]其次，步骤s220，dsl解析器进行语法分析，接收步骤s210分析出来的标识数组并将它们组合成一个描述dsl图表配置各部分之间关系的中间表达形式，即ast抽象语法树。ast中每一层描述结构的对象叫做节点（node），其接口定义如下：
interface node {
ꢀꢀꢀ
type: string;
ꢀꢀꢀ
loc: sourcelocation | null;}其中，type字段表示不同的节点类型，具体包含：ast抽象语法树本质上是一个深度嵌套的对象，由一个或成百上千个节点构成。
[0035]
然后，步骤s230，dsl解析器根据parseroptions解析配置，对ast抽象语法树中的节点进行添加、删除、替换等操作，将其转换为宿主语言对应的ast抽象语法树。这里，本发明定义了一个“访问者”对象，可以针对不同的节点类型进行操作，只需传入当前节点以及当前节点的父节点的引用即可。其示例代码如下：var visitor = {numberliteral: {enter(node, parent) {},exit(node, parent) {},},callexpression(node, parent) {},};最后，步骤s240，dsl解析器基于转换后ast抽象语法树生成目标代码。具体地，通过自定义一个“代码生成器”，递归地调用自身将ast抽象语法树中的每一个节点打印出来，最终形成一个巨大的字符串。其示例代码如下：function codegenerator(node) {
ꢀꢀꢀ
switch (node.type) {
ꢀꢀꢀꢀꢀ
case 'program':
ꢀꢀꢀꢀꢀꢀ
return node.body.map(codegenerator).join('\n');
ꢀꢀꢀꢀꢀ
case 'expressionstatement':
ꢀꢀꢀꢀꢀꢀ
return (
codegenerator(node.expression) + ';'
ꢀꢀꢀ
);
ꢀꢀꢀꢀꢀ
case 'callexpression':
ꢀꢀꢀꢀꢀꢀ
return (codegenerator(node.callee) +
ꢀꢀꢀꢀ
'(' +node.arguments.map(codegenerator).join(', ') +
ꢀꢀꢀꢀꢀꢀ
')'
ꢀꢀꢀꢀꢀ
);
ꢀꢀꢀꢀꢀ
case 'identifier':
ꢀꢀꢀꢀꢀꢀ
return node.name;
ꢀꢀꢀꢀꢀ
case 'numberliteral':
ꢀꢀꢀꢀꢀꢀ
return node.value;
ꢀꢀꢀꢀꢀ
case 'stringliteral':
ꢀꢀꢀꢀꢀꢀ
return '"' + node.value + '"';
ꢀꢀꢀꢀꢀ
default:
ꢀꢀꢀꢀꢀꢀ
throw new typeerror(node.type);
ꢀꢀꢀꢀ
}}至此，dsl解析器便完成了针对dsl图表配置的代码转译，通过词法分析、语法分析、代码转换和代码生成，将json格式的图表配置转译为第三方可视化图表库或可视化引擎的语法和api方法。
[0036]
使用dsl声明图表配置便可以快速完成可视化图表的创建和配置，降低了可视化图表的开发难度和成本，提高了开发效率，同时能够兼容多种不同的第三方可视化图表库或可视化引擎，统一可视化图表的开发语法，降低项目维护成本。
[0037]
基于dsl的声明式可视化图表开发方法，使用标准的json语法描述可视化图表的配置项及参数，通过dsl解析器进行代码转译，完成可视化图表的创建和配置，同时兼容多种不同的第三方可视化图表库或可视化引擎。
[0038]
另一方面，本发明提供一种基于dsl的声明式可视化图表开发系统，所述系统应用根据本发明的的基于dsl的声明式可视化图表开发方法。
[0039]
在本说明书的描述中，参考术语“实施例”、“示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。此外，本领域的技术人员可以在不产生矛盾的情况下，将本说明书中描述的不同实施例或示例以及其中的特征进行结合或组合。
[0040]
上述内容虽然已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型等更新操作。
技术特征：1.一种基于dsl的声明式可视化图表开发方法，其特征在于，所述方法包括以下步骤：步骤s110，使用dsl声明图表配置；基于json语法描述可视化图表的配置项及参数，并指定渲染可视化图表所使用的第三方可视化图表库或可视化引擎；步骤s120，解析图表配置为转译语法；通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法；步骤s130，调用api方法创建图表，将最终的ast抽象语法树输出为宿主语言，生成echarts图表库的语法和api方法。2.根据权利要求1所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，在步骤s110中，由于第三方可视化图表库或可视化引擎的图表分类和图形语法存在差异，因此使用dsl声明图表配置，包括可视化图表对象、规则和运行方式；将可视化图表构成抽象为图表容器、数据映射、图形样式、图表组件、图表交互和图表事件，使用json对象进行描述。3.根据权利要求2所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，每个json对象包含键值对、对象或数组，用于描述可视化图表的配置；所述图表容器包含图表宽度、图表高度、图表自适应、画布内边距、图表渲染方式和api方法。4.根据权利要求1-3任一项所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，在步骤s120中，通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法；dsl解析器接收json格式的图表配置作为第一个参数，并将可选的解析配置作为第二个参数，最终返回图表配置的抽象语法树。5.根据权利要求4所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，在需要兼容多种不同的可视化图表库或可视化引擎的情况下，对节点进行操作将其转译为使用的可视化图表库或可视化引擎的语法和api方法。6.根据权利要求5所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，步骤s120中，还包括dsl解析器接收图表配置，对源代码进行语法检测，验证通过后进行解析并返回图表配置的ast抽象语法树；得到图表配置的ast抽象语法树后，根据parseroptions传入的解析配置将图表配置的抽象语法树转译为第三方可视化图表库或可视化引擎的语法和api方法，使用echarts图表库作为转译语言；转译抽象语法树的过程如下：通过遍历抽象语法树节点，对节点属性进行添加、删除和替换操作来实现；在需要兼容多种不同的可视化图表库或可视化引擎的情况下，对节点进行操作将其转译为使用的可视化图表库或可视化引擎的语法和api方法；dsl解析器得到图表配置的ast抽象语法树后，对smooth节点进行操作，为其添加属性值为series的父节点，进行语法转译；通过dsl解析器转换完成后的ast抽象语法树；由此得到以echarts图表库作为转译语言的dsl图表配置的ast抽象语法树。7.根据权利要求6所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，步骤s120中，通过dsl解析器将json格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和api方法。8.根据权利要求7所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，其中dsl解析器的具体执行过程包括以下步骤：s210，dsl解析器进行词法分析，将json格式的图表配置转换成一个标识数组，用以描述dsl源代码的语法；
s220，dsl解析器进行语法分析，接收步骤s210分析出来的标识数组并将它们组合成一个描述dsl图表配置各部分之间关系的中间表达形式，形成ast抽象语法树；ast中每一层描述结构的对象叫做节点；s230，dsl解析器进行代码转换，根据parseroptions解析配置，对ast抽象语法树中的节点进行添加、删除、替换操作，将其转换为宿主语言对应的ast抽象语法树；s240，dsl解析器基于转换后ast抽象语法树生成目标代码。9.根据权利要求8所述的一种基于dsl的声明式可视化图表开发方法，其特征在于，步骤s240中，还包括，通过自定义一个“代码生成器”，递归地调用自身将ast抽象语法树中的每一个节点打印出来，最终形成一个字符串；由此，dsl解析器完成针对dsl图表配置的代码转译，通过词法分析、语法分析、代码转换和代码生成，将json格式的图表配置转译为第三方可视化图表库或可视化引擎的语法和api方法。10.一种基于dsl的声明式可视化图表开发系统，其特征在于，所述系统用于应用权利要求1-9任一项所述的基于dsl的声明式可视化图表开发方法。
技术总结本发明公开了一种基于DSL的声明式可视化图表开发方法及系统，所述方法包括以下步骤：步骤S110，使用DSL声明图表配置；基于JSON语法描述可视化图表的配置项及参数，并指定渲染可视化图表所使用的第三方可视化图表库或可视化引擎；步骤S120，解析图表配置为转译语法；通过DSL解析器将JSON格式的图表配置转译为指定的第三方可视化图表库或可视化引擎的语法和API方法；步骤S130，调用API方法创建图表，将最终的AST抽象语法树输出为宿主语言，生成echarts图表库的语法和API方法。本发明的方法和系统能够降低可视化图表的开发难度，开发者不需要学习和掌握新的语法，便能够使用第三方可视化图表库或可视化引擎开发可视化图表。可视化图表库或可视化引擎开发可视化图表。可视化图表库或可视化引擎开发可视化图表。
技术研发人员：王毅
受保护的技术使用者：杭州比智科技有限公司
技术研发日：2022.06.02
技术公布日：2022/7/5
