新增BI圖標功能-柱狀圖 (#2779)

* 新增BI圖標功能-柱狀圖

* 新增BI图表功能-柱狀圖，优化代码，删除无用代码

* 优化生成逻辑，支持插件手动选择图表类型：目前支持柱状图，折线图，饼图

* 修改包名称，完成基础图表

packages/plugins/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@fastgpt/plugins",
   "version": "1.0.0",
+  "type": "module",
   "dependencies": {
     "duck-duck-scrape": "^2.2.5",
     "lodash": "^4.17.21",
     "axios": "^1.5.1",
-    "expr-eval": "^2.0.2"
+    "expr-eval": "^2.0.2",
+    "echarts": "5.4.1"
   },
   "devDependencies": {
     "@fastgpt/global": "workspace:*",

packages/plugins/register.ts

@@ -22,7 +22,9 @@ const packagePluginList = [
   'duckduckgo/search',
   'duckduckgo/searchImg',
   'duckduckgo/searchNews',
-  'duckduckgo/searchVideo'
+  'duckduckgo/searchVideo',
+  'drawing',
+  'drawing/baseChart'
 ];
 
 export const list = [...staticPluginList, ...packagePluginList];

packages/plugins/src/drawing/baseChart/index.ts

@@ -0,0 +1,93 @@
+import * as echarts from 'echarts';
+
+type Props = {
+  title: string;
+  xAxis: string;
+  yAxis: string;
+  chartType: string;
+};
+
+type Response = Promise<{
+  result: string;
+}>;
+
+type SeriesData = {
+  name: string;
+  type: 'bar' | 'line' | 'pie'; // 只允许这三种类型
+  data: number[] | { value: number; name: string }[]; // 根据图表类型的数据结构
+};
+type Option = {
+  backgroundColor: string;
+  title: { text: string };
+  tooltip: {};
+  xAxis: { data: string[] };
+  yAxis: {};
+  series: SeriesData[]; // 使用定义的类型
+};
+
+const generateChart = (title: string, xAxis: string, yAxis: string, chartType: string) => {
+  // @ts-ignore  无法使用dom，如使用jsdom会出现生成图片无法正常展示，有高手可以帮忙解决
+  const chart = echarts.init(undefined, undefined, {
+    renderer: 'svg', // 必须使用 SVG 模式
+    ssr: true, // 开启 SSR
+    width: 400, // 需要指明高和宽
+    height: 300
+  });
+
+  let parsedXAxis: string[] = [];
+  let parsedYAxis: number[] = [];
+  try {
+    parsedXAxis = JSON.parse(xAxis);
+    parsedYAxis = JSON.parse(yAxis);
+  } catch (error: unknown) {
+    console.error('解析数据时出错:', error);
+  }
+
+  const option: Option = {
+    backgroundColor: '#f5f5f5',
+    title: { text: title },
+    tooltip: {},
+    xAxis: { data: parsedXAxis },
+    yAxis: {},
+    series: [] // 初始化为空数组
+  };
+
+  // 根据 chartType 生成不同的图表
+  switch (chartType) {
+    case '柱状图':
+      option.series.push({ name: 'Sample', type: 'bar', data: parsedYAxis });
+      break;
+    case '折线图':
+      option.series.push({ name: 'Sample', type: 'line', data: parsedYAxis });
+      break;
+    case '饼图':
+      option.series.push({
+        name: 'Sample',
+        type: 'pie',
+        data: parsedYAxis.map((value, index) => ({
+          value,
+          name: parsedXAxis[index] // 使用 xAxis 作为饼图的名称
+        }))
+      });
+      break;
+    default:
+      console.error('不支持的图表类型:', chartType);
+      return '';
+  }
+
+  chart.setOption(option);
+  // 生成 Base64 图像
+  const base64Image = chart.getDataURL({ type: 'png' });
+  // 释放图表实例
+  chart.dispose();
+
+  return base64Image;
+};
+
+const main = async ({ title, xAxis, yAxis, chartType }: Props): Response => {
+  return {
+    result: generateChart(title, xAxis, yAxis, chartType)
+  };
+};
+
+export default main;

packages/plugins/src/drawing/baseChart/template.json

@@ -0,0 +1,551 @@
+{
+  "author": "",
+  "version": "486",
+  "name": "基础图表",
+  "avatar": "core/workflow/template/baseChart",
+  "intro": "根据数据生成图表，可根据chartType生成柱状图，折线图，饼图",
+  "showStatus": true,
+  "weight": 10,
+
+  "isTool": true,
+  "templateType": "search",
+
+  "workflow": {
+    "nodes": [
+      {
+        "nodeId": "pluginInput",
+        "name": "common:core.module.template.self_input",
+        "intro": "workflow:intro_plugin_input",
+        "avatar": "core/workflow/template/workflowStart",
+        "flowNodeType": "pluginInput",
+        "showStatus": false,
+        "position": {
+          "x": 613.7921798611637,
+          "y": -124.66724109717275
+        },
+        "version": "481",
+        "inputs": [
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "selectedTypeIndex": 0,
+            "valueType": "string",
+            "canEdit": true,
+            "key": "title",
+            "label": "title",
+            "description": "BI图表的标题",
+            "defaultValue": "",
+            "list": [
+              {
+                "label": "",
+                "value": ""
+              }
+            ],
+            "required": true,
+            "toolDescription": "BI图表的标题"
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "selectedTypeIndex": 0,
+            "valueType": "string",
+            "canEdit": true,
+            "key": "xAxis",
+            "label": "xAxis",
+            "description": "x轴数据",
+            "defaultValue": "",
+            "required": true,
+            "toolDescription": "x轴数据",
+            "list": [
+              {
+                "label": "",
+                "value": ""
+              }
+            ]
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "selectedTypeIndex": 0,
+            "valueType": "string",
+            "canEdit": true,
+            "key": "yAxis",
+            "label": "yAxis",
+            "description": "y轴数据",
+            "defaultValue": "",
+            "list": [
+              {
+                "label": "",
+                "value": ""
+              }
+            ],
+            "required": true,
+            "toolDescription": "y轴数据"
+          },
+          {
+            "renderTypeList": [
+              "select"
+            ],
+            "selectedTypeIndex": 0,
+            "valueType": "string",
+            "canEdit": true,
+            "key": "chartType",
+            "label": "chartType",
+            "description": "图表类型，如柱状图，折线图，饼图",
+            "defaultValue": "",
+            "required": true,
+            "list": [
+              {
+                "label": "柱状图",
+                "value": "柱状图"
+              },
+              {
+                "label": "折线图",
+                "value": "折线图"
+              },
+              {
+                "label": "饼图",
+                "value": "饼图"
+              }
+            ],
+            "toolDescription": "图表类型，如柱状图，折线图，饼图"
+          }
+        ],
+        "outputs": [
+          {
+            "id": "title",
+            "valueType": "string",
+            "key": "title",
+            "label": "title",
+            "type": "hidden"
+          },
+          {
+            "id": "xAxis",
+            "valueType": "string",
+            "key": "xAxis",
+            "label": "xAxis",
+            "type": "hidden"
+          },
+          {
+            "id": "yAxis",
+            "valueType": "string",
+            "key": "yAxis",
+            "label": "yAxis",
+            "type": "hidden"
+          },
+          {
+            "id": "chartType",
+            "valueType": "string",
+            "key": "chartType",
+            "label": "chartType",
+            "type": "hidden"
+          }
+        ]
+      },
+      {
+        "nodeId": "pluginOutput",
+        "name": "common:core.module.template.self_output",
+        "intro": "workflow:intro_custom_plugin_output",
+        "avatar": "core/workflow/template/pluginOutput",
+        "flowNodeType": "pluginOutput",
+        "showStatus": false,
+        "position": {
+          "x": 2122.252754006148,
+          "y": -63.5218674613718
+        },
+        "version": "481",
+        "inputs": [
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "valueType": "string",
+            "canEdit": true,
+            "key": "图片base64数据",
+            "label": "图片base64数据",
+            "description": "可用使用markdown格式展示图片，如：![图片](base64)",
+            "value": [
+              "ws0DFKJnCPhk",
+              "bzaYjKyQFOw2"
+            ]
+          }
+        ],
+        "outputs": []
+      },
+      {
+        "nodeId": "ws0DFKJnCPhk",
+        "name": "HTTP 请求",
+        "intro": "可以发出一个 HTTP 请求，实现更为复杂的操作（联网搜索、数据库查询等）",
+        "avatar": "core/workflow/template/httpRequest",
+        "flowNodeType": "httpRequest468",
+        "showStatus": true,
+        "position": {
+          "x": 1216.5166647574395,
+          "y": -206.30162946606856
+        },
+        "version": "481",
+        "inputs": [
+          {
+            "key": "system_addInputParam",
+            "renderTypeList": [
+              "addInputParam"
+            ],
+            "valueType": "dynamic",
+            "label": "",
+            "required": false,
+            "description": "接收前方节点的输出值作为变量，这些变量可以被 HTTP 请求参数使用。",
+            "customInputConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": true
+            },
+            "valueDesc": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpMethod",
+            "renderTypeList": [
+              "custom"
+            ],
+            "valueType": "string",
+            "label": "",
+            "value": "POST",
+            "required": true,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpTimeout",
+            "renderTypeList": [
+              "custom"
+            ],
+            "valueType": "number",
+            "label": "",
+            "value": 30,
+            "min": 5,
+            "max": 600,
+            "required": true,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpReqUrl",
+            "renderTypeList": [
+              "hidden"
+            ],
+            "valueType": "string",
+            "label": "",
+            "description": "新的 HTTP 请求地址。如果出现两个“请求地址”，可以删除该模块重新加入，会拉取最新的模块配置。",
+            "placeholder": "https://api.ai.com/getInventory",
+            "required": false,
+            "valueDesc": "",
+            "debugLabel": "",
+            "toolDescription": "",
+            "value": "drawing/baseChart"
+          },
+          {
+            "key": "system_httpHeader",
+            "renderTypeList": [
+              "custom"
+            ],
+            "valueType": "any",
+            "value": [],
+            "label": "",
+            "description": "自定义请求头，请严格填入 JSON 字符串。\n1. 确保最后一个属性没有逗号\n2. 确保 key 包含双引号\n例如：{\"Authorization\":\"Bearer xxx\"}",
+            "placeholder": "common:core.module.input.description.Http Request Header",
+            "required": false,
+            "valueDesc": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpParams",
+            "renderTypeList": [
+              "hidden"
+            ],
+            "valueType": "any",
+            "value": [],
+            "label": "",
+            "required": false,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpJsonBody",
+            "renderTypeList": [
+              "hidden"
+            ],
+            "valueType": "any",
+            "value": "{\r\n  \"title\": \"{{title-plugin}}\",\r\n  \"xAxis\": \"{{xAxis-plugin}}\",\r\n  \"yAxis\": \"{{yAxis-plugin}}\",\r\n  \"chartType\": \"{{chartType-plugin}}\"\r\n}",
+            "label": "",
+            "required": false,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpFormBody",
+            "renderTypeList": [
+              "hidden"
+            ],
+            "valueType": "any",
+            "value": [],
+            "label": "",
+            "required": false,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "key": "system_httpContentType",
+            "renderTypeList": [
+              "hidden"
+            ],
+            "valueType": "string",
+            "value": "json",
+            "label": "",
+            "required": false,
+            "valueDesc": "",
+            "description": "",
+            "debugLabel": "",
+            "toolDescription": ""
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "valueType": "string",
+            "canEdit": true,
+            "key": "title-plugin",
+            "label": "title-plugin",
+            "customInputConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": true
+            },
+            "required": true,
+            "value": [
+              "pluginInput",
+              "title"
+            ]
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "valueType": "string",
+            "canEdit": true,
+            "key": "xAxis-plugin",
+            "label": "xAxis-plugin",
+            "customInputConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": true
+            },
+            "required": true,
+            "value": [
+              "pluginInput",
+              "xAxis"
+            ]
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "valueType": "string",
+            "canEdit": true,
+            "key": "yAxis-plugin",
+            "label": "yAxis-plugin",
+            "customInputConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": true
+            },
+            "required": true,
+            "value": [
+              "pluginInput",
+              "yAxis"
+            ]
+          },
+          {
+            "renderTypeList": [
+              "reference"
+            ],
+            "valueType": "string",
+            "canEdit": true,
+            "key": "chartType-plugin",
+            "label": "chartType-plugin",
+            "customInputConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": true
+            },
+            "required": true,
+            "value": [
+              "pluginInput",
+              "chartType"
+            ]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "system_addOutputParam",
+            "key": "system_addOutputParam",
+            "type": "dynamic",
+            "valueType": "dynamic",
+            "label": "",
+            "customFieldConfig": {
+              "selectValueTypeList": [
+                "string",
+                "number",
+                "boolean",
+                "object",
+                "arrayString",
+                "arrayNumber",
+                "arrayBoolean",
+                "arrayObject",
+                "any",
+                "chatHistory",
+                "datasetQuote",
+                "dynamic",
+                "selectApp",
+                "selectDataset"
+              ],
+              "showDescription": false,
+              "showDefaultValue": false
+            },
+            "valueDesc": "",
+            "description": ""
+          },
+          {
+            "id": "error",
+            "key": "error",
+            "label": "请求错误",
+            "description": "HTTP请求错误信息，成功时返回空",
+            "valueType": "object",
+            "type": "static",
+            "valueDesc": ""
+          },
+          {
+            "id": "httpRawResponse",
+            "key": "httpRawResponse",
+            "required": true,
+            "label": "原始响应",
+            "description": "HTTP请求的原始响应。只能接受字符串或JSON类型响应数据。",
+            "valueType": "any",
+            "type": "static",
+            "valueDesc": ""
+          },
+          {
+            "id": "bzaYjKyQFOw2",
+            "valueType": "string",
+            "type": "dynamic",
+            "key": "result",
+            "label": "result"
+          }
+        ]
+      }
+    ],
+    "edges": [
+      {
+        "source": "pluginInput",
+        "target": "ws0DFKJnCPhk",
+        "sourceHandle": "pluginInput-source-right",
+        "targetHandle": "ws0DFKJnCPhk-target-left"
+      },
+      {
+        "source": "ws0DFKJnCPhk",
+        "target": "pluginOutput",
+        "sourceHandle": "ws0DFKJnCPhk-source-right",
+        "targetHandle": "pluginOutput-target-left"
+      }
+    ]
+  }
+}

packages/plugins/src/drawing/template.json

@@ -0,0 +1,17 @@
+{
+  "author": "",
+  "version": "486",
+  "name": "BI图表功能",
+  "avatar": "core/workflow/template/BI",
+  "intro": "BI图表功能，可以生成一些常用的图表，如饼图，柱状图，折线图等",
+  "showStatus": false,
+  "weight": 100,
+
+  "isTool": true,
+  "templateType": "tools",
+
+  "workflow": {
+    "nodes": [],
+    "edges": []
+  }
+}

packages/web/components/common/Icon/constants.ts

@@ -267,6 +267,8 @@ export const iconPaths = {
   'core/workflow/undo': () => import('./icons/core/workflow/undo.svg'),
   'core/workflow/upload': () => import('./icons/core/workflow/upload.svg'),
   'core/workflow/versionHistories': () => import('./icons/core/workflow/versionHistories.svg'),
+  'core/workflow/template/baseChart': () => import('./icons/core/workflow/template/baseChart.svg'),
+  'core/workflow/template/BI': () => import('./icons/core/workflow/template/BI.svg'),
   date: () => import('./icons/date.svg'),
   delete: () => import('./icons/delete.svg'),
   edit: () => import('./icons/edit.svg'),

packages/web/components/common/Icon/icons/core/workflow/template/BI.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727082813249" class="icon" viewBox="0 0 1102 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8007" xmlns:xlink="http://www.w3.org/1999/xlink" width="215.234375" height="200"><path d="M78.613268 173.292308v598.96123a98.461538 98.461538 0 0 0 97.831384 98.461539h749.883077a97.831385 97.831385 0 0 0 97.831385-98.461539V173.371077A98.461538 98.461538 0 0 0 926.327729 74.830769H176.444652A97.831385 97.831385 0 0 0 78.613268 173.292308zM0.001575 158.562462A157.853538 157.853538 0 0 1 157.855114 0h787.062154A158.562462 158.562462 0 0 1 1102.770806 158.483692v628.578462a157.853538 157.853538 0 0 1-157.853538 158.562461H157.855114A158.562462 158.562462 0 0 1 0.001575 787.062154v-628.578462z" fill="#13227a" fill-opacity=".651" p-id="8008"></path><path d="M596.127114 425.038769H419.447729a14.966154 14.966154 0 0 1-11.815384-14.178461V234.338462a14.966154 14.966154 0 0 1 14.966153-14.966154 182.902154 182.902154 0 0 1 188.416 190.857846 14.966154 14.966154 0 0 1-14.966153 14.966154zM363.915422 682.614154a215.118769 215.118769 0 0 1-208.029539-211.889231 198.656 198.656 0 0 1 193.929846-204.169846 15.753846 15.753846 0 0 1 15.753846 16.541538v171.08677c0 15.753846 17.250462 16.541538 17.250462 16.541538h173.449846a15.753846 15.753846 0 0 1 16.541539 15.753846 204.878769 204.878769 0 0 1-208.896 196.135385z m303.970461-185.895385v149.897846c0 20.48 12.603077 36.076308 27.490462 36.076308h29.065846c14.887385 0 27.411692-16.462769 27.411692-36.076308V496.64c0-20.401231-12.524308-36.076308-27.411692-36.076308h-29.932308c-14.887385 0-27.411692 16.462769-27.411692 36.076308h0.787692z m182.980923 145.959385c0 20.401231 11.815385 36.076308 26.702769 36.076308h29.065847c14.887385 0 27.490462-16.541538 27.490461-36.076308V283.096615c0-20.48-11.815385-36.155077-27.569231-36.155077h-28.987077c-14.966154 0-26.702769 16.541538-26.702769 36.155077v362.653539-3.150769z" fill="#13227a" fill-opacity=".651" p-id="8009"></path></svg>

packages/web/components/common/Icon/icons/core/workflow/template/baseChart.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1727254154161" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4326" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M732.928 241.1008c0 8.5504 9.8816 15.4624 22.1696 15.4624 12.2368 0 22.1696-6.912 22.1696-15.4624V162.5088c0-8.5504-9.9328-15.4624-22.1696-15.4624H642.56c-12.288 0-22.1696 6.912-22.1696 15.4624 0 8.6016 9.9328 15.4624 22.1696 15.4624h60.8768l-194.0992 135.68-60.0576-41.984a27.904 27.904 0 0 0-15.6672-4.4544h-0.0512a27.4432 27.4432 0 0 0-15.616 4.5568L211.968 416.256c-8.6528 6.0416-8.6528 15.872 0.1024 21.8624a27.8016 27.8016 0 0 0 15.616 4.5056 27.648 27.648 0 0 0 15.7184-4.5568L433.664 304.5888l60.0064 41.8816c8.2944 5.8368 23.04 5.8368 31.3344 0l207.9232-145.2032v39.8336z m-47.5648 69.9392H778.24v297.728h-92.8768V311.04zM530.0736 372.224h92.928v236.544H530.0736V372.224zM374.7328 431.9744h92.9792v176.7936H374.7328V431.9744zM219.4432 497.4592h92.928v111.3088H219.4432V497.4592z" fill="#1296db" p-id="4327"></path><path d="M926.9248 1024H89.9584A64.4096 64.4096 0 0 1 25.6 959.6416V64.3584C25.6 28.8256 54.4256 0 89.9584 0h836.9152c35.4816 0 64.3072 28.8256 64.3584 64.3584v895.232c0 35.584-28.8256 64.4096-64.3072 64.4096z m0-956.0064H89.9584v892.0576h836.9152V67.9936z" fill="#1296db" p-id="4328"></path><path d="M629.1456 768h-394.24v-64h394.24V768z m168.96 128.0512h-563.2v-64h563.2v64z" fill="#1296db" p-id="4329"></path></svg>