iBizModel 实体图表（PSDECHART）模型详解

iBizModel 实体图表（PSDECHART）模型概述

实体图表模型是iBizModel中用于定义数据可视化图表的核心模型体系，基于ECharts图表库实现。该模型体系包含图表部件、坐标轴、数据序列和图表逻辑四个主要组成部分，支持多种图表类型和交互功能。

示例图表功能 ，更多示例访问iBizAppHUB示例系统，点击图表可看到相关的示例。

提示：右侧的调试工具栏可以进入对应的视图，查看具体的模型配置

核心模型组成

1. PSDECHART（实体图表部件）

功能：定义图表部件的整体表现和处理逻辑

关键参数：

codename：必填，图表代码标识（需唯一）
name：必填，图表标识（需唯一）
psdeid：必填，引用所属实体
coordinatesystem：坐标系统（XY/直角坐标系、POLAR/极坐标系等）
showlegend：是否显示图例（1/0）
showtitle：是否显示标题（1/0）
psdedsid：引用默认数据集合

枚举取值：

坐标系统：XY（直角）、POLAR（极坐标）、RADAR（雷达）、PARALLEL（平行）、SINGLE（单轴）、CALENDAR（日历）、MAP（地图）、NONE（无）
标题位置：TOP（上）、BOTTOM（下）、LEFT（左）、RIGHT（右）
导航视图位置：NONE（无）、RIGHT（右侧）、BOTTOM（下方）等

2. PSDECHARTAXES（实体图表坐标轴）

功能：定义坐标轴类型、刻度和位置

关键参数：

name：必填，坐标轴名称
axespos：必填，坐标轴位置（left/bottom/right/top等）
axestype：必填，坐标轴类型（numeric/category/time/log）

枚举取值：

坐标轴位置：left（左侧）、bottom（下方）、right（右侧）、top（上方）
坐标轴类型：numeric（数值）、time（时间）、category（分类）、log（对数）

3. PSDECHARTPARAM（实体图表数据序列）

功能：定义数据序列的图形类型、坐标系映射和表现逻辑

关键参数：

name：必填，序列标识
charttype：必填，序列类型（bar/line/pie等）
xfield：分类取值属性
yfield：值取值属性
xpsdechartaxesid：引用X坐标轴
ypsdechartaxesid：引用Y坐标轴

枚举取值：

序列类型：bar（条形图）、line（折线图）、pie（饼图）、area（区域图）等12种类型
饼图模式：true（南丁格尔图）、false（普通）、radius（圆心角及半径）、area（仅半径）

4. PSDECHARTLOGIC（实体图表逻辑）

功能：定义图表的事件处理和交互逻辑

关键参数：

name：必填，逻辑标识
triggertype：必填，触发类型（TIMER/VIEWEVENT/CTRLEVENT等）
dstlogictype：必填，目标逻辑类型（SCRIPT/DEUILOGIC等）
eventnames：事件名称

模型关系图例

xpsdechartaxesid ypsdechartaxesid psdechartaxesid psdechartparamid PSDATAENTITY实体 PSDECHART图表部件 PSDECHARTAXES坐标轴 PSDECHARTPARAM数据序列 PSDECHARTLOGIC图表逻辑

各图形DSL代码示例

柱状图示例

groovy 复制代码

//iBizModelDSL柱状图建模指令，目标：创建基础柱状图
psdechart(userparams: "EC.color=[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\",\"#5470c6\",\"#91cc75\"]", legendpos: "BOTTOM", showtitle: 0, coordinatesystem: "XY", titlepos: "LEFT", codename: "MASTERChart_bar_Chart", showlegend: 1, name: "Chart5", psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER", logicname: "柱状图"){
  psdechartaxes(ordervalue: 100, name: "axis_xAxis_0", axespos: "bottom", id: "axis_xAxis_0", axestype: "category")
  psdechartaxes(ordervalue: 110, name: "axis_yAxis_0", axespos: "left", id: "axis_yAxis_0", axestype: "numeric")
  psdechartparam(coordinatesystem: "XY", xpsdechartaxesid: "axis_xAxis_0", ordervalue: 100, ypsdechartaxesid: "axis_yAxis_0", xfield: "TYPE", charttype: "bar", userparams: "EC.itemStyle={\"borderWidth\":60}\nEC.lineStyle={\"width\":60}", name: "bar_0", yfield: "QUANTITY", caption: "柱状", id: "bar_0")
}

折线图示例

groovy 复制代码

//iBizModelDSL折线图建模指令，目标：创建基础折线图
psdechart(userparams: "EC.color=[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\",\"#5470c6\",\"#91cc75\"]", legendpos: "RIGHT", showtitle: 0, coordinatesystem: "XY", titlepos: "LEFT", codename: "MASTERChart_line_Chart", showlegend: 1, name: "Chart2", psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER", logicname: "折线图"){
  psdechartaxes(ordervalue: 100, name: "axis_xAxis_0", axespos: "bottom", id: "axis_xAxis_0", axestype: "category")
  psdechartaxes(ordervalue: 110, name: "axis_yAxis_0", axespos: "left", id: "axis_yAxis_0", axestype: "numeric")
  psdechartparam(coordinatesystem: "XY", xpsdechartaxesid: "axis_xAxis_0", ordervalue: 100, ypsdechartaxesid: "axis_yAxis_0", xfield: "TYPE", charttype: "line", userparams: "EC.lineStyle={\"color\":\"#29939A\"}", name: "line_0", yfield: "QUANTITY", caption: "折线", id: "line_0")
}

饼图示例

groovy 复制代码

//iBizModelDSL饼图建模指令，目标：创建基础饼图
psdechart(coordinatesystem: "NONE", codename: "MASTERChart_pie_Chart", showlegend: 1, userparams: "EC.color=[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\",\"#5470c6\",\"#91cc75\"]", name: "Chart3", legendpos: "LEFT", showtitle: 0, psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER", logicname: "饼图"){
  psdechartparam(coordinatesystem: "NONE", ordervalue: 100, xfield: "TYPE", charttype: "pie", name: "pie_0", yfield: "QUANTITY", caption: "访问来源", id: "pie_0")
}

环形图示例

groovy 复制代码

//iBizModelDSL环形图建模指令，目标：创建环形图
psdechart(coordinatesystem: "NONE", codename: "MASTERChart_annular_Chart", showlegend: 1, userparams: "EC.color=[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\",\"#5470c6\",\"#91cc75\"]\nEC.legend={\"type\":\"plain\"}", name: "Chart4", legendpos: "LEFT", showtitle: 0, psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER", logicname: "环形图"){
  psdechartparam(coordinatesystem: "NONE", ordervalue: 100, xfield: "TYPE", charttype: "pie", userparams: "EC.radius=[\"40%\",\"60%\"]\nEC.itemStyle={\"borderColor\":\"#E80A0A\",\"borderWidth\":0,\"borderRadius\":10}", name: "pie_0", yfield: "QUANTITY", caption: "访问来源", id: "pie_0")
}

散点图示例

groovy 复制代码

//iBizModelDSL散点图建模指令，目标：创建散点图
psdechart(userparams: "EC.color=[\"#5470c6\",\"#91cc75\",\"#fac858\",\"#ee6666\",\"#73c0de\",\"#3ba272\",\"#fc8452\",\"#9a60b4\",\"#ea7ccc\",\"#5470c6\",\"#91cc75\"]", legendpos: "RIGHT", showtitle: 0, coordinatesystem: "XY", titlepos: "LEFT", codename: "Chart_scatter_Chart", showlegend: 1, name: "Chart13", psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER", logicname: "散点图"){
  psdechartaxes(ordervalue: 100, name: "axis_xAxis_0", axespos: "bottom", id: "axis_xAxis_0", axestype: "category")
  psdechartaxes(ordervalue: 110, name: "axis_yAxis_0", axespos: "left", id: "axis_yAxis_0", axestype: "numeric")
  psdechartparam(coordinatesystem: "XY", xpsdechartaxesid: "axis_xAxis_0", ordervalue: 100, ypsdechartaxesid: "axis_yAxis_0", xfield: "TYPE", charttype: "scatter", userparams: "EC.itemStyle={\"color\":\"#C92424\",\"borderColor\":\"#C92424\",\"borderWidth\":5}", name: "scatter_0", yfield: "QUANTITY", caption: "散点", id: "scatter_0")
}

带事件逻辑的图表示例

groovy 复制代码

//iBizModelDSL事件图表建模指令，目标：创建带事件处理的图表
psdechart(codename: "chart_event_Chart", name: "Chart17", showtitle: 0, psdedsid: "mock.MASTER.DEFAULT", psdeid: "mock.MASTER"){
  psdechartlogic(dstlogictype: "SCRIPT", validflag: 1, name: "logic2", eventnames: "onActive", triggertype: "CTRLEVENT", customcode: "console.log('触发图表点击事件');")
  psdechartlogic(dstlogictype: "SCRIPT", validflag: 1, name: "logic1", eventnames: "onLoadSuccess", triggertype: "CTRLEVENT", customcode: "console.log(\"数据加载成功\")")
  psdechartaxes(ordervalue: 200, name: "axis_yAxis_0", axespos: "left", id: "axis_yAxis_0", axestype: "numeric")
  psdechartaxes(ordervalue: 300, name: "axis_xAxis_1", axespos: "bottom", id: "axis_xAxis_1", axestype: "category")
  psdechartparam(coordinatesystem: "XY", xpsdechartaxesid: "axis_xAxis_1", ordervalue: 200, ypsdechartaxesid: "axis_yAxis_0", xfield: "NAME", charttype: "bar", name: "bar_0", yfield: "QUANTITY", caption: "柱状", id: "bar_0")
}

总结

实体图表模型提供了完整的图表可视化解决方案，通过PSDECHART定义图表容器，PSDECHARTAXES配置坐标系统，PSDECHARTPARAM定义数据序列和图形类型，PSDECHARTLOGIC实现交互逻辑。该模型支持多种图表类型和丰富的自定义选项，能够满足复杂的数据可视化需求。