diff --git a/src/views/boardGenerate/api/getData.js b/src/views/boardGenerate/api/getData.js
new file mode 100644
index 0000000..7f5b797
--- /dev/null
+++ b/src/views/boardGenerate/api/getData.js
@@ -0,0 +1,133 @@
+import request from '@/utils/request';
+import { getDataSourceList, querySql, querySql1 } from '@/views/boardGenerate/api/dataSource.js';
+import { options } from '@/views/boardGenerate/tool.js';
+import axios from 'axios';
+import { ref } from 'vue';
+
+let apiList = [];
+
+let getDataFlag = false;
+const waitReq =  () => {
+  return new Promise((resolve, reject) => {
+    let times = null;
+    times = setInterval(() => {
+      if (apiList.length > 0) {
+        clearInterval(times);
+        times = null;
+        resolve(true);
+      }
+    }, 100);
+  })
+};
+const getApiList = async () => {
+  if (!getDataFlag) {
+    getDataFlag = true;
+    await getDataSourceList({
+      pageNum: 1,
+      pageSize: 9999999
+    }).then((res) => {
+      apiList = res.rows.map((e) => {
+        return {
+          id: e.dataSourceId,
+          name: e.dataSourceName,
+          url: e.requestUrl,
+          method: e.requestMethod,
+          outputData: e.designDataFieldList,
+          type: e.responseType,
+          db: e.fieldOne,
+          SQL: e.fieldTwo,
+          isPage: e.fieldThree === 'true'
+        };
+      });
+      return true;
+    });
+  } else {
+    await waitReq();
+    return true;
+  }
+};
+
+const anyFun = (data, fun, key) => {
+  switch (fun) {
+    case 'map':
+      return data.map((e) => e[key]);
+    default:
+      return null;
+  }
+};
+const parseData = (data, rule) => {
+  let resData = data;
+  let step = rule.split(',');
+  step.forEach((item) => {
+    if (resData) {
+      let fun = item.split('%');
+      if (fun.length === 1) {
+        resData = resData[fun[0]];
+      }
+      if (fun.length === 2) {
+        resData = anyFun(resData, fun[0], fun[1]);
+      }
+    }
+  });
+  return resData;
+};
+const formulaFun = (formula, inputData) => {
+  let data = formula.replace(/\$\{\s*([^}]+?)\s*\}/g, (_, key) => {
+    let infos = key.split(',');
+    if (infos.length === 1) {
+      return inputData[infos[0]] || '%%';
+    }
+    if (infos.length === 2) {
+      return `AND ${infos[0]} = ${inputData[infos[1]] || '%%'}`;
+    }
+  });
+  return data;
+};
+
+export const getData = async (res) => {
+  await getApiList();
+
+  let outputData = {};
+
+  const tasks = (res.request||[]).map(async (e) => {
+    let api = apiList.find((v) => v.id === e.dataSource);
+    let params = { ...res.inputData };
+
+    if (api.type === '1' || !api.type) {
+      const result = await (options.isD ? request : axios.request)({
+        method: api.method,
+        url: api.url,
+        params: api.method === 'get' ? params : undefined,
+        data: api.method === 'post' ? params : undefined
+      });
+
+      let data = options.isD ? result : result.data || result.rows;
+
+      api.outputData.forEach((item) => {
+        outputData[item.fieldOne] = parseData(data, item.fieldTwo);
+      });
+    }
+
+    if (api.type === '2') {
+      let data;
+
+      if (api.isPage) {
+        data = await querySql1({
+          sql: formulaFun(api.SQL, res.inputData),
+          linkId: api.db,
+          pageSize: res.inputData.pageSize,
+          pageNum: res.inputData.pageNum
+        });
+      } else {
+        data = await querySql(formulaFun(api.SQL, res.inputData), api.db);
+      }
+
+      api.outputData.forEach((item) => {
+        outputData[item.fieldOne] = parseData(data, item.fieldTwo);
+      });
+    }
+  });
+
+  await Promise.all(tasks);
+  return outputData;
+};
diff --git a/src/views/boardGenerate/nodes/board/annularNode.vue b/src/views/boardGenerate/nodes/board/annularNode.vue
index f074b2c..f2a43fb 100644
--- a/src/views/boardGenerate/nodes/board/annularNode.vue
+++ b/src/views/boardGenerate/nodes/board/annularNode.vue
@@ -1,11 +1,16 @@
 <template>
-  <div
-    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
+  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
     <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
-    <div class="custom-node"
-         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
-      <div style="width: 100%;height: 100%" ref="chartRef" />
+    <div
+      class="custom-node"
+      :style="{
+        width: props.dimensions.width * props.ratioWidth + 'px',
+        height: props.dimensions.height * props.ratioHeight + 'px',
+        pointerEvents: props.isView ? 'auto' : 'none'
+      }"
+    >
+      <div style="width: 100%; height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
   </div>
@@ -15,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -59,6 +65,7 @@ const props = defineProps({
 const chartRef = ref();
 let chart = null;
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
+let optionData = {}
 const getOption = () => {
   const chartOption = {
     title: {
@@ -114,10 +121,10 @@ const getOption = () => {
         type: 'pie',
         itemStyle: {
           color: (a) => {
-            if(props.data?.options?.colorList?.length){
+            if (props.data?.options?.colorList?.length) {
               return props.data?.options?.colorList?.[a.dataIndex % props.data?.options?.colorList?.length];
-            }else{
-              return colorList[a.dataIndex %colorList.length]
+            } else {
+              return colorList[a.dataIndex % colorList.length];
             }
           }
         },
@@ -130,22 +137,22 @@ const getOption = () => {
       }
     ]
   };
-  let xData = [props.inputData?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
-  console.log(chartOption);
-  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
+  let xData = [optionData.x1 || props.inputData?.x1 || []];
+  let yData = [optionData.y1 ||props.inputData?.y1 || []];
+  let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
-  Array(length).fill(0).forEach((_, i) => {
-    let item = [];
-    xData.forEach(e => {
-      item.push(e[i]);
+  Array(length)
+    .fill(0)
+    .forEach((_, i) => {
+      let item = [];
+      xData.forEach((e) => {
+        item.push(e[i]);
+      });
+      yData.forEach((e) => {
+        item.push(e[i]);
+      });
+      source.push(item);
     });
-    yData.forEach(e => {
-      item.push(e[i]);
-    });
-    source.push(item);
-  });
-  console.log(source);
   return {
     ...chartOption,
     dataset: {
@@ -159,16 +166,37 @@ onMounted(() => {
   });
   chart.setOption(getOption(), true);
 });
-watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart && chart.setOption(getOption(), true);
-  }
-}, { deep: true, immediate: true });
-watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart?.resize();
-  }
-}, { deep: true, immediate: true });
+watch(
+  () => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart && chart.setOption(getOption(), true);
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => JSON.parse(JSON.stringify(props.dimensions)),
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart?.resize();
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request ||'[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request ||[], inputData: props.inputData }).then((e) => {
+        optionData = e
+        chart && chart.setOption(getOption(), true);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();
@@ -180,5 +208,4 @@ const resize = (e) => {
   width: 100%;
   height: 100%;
 }
-
 </style>
diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue
index b58441b..2c04ff3 100644
--- a/src/views/boardGenerate/nodes/board/barNode.vue
+++ b/src/views/boardGenerate/nodes/board/barNode.vue
@@ -1,12 +1,16 @@
 <template>
-  <div
-    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
-                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
-    <div class="custom-node"
-         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
-      <div style="width: 100%;height: 100%" ref="chartRef" />
+    <div
+      class="custom-node"
+      :style="{
+        width: props.dimensions.width * props.ratioWidth + 'px',
+        height: props.dimensions.height * props.ratioHeight + 'px',
+        pointerEvents: props.isView ? 'auto' : 'none'
+      }"
+    >
+      <div style="width: 100%; height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
   </div>
@@ -16,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -59,6 +64,7 @@ const props = defineProps({
 });
 const chartRef = ref();
 let chart = null;
+let optionData = {};
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const defaultOption = {
   title: {
@@ -206,123 +212,124 @@ const defaultOption = {
 };
 const getOption = () => {
   const chartOption = {
-      title: {
-        text: props.data.options.title || ''
-      },
-      legend: {
-        show: props.data?.options?.legend || false
-      },
-      tooltip: {
-        show: props.data?.options?.tooltip || false
-      },
-      grid: {
-        top: props.data?.options?.gridTop + '%' || '20%',
-        left: props.data?.options?.gridLeft + '%' || '20%',
-        bottom: props.data?.options?.gridBottom + '%' || '20%',
-        right: props.data?.options?.gridRight + '%' || '20%'
-      },
-      xAxis: [
-        {
-          name: props.data?.options?.xName || '',
-          type: props.data?.options?.isHorizontal ? 'value' : 'category',
-          nameLocation: props.data?.options?.xNameLocation || 'end',
-          boundaryGap: true,
-          axisLine: {
-            show: props.data?.options?.xAxisLineShow || false,
-            lineStyle: {
-              color: props.data?.options?.xAxisLineColor || '#DCE2E8'
-            }
-          },
-          axisTick: {
-            show: props.data?.options?.xAxisTickShow || false,
-            inside: props.data?.options?.xAxisTickInside || false,
-            lineStyle: {
-              color: props.data?.options?.xAxisTickColor || '#DCE2E8'
-            }
-          },
-          axisLabel: {
-            show: props.data?.options?.xAxisLabelShow || false,
-            interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
-            inside: props.data?.options?.xAxisLabelInside || false,
-            formatter: props.data?.options?.xAxisLabelFormatter || null,
-            rotate: props.data?.options?.xAxisLabelRotate || 0,
-            color: props.data?.options?.xAxisLabelColor || '#fff',
-            fontSize: props.data?.options?.xAxisLabelFontSize || 12,
-            margin: props.data?.options?.xAxisLabelMargin || 3
-          },
-          splitLine: {
-            show: props.data?.options?.xAxisSplitLineShow || false,
-            lineStyle: {
-              color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
-              type: props.data?.options?.xAxisSplitLineType || 'solid'
-            }
-          }
-        }
-      ],
-      yAxis: [
-        {
-          name: props.data?.options?.yName || '',
-          type: props.data?.options?.isHorizontal ? 'category' : 'value',
-          nameLocation: props.data?.options?.yNameLocation || 'end',
-          axisLine: {
-            show: props.data?.options?.yAxisLineShow || false,
-            lineStyle: {
-              color: props.data?.options?.yAxisLineColor || '#DCE2E8'
-            }
-          },
-          axisTick: {
-            show: props.data?.options?.yAxisTickShow || false,
-            inside: props.data?.options?.yAxisTickInside || false,
-            lineStyle: {
-              color: props.data?.options?.yAxisTickColor || '#DCE2E8'
-            }
-          },
-          axisLabel: {
-            show: props.data?.options?.yAxisLabelShow || false,
-            interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
-            inside: props.data?.options?.yAxisLabelInside || false,
-            formatter: props.data?.options?.yAxisLabelFormatter || null,
-            rotate: props.data?.options?.yAxisLabelRotate || 0,
-            color: props.data?.options?.yAxisLabelColor || '#fff',
-            fontSize: props.data?.options?.yAxisLabelFontSize || 12,
-            margin: props.data?.options?.yAxisLabelMargin || 3
-          },
-          splitLine: {
-            show: props.data?.options?.yAxisSplitLineShow || false,
-            lineStyle: {
-              color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
-              type: props.data?.options?.yAxisSplitLineType || 'solid'
-            }
-          }
-        }
-      ],
-      series: [
-        {
+    title: {
+      text: props.data.options.title || ''
+    },
+    legend: {
+      show: props.data?.options?.legend || false
+    },
+    tooltip: {
+      show: props.data?.options?.tooltip || false
+    },
+    grid: {
+      top: props.data?.options?.gridTop + '%' || '20%',
+      left: props.data?.options?.gridLeft + '%' || '20%',
+      bottom: props.data?.options?.gridBottom + '%' || '20%',
+      right: props.data?.options?.gridRight + '%' || '20%'
+    },
+    xAxis: [
+      {
+        name: props.data?.options?.xName || '',
+        type: props.data?.options?.isHorizontal ? 'value' : 'category',
+        nameLocation: props.data?.options?.xNameLocation || 'end',
+        boundaryGap: true,
+        axisLine: {
+          show: props.data?.options?.xAxisLineShow || false,
           lineStyle: {
-            color: props.data?.options?.seriesColor || colorList[0]
-          },
-          label: {
-            position: props.data?.options?.isHorizontal ? 'right' : 'top'
+            color: props.data?.options?.xAxisLineColor || '#DCE2E8'
+          }
+        },
+        axisTick: {
+          show: props.data?.options?.xAxisTickShow || false,
+          inside: props.data?.options?.xAxisTickInside || false,
+          lineStyle: {
+            color: props.data?.options?.xAxisTickColor || '#DCE2E8'
+          }
+        },
+        axisLabel: {
+          show: props.data?.options?.xAxisLabelShow || false,
+          interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
+          inside: props.data?.options?.xAxisLabelInside || false,
+          formatter: props.data?.options?.xAxisLabelFormatter || null,
+          rotate: props.data?.options?.xAxisLabelRotate || 0,
+          color: props.data?.options?.xAxisLabelColor || '#fff',
+          fontSize: props.data?.options?.xAxisLabelFontSize || 12,
+          margin: props.data?.options?.xAxisLabelMargin || 3
+        },
+        splitLine: {
+          show: props.data?.options?.xAxisSplitLineShow || false,
+          lineStyle: {
+            color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
+            type: props.data?.options?.xAxisSplitLineType || 'solid'
           }
         }
-      ]
-    }
-  ;
-  console.log(props.data?.options?.seriesColor);
-  let xData = [props.inputData?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
-  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
+      }
+    ],
+    yAxis: [
+      {
+        name: props.data?.options?.yName || '',
+        type: props.data?.options?.isHorizontal ? 'category' : 'value',
+        nameLocation: props.data?.options?.yNameLocation || 'end',
+        axisLine: {
+          show: props.data?.options?.yAxisLineShow || false,
+          lineStyle: {
+            color: props.data?.options?.yAxisLineColor || '#DCE2E8'
+          }
+        },
+        axisTick: {
+          show: props.data?.options?.yAxisTickShow || false,
+          inside: props.data?.options?.yAxisTickInside || false,
+          lineStyle: {
+            color: props.data?.options?.yAxisTickColor || '#DCE2E8'
+          }
+        },
+        axisLabel: {
+          show: props.data?.options?.yAxisLabelShow || false,
+          interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
+          inside: props.data?.options?.yAxisLabelInside || false,
+          formatter: props.data?.options?.yAxisLabelFormatter || null,
+          rotate: props.data?.options?.yAxisLabelRotate || 0,
+          color: props.data?.options?.yAxisLabelColor || '#fff',
+          fontSize: props.data?.options?.yAxisLabelFontSize || 12,
+          margin: props.data?.options?.yAxisLabelMargin || 3
+        },
+        splitLine: {
+          show: props.data?.options?.yAxisSplitLineShow || false,
+          lineStyle: {
+            color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
+            type: props.data?.options?.yAxisSplitLineType || 'solid'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        lineStyle: {
+          color: props.data?.options?.seriesColor || colorList[0]
+        },
+        label: {
+          position: props.data?.options?.isHorizontal ? 'right' : 'top'
+        }
+      }
+    ]
+  };
+  let xData = [optionData.x1 || props.inputData?.x1 || []];
+  let yData = [optionData.y1 || props.inputData?.y1 || []];
+  let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
-  Array(length).fill(0).forEach((_, i) => {
-    let item = [];
-    xData.forEach(e => {
-      item.push(e[i]);
+  Array(length)
+    .fill(0)
+    .forEach((_, i) => {
+      let item = [];
+      xData.forEach((e) => {
+        item.push(e[i]);
+      });
+      yData.forEach((e) => {
+        item.push(parseFloat(e[i]));
+      });
+      source.push(item);
     });
-    yData.forEach(e => {
-      item.push(parseFloat(e[i]));
-    });
-    source.push(item);
-  });
   return {
     ...chartOption,
     dataset: {
@@ -337,16 +344,38 @@ onMounted(() => {
   chart.setOption(defaultOption, true);
   chart && chart.setOption(getOption(), false);
 });
-watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart && chart.setOption(getOption(), false);
-  }
-}, { deep: true, immediate: true });
-watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart?.resize();
-  }
-}, { deep: true, immediate: true });
+watch(
+  () => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart && chart.setOption(getOption(), false);
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => JSON.parse(JSON.stringify(props.dimensions)),
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart?.resize();
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request || [], inputData: props.inputData }).then((e) => {
+        optionData = e;
+        chart && chart.setOption(getOption(), false);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();
@@ -358,5 +387,4 @@ const resize = (e) => {
   width: 100%;
   height: 100%;
 }
-
 </style>
diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue
index 5d62a5d..7a2c9e0 100644
--- a/src/views/boardGenerate/nodes/board/lineNode.vue
+++ b/src/views/boardGenerate/nodes/board/lineNode.vue
@@ -1,12 +1,16 @@
 <template>
-  <div
-    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
-                 v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
-    <div class="custom-node"
-         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
-      <div style="width: 100%;height: 100%" ref="chartRef" />
+    <div
+      class="custom-node"
+      :style="{
+        width: props.dimensions.width * props.ratioWidth + 'px',
+        height: props.dimensions.height * props.ratioHeight + 'px',
+        pointerEvents: props.isView ? 'auto' : 'none'
+      }"
+    >
+      <div style="width: 100%; height: 100%" ref="chartRef" />
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
   </div>
@@ -16,6 +20,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -32,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     required: false
   },
+  colors: {
+    type: Array,
+    required: false
+  },
   inputData: {
     type: Object,
     required: false
@@ -59,6 +68,7 @@ const props = defineProps({
 });
 const chartRef = ref();
 let chart = null;
+let optionData = {};
 const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']);
 const defaultOption = {
   title: {
@@ -115,7 +125,7 @@ const defaultOption = {
     {
       name: props.data?.options?.xName || '',
       nameLocation: props.data?.options?.xNameLocation || 'end',
-      type: props.data?.options?.isHorizontal ?'value':'category',
+      type: props.data?.options?.isHorizontal ? 'value' : 'category',
       boundaryGap: props.data?.options?.boundaryGap || false,
       axisLine: {
         show: props.data?.options?.xAxisLineShow || false,
@@ -230,6 +240,7 @@ const getOption = () => {
     },
     xAxis: [
       {
+        type: 'category',
         name: props.data?.options?.xName || '',
         nameLocation: props.data?.options?.xNameLocation || 'end',
         boundaryGap: props.data?.options?.boundaryGap || false,
@@ -267,6 +278,7 @@ const getOption = () => {
     ],
     yAxis: [
       {
+        type: 'value',
         name: props.data?.options?.yName || '',
         nameLocation: props.data?.options?.yNameLocation || 'end',
         axisLine: {
@@ -303,6 +315,7 @@ const getOption = () => {
     ],
     series: [
       {
+        type: 'line',
         showSymbol: props.data?.options?.lineSymbolShow || false,
         symbolSize: props.data?.options?.lineSymbolSize || 5,
         symbol: props.data?.options?.lineSymbolType || 'circle',
@@ -312,20 +325,22 @@ const getOption = () => {
       }
     ]
   };
-  let xData = [props.inputData?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
-  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
+  let xData = [optionData.x1 || props.inputData?.x1 || []];
+  let yData = [optionData.y1 || props.inputData?.y1 || []];
+  let length = Math.min(...xData.map((e) => e.length), ...yData.map((e) => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
-  Array(length).fill(0).forEach((_, i) => {
-    let item = [];
-    xData.forEach(e => {
-      item.push(e[i]);
+  Array(length)
+    .fill(0)
+    .forEach((_, i) => {
+      let item = [];
+      xData.forEach((e) => {
+        item.push(e[i]);
+      });
+      yData.forEach((e) => {
+        item.push(parseFloat(e[i]));
+      });
+      source.push(item);
     });
-    yData.forEach(e => {
-      item.push(parseFloat(e[i]));
-    });
-    source.push(item);
-  });
   return {
     ...chartOption,
     dataset: {
@@ -340,16 +355,45 @@ onMounted(() => {
   chart.setOption(defaultOption, true);
   chart && chart.setOption(getOption(), false);
 });
-watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart && chart.setOption(getOption(), false);
-  }
-}, { deep: true, immediate: true });
-watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    chart?.resize();
-  }
-}, { deep: true, immediate: true });
+watch(
+  () => [JSON.parse(JSON.stringify(props.colors))],
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      colorList.value = props.colors
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))],
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart && chart.setOption(getOption(), false);
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => JSON.parse(JSON.stringify(props.dimensions)),
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      chart?.resize();
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
+        optionData = e;
+        chart && chart.setOption(getOption(), false);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();
@@ -361,5 +405,4 @@ const resize = (e) => {
   width: 100%;
   height: 100%;
 }
-
 </style>
diff --git a/src/views/boardGenerate/nodes/board/multiBarsNode.vue b/src/views/boardGenerate/nodes/board/multiBarsNode.vue
index d17d8cf..191b4f1 100644
--- a/src/views/boardGenerate/nodes/board/multiBarsNode.vue
+++ b/src/views/boardGenerate/nodes/board/multiBarsNode.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     required: false,
     default: 1
   },
+  colors: {
+    type: Array,
+    required: false
+  },
   isView: {
     type: Boolean,
     required: false
@@ -173,12 +177,12 @@ const getOption = () => {
         show: false
       }
     },
-    series: (props.data.options?.yNames || []).map(() => {
+    series: (props.data.options?.yNames || []).map((_,k) => {
       return {
         type: 'bar',
         itemStyle: {
           normal: {
-            color: props.data?.options?.seriesColor || colorList[0],
+            color: props.colors[k % props.colors.length],
           }
         },
         barMaxWidth: 50,
@@ -215,6 +219,13 @@ onMounted(() => {
   });
   chart && chart.setOption(getOption(), true);
 });
+
+watch(() => [JSON.parse(JSON.stringify(props.colors))], (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    console.log(123);
+    chart && chart.setOption(getOption(), true);
+  }
+}, { deep: true, immediate: true });
 watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
     chart && chart.setOption(getOption(), true);
diff --git a/src/views/boardGenerate/nodes/board/pieNode.vue b/src/views/boardGenerate/nodes/board/pieNode.vue
index 626561b..be17db4 100644
--- a/src/views/boardGenerate/nodes/board/pieNode.vue
+++ b/src/views/boardGenerate/nodes/board/pieNode.vue
@@ -16,6 +16,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -59,6 +60,7 @@ const props = defineProps({
 });
 const chartRef = ref();
 let chart = null;
+let optionData = {}
 const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
 const getOption = () => {
   const chartOption = {
@@ -128,8 +130,8 @@ const getOption = () => {
       }
     ]
   };
-  let xData = [props.inputData?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
+  let xData = [optionData.x1 || props.inputData?.x1 || []];
+  let yData = [optionData.y1 || props.inputData?.y1 || []];
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
   console.log(source);
@@ -166,6 +168,21 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
     chart?.resize();
   }
 }, { deep: true, immediate: true });
+
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
+        optionData = e;
+        chart && chart.setOption(getOption(), true);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();
diff --git a/src/views/boardGenerate/nodes/board/radarNode.vue b/src/views/boardGenerate/nodes/board/radarNode.vue
index 0e2da43..81feb31 100644
--- a/src/views/boardGenerate/nodes/board/radarNode.vue
+++ b/src/views/boardGenerate/nodes/board/radarNode.vue
@@ -16,6 +16,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import * as echarts from 'echarts';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -59,6 +60,7 @@ const props = defineProps({
 });
 const chartRef = ref();
 let chart = null;
+let optionData = {};
 const getOption = () => {
   const chartOption = {
     title: {
@@ -129,7 +131,7 @@ const getOption = () => {
         fontSize: 8,
         color: '#ddd'
       },
-      indicator: (props.inputData?.x1 || [' ']).map(e => {
+      indicator: (optionData.x1 || props.inputData?.x1 || [' ']).map(e => {
         return {
           name: e
         };
@@ -158,7 +160,7 @@ const getOption = () => {
         data: [
           {
             // value: [98,95,93,95,93,97],
-            value: props.inputData?.y1,
+            value: optionData.y1 || props.inputData?.y1,
             name: 'Allocated Budget',
             areaStyle: {
               color: {
@@ -177,8 +179,8 @@ const getOption = () => {
       }
     ]
   };
-  let xData = [props.inputData?.x1 || []];
-  let yData = [props.inputData?.y1 || []];
+  let xData = [optionData.x1 || props.inputData?.x1 || []];
+  let yData = [optionData.y1 || props.inputData?.y1 || []];
   let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
   let source = [['product', ...[props.data.options?.yNames?.[0] || ' ']]];
   Array(length).fill(0).forEach((_, i) => {
@@ -191,7 +193,6 @@ const getOption = () => {
     });
     source.push(item);
   });
-  console.log(source);
   return {
     ...chartOption,
     dataset: {
@@ -215,6 +216,20 @@ watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
     chart?.resize();
   }
 }, { deep: true, immediate: true });
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
+        optionData = e;
+        chart && chart.setOption(getOption(), true);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   chart.resize();
diff --git a/src/views/boardGenerate/nodes/form/digitalFlopNode.vue b/src/views/boardGenerate/nodes/form/digitalFlopNode.vue
index 0380531..a2e7871 100644
--- a/src/views/boardGenerate/nodes/form/digitalFlopNode.vue
+++ b/src/views/boardGenerate/nodes/form/digitalFlopNode.vue
@@ -1,17 +1,28 @@
 <template>
-  <div
-    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff"
-                 v-if="!props.isView && !props.isHideHandle && props.selected"
-                 @resize="resize" />
-    <div class="custom-node"
-         :style="{backgroundColor:props.data.options.backgroundColor,color:'#fff',width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
+    <div
+      class="custom-node"
+      :style="{
+        backgroundColor: props.data.options.backgroundColor,
+        color: '#fff',
+        width: props.dimensions.width * props.ratioWidth + 'px',
+        height: props.dimensions.height * props.ratioHeight + 'px',
+        pointerEvents: props.isView ? 'auto' : 'none'
+      }"
+    >
       <vue-number-roll-plus
-        style="display: inline-block;  text-align: center;position: relative;top: 50%;transform: translateY(-50%)"
+        style="display: inline-block; text-align: center; position: relative; top: 50%; transform: translateY(-50%)"
         :number="item"
-        :height="props.dimensions.height*props.ratioHeight"
+        :height="props.dimensions.height * props.ratioHeight"
         background="#fff0"
-        :style="{fontSize:props.data.options.fontSize+'px',color:props.data.options.color,'--number-roll-plus-width':((props.dimensions.width*props.ratioWidth) / props.data.options.numQuantity) - (props.data.options.isBorder? 2:0) +'px',border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}"
+        :style="{
+          fontSize: props.data.options.fontSize + 'px',
+          color: props.data.options.color,
+          '--number-roll-plus-width':
+            (props.dimensions.width * props.ratioWidth) / props.data.options.numQuantity - (props.data.options.isBorder ? 2 : 0) + 'px',
+          border: props.data.options.isBorder ? ` 1px solid ${props.data.options.borderColor}` : ''
+        }"
         v-for="(item, index) in list"
       ></vue-number-roll-plus>
     </div>
@@ -19,12 +30,12 @@
   </div>
 </template>
 <script setup>
-
 import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import VueNumberRollPlus from 'vue3-number-roll-plus';
 import 'vue3-number-roll-plus/main.css';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const list = ref([]);
 const props = defineProps({
@@ -72,10 +83,10 @@ const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);
 };
-const padArray = (arr,x,value=0)=>{
+const padArray = (arr, x, value = 0) => {
   if (arr.length > x) {
     // return arr.slice(-x);
-    return arr.slice(0,x);
+    return arr.slice(0, x);
   } else if (arr.length < x) {
     const padding = new Array(x - arr.length).fill(value);
     return [...padding, ...arr];
@@ -83,21 +94,42 @@ const padArray = (arr,x,value=0)=>{
     // 正好 x 位
     return arr;
   }
-}
-watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.parse(JSON.stringify(props.data?.options?.number)), JSON.parse(JSON.stringify(props.inputData?.value || ''))], (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    let value = props.inputData?.value || props.data.options.number || '';
-    value = Math.ceil(parseFloat(value))
-    list.value = padArray(value.toString().split(''),props.data.options.numQuantity)
-  }
-}, { deep: true, immediate: true });
+};
+watch(
+  () => [
+    JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),
+    JSON.parse(JSON.stringify(props.data?.options?.number)),
+    JSON.parse(JSON.stringify(props.inputData?.value || ''))
+  ],
+  (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      let value = props.inputData?.value || props.data.options.number || '';
+      value = Math.ceil(parseFloat(value));
+      list.value = padArray(value.toString().split(''), props.data.options.numQuantity);
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
+        let value = e.value || '';
+        value = Math.ceil(parseFloat(value));
+        list.value = padArray(value.toString().split(''), props.data.options.numQuantity);
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 <style scoped>
 .custom-node {
   position: absolute;
 }
 
-
 :deep(.real-time-num) {
   margin-left: 0;
   vertical-align: top;
@@ -107,10 +139,8 @@ watch(() => [JSON.parse(JSON.stringify(props.data?.options?.numQuantity)),JSON.p
 }
 </style>
 <style>
-
 :root {
   --number-roll-plus-width: 30px;
   --number-roll-plus-height: 40px;
 }
 </style>
-
diff --git a/src/views/boardGenerate/nodes/form/scrollTableNode.vue b/src/views/boardGenerate/nodes/form/scrollTableNode.vue
index 2582463..9cebb9b 100644
--- a/src/views/boardGenerate/nodes/form/scrollTableNode.vue
+++ b/src/views/boardGenerate/nodes/form/scrollTableNode.vue
@@ -26,7 +26,7 @@
       </div>
       <vue3ScrollSeamless
         :classOptions="props.data.options.tableClassOption || {}"
-        :dataList="props.inputData.tableData"
+        :dataList="optionData.tableData || props.inputData.tableData"
         v-if="scrollShow"
         style="overflow: hidden"
         :style="{ height: `calc(100% - ${props.data.options.thHeight || '0px'})` }"
@@ -37,7 +37,7 @@
             color: props.data.options.tdColor[index % props.data.options.tdColor?.length],
             backgroundColor: (props.data.options?.tdBgColor || [])[index % props.data.options.tdBgColor?.length]
           }"
-          v-for="(data, index) in props.inputData.tableData"
+          v-for="(data, index) in (optionData.tableData||props.inputData.tableData)"
           :key="index"
         >
           <div
@@ -53,7 +53,7 @@
           >
             <div style="white-space: nowrap;width:100%;height:100%;overflow: hidden;position: relative;">
               <span v-if="i.type === '文本'" id="autoScroll">
-                {{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
+                {{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
               </span>
 
               <el-progress
@@ -61,23 +61,23 @@
                 v-else-if="i.type === '进度条'"
                 :text-inside="true"
                 :stroke-width="26"
-                :percentage="parseFloat(setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula))"
+                :percentage="parseFloat(setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula))"
               />
 
               <el-tag type="primary" v-else-if="i.type === '标签'">
-                {{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
+                {{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}
               </el-tag>
               <el-image
-                :preview-src-list="[((props.inputData.tableData || [])[index] || {})[i.field]]"
+                :preview-src-list="[((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field]]"
                 v-else-if="i.type === '图片'"
                 style="width: 100%"
                 :style="{ height: props.data.options.tdHeight }"
-                :src="setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula)"
+                :src="setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula)"
                 fit="contain"
               />
 
               <span id="autoScroll"
-                    v-else>{{ setText(((props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
+                    v-else>{{ setText(((optionData.tableData || props.inputData.tableData || [])[index] || {})[i.field], i.formula) }}</span>
             </div>
           </div>
         </div>
@@ -91,6 +91,7 @@ import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
 import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+import { getData } from '@/views/boardGenerate/api/getData.js';
 
 const scrollShow = ref(true);
 
@@ -137,7 +138,7 @@ const props = defineProps({
     required: true
   }
 });
-console.log(props.inputData);
+const optionData = ref({})
 const setText = (value, formula) => {
   if (!formula) {
     return value;
@@ -156,6 +157,19 @@ watch(
   },
   { deep: true, immediate: true }
 );
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request || '[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request||[], inputData: props.inputData }).then((e) => {
+        optionData.value = e;
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);
diff --git a/src/views/boardGenerate/nodes/form/textNode.vue b/src/views/boardGenerate/nodes/form/textNode.vue
index 64454c4..c508d8d 100644
--- a/src/views/boardGenerate/nodes/form/textNode.vue
+++ b/src/views/boardGenerate/nodes/form/textNode.vue
@@ -1,14 +1,25 @@
 <template>
-  <div
-    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
-    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
-                 @resize="resize" />
+  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
+    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
 
-    <div class="custom-node"
-         :style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
+    <div
+      class="custom-node"
+      :style="{
+        textAlign: props.data.options.align,
+        width: props.dimensions.width * props.ratioWidth + 'px',
+        lineHeight: props.dimensions.height * props.ratioHeight + 'px',
+        height: props.dimensions.height * props.ratioHeight + 'px',
+        pointerEvents: props.isView ? 'auto' : 'none'
+      }"
+    >
       <span
-        :style="{whiteSpace:props.data.options.whiteSpace,color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text
-        }}</span>
+        :style="{
+          whiteSpace: props.data.options.whiteSpace || 'nowrap',
+          color: props.data.options.color,
+          fontSize: props.dimensions.height * props.ratioHeight + 'px'
+        }"
+        >{{ apiData.text || props.inputData?.text || props.data.options.text }}</span
+      >
     </div>
     <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
   </div>
@@ -17,6 +28,7 @@
 import { defineEmits, defineProps, ref } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 import { Handle, Position } from '@vue-flow/core';
+import { getData } from '../../api/getData.js';
 
 const props = defineProps({
   ratioWidth: {
@@ -59,6 +71,25 @@ const props = defineProps({
   }
 });
 
+const  apiData = ref({})
+
+onMounted(async () => {
+  await getData({ request: props.data.options.request, inputData: props.inputData }).then((e) => {
+    apiData.value =e
+  });
+});
+
+watch(
+  () => [JSON.parse(JSON.stringify(props.data.options.request ||'[]')), JSON.parse(JSON.stringify(props.inputData || ''))],
+  async (obj1, obj2) => {
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      await getData({ request: props.data.options.request||[], inputData: props.inputData }).then((e) => {
+        apiData.value =e
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
 const emit = defineEmits(['resize']);
 const resize = (e) => {
   emit('resize', e, props.id);
@@ -69,4 +100,3 @@ const resize = (e) => {
   position: absolute;
 }
 </style>
-