[捷得Joget DX平台]
EChart 菜单插件，是一款易于使用的图表展示工具，可完美替代默认的图表菜单插件。只需选取应用中的任一数据列表，即可呈现多种图表类型，直观展示数据记录。
介绍
[捷得Joget DX平台的] EChart 菜单插件，是一款易于使用的图表展示工具，可完美替代默认的图表菜单插件。只需选取应用中的任一数据列表，即可呈现多种图表类型，直观展示数据记录。
插件的亮点在于其数据重用能力，能够利用已有的数据源配置和数据列表过滤器，极大提升效率。此外，它还支持在用户视图的单页上通过仪表板菜单展示多个图表实例，实现信息的集中展示。
下载链接接：点击此处，即可在捷得Joget市场下载此插件。
技术支撑：本插件使用的JS库为Apache ECharts，源代码可在JogetOSS GitHub仓库找到。JogetOSS是由社区驱动的开源项目，致力于Joget无代码/低代码应用平台的发展，欢迎广大开发者贡献代码。
图表展示示例：
图 1：在仪表板中显示的多个 EChart 用户视图菜单
EChart 菜单属性配置指南：
配置 EChart 菜单
| 名称 | 描述 |
| ID | 菜单元素唯一标识符。如果自定义 ID 属性为空，用户视图将使用此 ID 在 URL 中标识菜单。 |
| 自定义 ID | 项目链接别名（Slug）。这是一个可选字段。请确保这里定义的值在应用程序中的其他用户视图菜单中是唯一的，因为在页面加载时，第一个匹配的/冲突的 ID 将优先使用。 |
| 标签 | 菜单标签。必填字段。用于菜单展示的文本。 |
| 图表标题 | 图表的展示标题。 |
| 图表主题 | 提供多种预设主题，亦可选择“自定义”进行个性化设置。 |
| 自定义主题 JSON | 当”图表主题”设置为”自定义”时，会出现此选项。按照以下步骤生成自定义主题。访问 https://echarts.apache.org/en/theme-builder.html 并自定义您自己的主题。 准备好后，点击”导出”。 将下载的文件内容粘贴在这里。示例主题{ “version”: 1, “themeName”: “shine”, “theme”: { “seriesCnt”: 4, “backgroundColor”: “rgba(0,0,0,0)”, “titleColor”: “#333333”, “subtitleColor”: “#aaaaaa”, “textColorShow”: false, “textColor”: “#333”, “markTextColor”: “#eeeeee”, “color”: [ “#c12e34”, “#e6b600”, “#0098d9”, “#2b821d”, “#005eaa”, “#339ca8”, “#cda819”, “#32a487” ], “borderColor”: “#ccc”, “borderWidth”: 0, “visualMapColor”: [ “#1790cf”, “#a2d4e6” ], “legendTextColor”: “#333333”, “kColor”: “#c12e34”, “kColor0”: “#2b821d”, “kBorderColor”: “#c12e34”, “kBorderColor0”: “#2b821d”, “kBorderWidth”: 1, “lineWidth”: 2, “symbolSize”: 4, “symbol”: “emptyCircle”, “symbolBorderWidth”: 1, “lineSmooth”: false, “graphLineWidth”: 1, “graphLineColor”: “#aaaaaa”, “mapLabelColor”: “#c12e34”, “mapLabelColorE”: “#c12e34”, “mapBorderColor”: “#eee”, “mapBorderColorE”: “#ddd”, “mapBorderWidth”: 0.5, “mapBorderWidthE”: 1, “mapAreaColor”: “#ddd”, “mapAreaColorE”: “#e6b600”, “axes”: [ { “type”: “all”, “name”: “通用坐标轴”, “axisLineShow”: true, “axisLineColor”: “#333”, “axisTickShow”: true, “axisTickColor”: “#333”, “axisLabelShow”: true, “axisLabelColor”: “#333”, “splitLineShow”: true, “splitLineColor”: [ “#ccc” ], “splitAreaShow”: false, “splitAreaColor”: [ “rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)” ] }, { “type”: “category”, “name”: “类目坐标轴”, “axisLineShow”: true, “axisLineColor”: “#333”, “axisTickShow”: true, “axisTickColor”: “#333”, “axisLabelShow”: true, “axisLabelColor”: “#333”, “splitLineShow”: false, “splitLineColor”: [ “#ccc” ], “splitAreaShow”: false, “splitAreaColor”: [ “rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)” ] }, { “type”: “value”, “name”: “数值坐标轴”, “axisLineShow”: true, “axisLineColor”: “#333”, “axisTickShow”: true, “axisTickColor”: “#333”, “axisLabelShow”: true, “axisLabelColor”: “#333”, “splitLineShow”: true, “splitLineColor”: [ “#ccc” ], “splitAreaShow”: false, “splitAreaColor”: [ “rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)” ] }, { “type”: “log”, “name”: “对数坐标轴”, “axisLineShow”: true, “axisLineColor”: “#333”, “axisTickShow”: true, “axisTickColor”: “#333”, “axisLabelShow”: true, “axisLabelColor”: “#333”, “splitLineShow”: true, “splitLineColor”: [ “#ccc” ], “splitAreaShow”: false, “splitAreaColor”: [ “rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)” ] }, { “type”: “time”, “name”: “时间坐标轴”, “axisLineShow”: true, “axisLineColor”: “#333”, “axisTickShow”: true, “axisTickColor”: “#333”, “axisLabelShow”: true, “axisLabelColor”: “#333”, “splitLineShow”: true, “splitLineColor”: [ “#ccc” ], “splitAreaShow”: false, “splitAreaColor”: [ “rgba(250,250,250,0.3)”, “rgba(200,200,200,0.3)” ] } ], “axisSeperateSetting”: true, “toolboxColor”: “#06467c”, “toolboxEmphasisColor”: “#4187c2”, “tooltipAxisColor”: “#cccccc”, “tooltipAxisWidth”: 1, “timelineLineColor”: “#005eaa”, “timelineLineWidth”: 1, “timelineItemColor”: “#005eaa”, “timelineItemColorE”: “#005eaa”, “timelineCheckColor”: “#005eaa”, “timelineCheckBorderColor”: “#316bc2”, “timelineItemBorderWidth”: 1, “timelineControlColor”: “#005eaa”, “timelineControlBorderColor”: “#005eaa”, “timelineControlBorderWidth”: 0.5, “timelineLabelColor”: “#005eaa”, “datazoomBackgroundColor”: “rgba(47,69,84,0)”, “datazoomDataColor”: “rgba(47,69,84,0.3)”, “datazoomFillColor”: “rgba(167,183,204,0.4)”, “datazoomHandleColor”: “#a7b7cc”, “datazoomHandleWidth”: “100”, “datazoomLabelColor”: “#333333” } } |
| 图表库版本 | 选择 ECharts 库版本。• 4.9.0• 5.1.2 |
| 图表类型 | 支持图表类型：• 区域图• 条形图• 折线图• 圆环图• 饼图• 自定义使用自定义选项，您可以在单页上定义多个图表和图表类型，以表示来自同一数据源的不同集合或解释。需要额外的配置来为每个数值定义图表类型。请参阅下面的数据映射。 |
| 图表数据集 | • 当前页面数据集 – 根据当前显示的数据列表页面上的数据生成图表。• 整个数据集 – 根据数据列表的整个数据集生成图表。 |
| 显示表格数据 | 在配置的位置显示表格数据。• 否• 顶部• 底部 |
| 显示导出链接 | 此选项在“显示表格数据”可见时显示。显示或隐藏位于表格数据下方的导出链接。• 否• 是 |
| 显示筛选条件 | 显示或隐藏图表右上角的过滤器。这些过滤器是在所选择的数据列表中定义的。• 否• 是 |
数据映射
区域图、条形图、折线图、圆环图、自定义
| 名称 | 描述 |
| 列表 | 目标数据列表，用于读取记录。 |
| X轴数值 | 数据列表中的列，用于表示图表的 x 轴或类别。 |
| 数值数据 | 属性数值数据 在图表中显示数值标签？ 系列自定义描述数据列表中的列，用于表示图表的类别数值。 勾选此选项可以在图表上显示类别数值。 查看图表配置文档请访问：区域图和折线图 – https://echarts.apache.org/en/option.html#series-line 条形图 – https://echarts.apache.org/en/option.html#series-bar 圆环图 – https://echarts.apache.org/en/option.html#series-pie 此处期望输入 JSON 值来修改系列的特性或外观。例如，如果选择了条形图类型，要将类别显示为堆叠条形图，您可以这样输入：{ stack : ‘one’, label: { show: true, precision: 1, valueAnimation: true } }如果选择的图表类型是自定义的，那么必须定义图表类型及其所需的属性。要查看所有可用的图表类型，请参见此处的文档：https://echarts.apache.org/en/option.html#series 以下是一些示例：{“type” : “line”} {“type” : “pie”, “radius” : “40%”, “center”: [“50%”, “25%”], “label”: { “formatter”: “{a} {b}: {@2012} ({d}%)” } }您也可以下载本页面下方提供的示例应用程序作为参考。 |
饼图
| 名称 | 描述 |
| 列表 | 目标数据列表，用于从中读取记录。 |
| X轴数值 | 数据列表列，用于表示饼图中的类别。 |
| 数值数据 | 数据列表列，用于表示饼图中的类别数值。 |
| 系列自定义 | 查看图表配置文档请访问：https://echarts.apache.org/en/option.html#series-pie此处期望输入 JSON 值来修改系列的特性或外观。示例：-调整饼图大小{ “radius”: “50%” } |
图表选项
区域图、折线图
| 名称 | 描述 |
| X轴标签 | X轴的标签。 |
| X轴显示为 | 以下列方式显示X轴数值：类别数字日期 |
| Y轴标签 | Y轴的标签。 |
| 无边距间隙 | 如果勾选，图表在绘图区域内的两侧将没有间隙。 |
| 平滑线条 | 如果勾选，图表线条将呈现曲线，以显得平滑。否则，图表线条将是连接数据点的直线。如果设置了系列自定义属性，则忽略此选项。 |
| 显示图例 | 如果勾选，将显示图表图例。 |
| 显示工具提示 | 如果勾选，当鼠标悬停在数据点上时，将显示有关数据点的额外信息。 |
| 宽度 | 图表的最大宽度。 |
| 高度 | 图表的最小高度。 |
条形图
| 名称 | 描述 |
| X轴标签 | X轴的标签。 |
| X轴显示为 | 以下列方式显示X轴数值：类别数字日期 |
| Y轴标签 | Y轴的标签。 |
| 无边距间隙 | 如果勾选，图表在绘图区域内的两侧将没有间隙。 |
| 显示为水平图表 | 如果勾选，X轴和Y轴将互换，以水平方式展示数据。 |
| 显示图例 | 如果勾选，将显示图表图例。 |
| 显示工具提示 | 如果勾选，当鼠标悬停在数据点上时，将显示有关数据点的额外信息。 |
| 宽度 | 图表的最大宽度。 |
| 高度 | 图表的最小高度。 |
圆环图
| 名称 | 描述 |
| 显示图例 | 如果勾选，将显示图表图例。 |
| 显示工具提示 | 如果勾选，当鼠标悬停在数据点上时，将显示有关数据点的额外信息。 |
| 宽度 | 图表的最大宽度。 |
| 高度 | 图表的最小高度。 |
饼图
| 名称 | 描述 |
| 显示图例 | 如果勾选，将显示图表图例。 |
| 在图表中显示数值标签 | 如果勾选，将显示类别数值。如果设置了系列自定义属性，则忽略此选项。 |
| 显示工具提示 | 如果勾选，当鼠标悬停在数据点上时，将显示有关数据点的额外信息。 |
| 宽度 | 图表的最大宽度。 |
| 高度 | 图表的最小高度。 |
自定义
| 名称 | 描述 |
| X轴标签 | X轴的标签。 |
| X轴显示为 | 以下列方式显示X轴数值：类别数字日期 |
| 无边距间隙 | 如果勾选，图表在绘图区域内的两侧将没有间隙。 |
| 显示为水平图表 | 如果勾选，X轴和Y轴将互换，以水平方式展示数据。 |
| 显示图例 | 如果勾选，将显示图表图例。 |
| 显示工具提示 | 如果勾选，当鼠标悬停在数据点上时，将显示有关数据点的额外信息。 |
| 宽度 | 图表的最大宽度。 |
| 高度 | 图表的最小高度。 |
高级
通用
| 名称 | 描述 |
| 额外自定义 | 对于所有可自定义的属性，请参见此处的文档：https://echarts.apache.org/en/option.html 此处期望输入 JSON 值来自定义整个图表的功能或外观。 示例：grid : { top: “55%” }, tooltip : { “trigger”: “item”, “formatter”: “{a} {b}: {c} ({d}%)” }如果标签太长，请使用以下代码：grid: { containLabel: true } |
用户视图关键数据过滤器
| 名称 | 描述 |
| 用户视图关键名称 | 当定义后，将使用这里定义的值作为参数，用户视图关键值作为值，附加额外的条件。SQL 示例 SQL: SELECT category, count(category) FROM table1 用户视图关键名称: type 用户视图关键值: val 生成的 SQL: SELECT category, count(category) FROM table1 WHERE type = ‘val’当用户视图关键值被定义时，您可以在您的 SQL 查询中定义 #userviewKey# 作为占位符，以便将其替换为用户视图关键值。SQL 示例 SQL: SELECT category, count(category) FROM table1 WHERE type = ‘#userviewKey#’ 用户视图关键值: val 生成的 SQL: SELECT category, count(category) FROM table1 WHERE type = ‘val’ |
UI用户界面
| 名称 | 描述 |
| 自定义页眉 | HTML 中的自定义页眉。 |
| 自定义页脚 | HTML 中的自定义页脚。 |
性能与离线使用
缓存设置
| 名称 | 描述 |
| 范围 | 缓存选项包括：无：不进行缓存。应用程序：按应用程序缓存内容，所有用户将看到相同的内容。用户：按用户名缓存。 |
| 持续时间 (秒) | 缓存内容的持续时间，以秒为单位，默认情况下（如果适用）为20秒。 |
| 更多内容请阅读《通过用户视图缓存提高性能》。 |
渐进式Web应用（PWA）离线设置
注意：PWA 离线支持取决于所使用的主题。
| 名称 | 描述 |
| 启用离线支持的缓存 | 启用用于离线支持的缓存，通常设置用于移动浏览器。 |
阅读有关渐进式 Web 应用程序（PWA）的更多信息。
下载示例应用
联系客服获取下载链接
