diff --git a/.gitignore b/.gitignore
index 60a4aff1..624876e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ dist
 dist-ssr
 *.local
 .vscode
+.idea
diff --git a/package.json b/package.json
index 8895b4e3..bbcf6e73 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "three": "^0.145.0",
     "vue": "^3.2.31",
     "vue-demi": "^0.13.1",
-    "vue-i18n": "^9.2.2",
+    "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",
diff --git a/src/packages/components/Charts/Mores/Graph/config.ts b/src/packages/components/Charts/Mores/Graph/config.ts
index 0dfb0dc8..125d7469 100644
--- a/src/packages/components/Charts/Mores/Graph/config.ts
+++ b/src/packages/components/Charts/Mores/Graph/config.ts
@@ -9,7 +9,8 @@ export const includes = []
 // 关系图布局
 export const GraphLayout = [
   { label: '无', value: 'none' },
-  { label: '环形', value: 'circular' }
+  { label: '环形', value: 'circular' },
+  { label: '力引导', value: 'force' }
 ]
 
 // 标签开关
@@ -24,44 +25,57 @@ export const LabelPosition = [
   { label: '右侧', value: 'right' },
   { label: '顶部', value: 'top' },
   { label: '底部', value: 'bottom' },
-  { label: '内部', value: 'inside' },
+  { label: '内部', value: 'inside' }
+]
+
+// 图-迭代动画
+export const LayoutAnimation = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
 ]
 
 export const option = {
-    dataset: { ...dataJson },
-    tooltip: {},
-    legend:{
-      show:true,
-      textStyle:{
-        color:"#eee",
-        fontSize: 14 ,
-      },
-      data: dataJson.categories.map(function (a) {
-          return a.name;
-      })
+  dataset: { ...dataJson },
+  tooltip: {},
+  legend: {
+    show: true,
+    textStyle: {
+      color: '#eee',
+      fontSize: 14
     },
-    series: [
-      {
-        type: 'graph',
-        layout: 'none', // none circular环形布局
-        data: dataJson.nodes,
-        links: dataJson.links,
-        categories: dataJson.categories,
-        label: { // 标签
-          show: 1,
-          position: 'right',
-          formatter: '{b}'
-        },
-        labelLayout: {
-          hideOverlap: true
-        },
-        lineStyle: {
-          color: 'source', // 线条颜色
-          curveness: 0.2 // 线条卷曲程度
-        }
+    data: dataJson.categories.map(function (a) {
+      return a.name
+    })
+  },
+  series: [
+    {
+      type: 'graph',
+      layout: 'none', // none circular环形布局
+      data: dataJson.nodes,
+      links: dataJson.links,
+      categories: dataJson.categories,
+      label: {
+        show: 1,
+        position: 'right',
+        formatter: '{b}'
+      },
+      labelLayout: {
+        hideOverlap: true
+      },
+      lineStyle: {
+        color: 'source', // 线条颜色
+        curveness: 0.2 // 线条卷曲程度
+      },
+      force: {
+        repulsion: 100,
+        gravity: 0.1,
+        edgeLength: 30,
+        layoutAnimation: 1,
+        friction: 0.6
       }
-    ]
-  };
+    }
+  ]
+}
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = GraphConfig.key
diff --git a/src/packages/components/Charts/Mores/Graph/config.vue b/src/packages/components/Charts/Mores/Graph/config.vue
index 07319fde..65e6e38d 100644
--- a/src/packages/components/Charts/Mores/Graph/config.vue
+++ b/src/packages/components/Charts/Mores/Graph/config.vue
@@ -16,14 +16,14 @@
       </SettingItemBox>
       <SettingItemBox name="线条">
         <SettingItem name="弧线">
-        <!-- 需要输入两位的小数才会变化 -->
+          <!-- 需要输入两位的小数才会变化 -->
           <n-input-number
-          v-model:value="optionData.series[0].lineStyle.curveness"
-          :min="0"
-          :step="0.01"
-          placeholder="弯曲程度"
-          size="small"
-        ></n-input-number>
+            v-model:value="optionData.series[0].lineStyle.curveness"
+            :min="0"
+            :step="0.01"
+            placeholder="弯曲程度"
+            size="small"
+          ></n-input-number>
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="图例">
@@ -32,10 +32,61 @@
             size="small"
             :modes="['hex']"
             v-model:value="optionData.legend.textStyle.color"
-        ></n-color-picker>
+          ></n-color-picker>
         </SettingItem>
         <SettingItem name="文本">
-          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          <n-input-number
+            v-model:value="optionData.legend.textStyle.fontSize"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="文字大小"
+          >
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="力引导" v-if="optionData.series[0].force && graphConfig.layout == 'force'">
+        <SettingItem name="斥力因子" v-if="optionData.series[0].force.repulsion">
+          <n-input-number
+            v-model:value="optionData.series[0].force.repulsion"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="斥力因子大小"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="引力因子" v-if="optionData.series[0].force.gravity">
+          <n-input-number
+            v-model:value="optionData.series[0].force.gravity"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="引力因子"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="节点距离">
+          <n-input-number
+            v-model:value="optionData.series[0].force.edgeLength"
+            :min="0"
+            :step="1"
+            size="small"
+            placeholder="节点距离"
+          >
+          </n-input-number>
+        </SettingItem>
+        <SettingItem name="迭代动画">
+          <n-select v-model:value="graphConfig.force.layoutAnimation" :options="LayoutAnimation" size="small" />
+        </SettingItem>
+        <SettingItem name="节点速度">
+          <n-input-number
+            v-model:value="optionData.series[0].force.friction"
+            :min="0"
+            :step="0.1"
+            size="small"
+            placeholder="节点速度"
+          >
           </n-input-number>
         </SettingItem>
       </SettingItemBox>
@@ -46,7 +97,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { option, GraphLayout, LabelSwitch, LabelPosition, LayoutAnimation } from './config'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
@@ -56,7 +107,7 @@ const props = defineProps({
   }
 })
 
-const graphConfig = computed<typeof option.series[0]>(() => {
+const graphConfig = computed<(typeof option.series)[0]>(() => {
   return props.optionData.series[0]
 })
 </script>
diff --git a/src/packages/components/Charts/Mores/Graph/index.vue b/src/packages/components/Charts/Mores/Graph/index.vue
index 40c2b0e1..378c968e 100644
--- a/src/packages/components/Charts/Mores/Graph/index.vue
+++ b/src/packages/components/Charts/Mores/Graph/index.vue
@@ -1,5 +1,12 @@
 <template>
-  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
diff --git a/src/packages/components/Charts/Mores/index.ts b/src/packages/components/Charts/Mores/index.ts
index 84b74f78..a246346b 100644
--- a/src/packages/components/Charts/Mores/index.ts
+++ b/src/packages/components/Charts/Mores/index.ts
@@ -8,4 +8,14 @@ import { DialConfig } from './Dial/index'
 import { SankeyConfig } from './Sankey/index'
 import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
+export default [
+  ProcessConfig,
+  RadarConfig,
+  FunnelConfig,
+  HeatmapConfig,
+  WaterPoloConfig,
+  TreeMapConfig,
+  GraphConfig,
+  SankeyConfig,
+  DialConfig
+]
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 20bc8535..fd551313 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -26,6 +26,16 @@ export let packagesList: PackagesType = {
   [PackagesCategoryEnum.ICONS]: IconList
 }
 
+// 组件缓存, 可以大幅度提升组件加载速度
+const componentCacheMap = new Map<string, any>()
+const loadConfig = (packageName: string, categoryName: string, keyName: string) => {
+  const key = packageName + categoryName + keyName
+  if (!componentCacheMap.has(key)) {
+    componentCacheMap.set(key, import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`))
+  }
+  return componentCacheMap.get(key)
+}
+
 /**
  * * 获取目标组件配置信息
  * @param targetData
@@ -35,10 +45,10 @@ export const createComponent = async (targetData: ConfigType) => {
   // redirectComponent 是给图片组件库和图标组件库使用的
   if (redirectComponent) {
     const [packageName, categoryName, keyName] = redirectComponent.split('/')
-    const redirectChart = await import(`./components/${packageName}/${categoryName}/${keyName}/config.ts`)
+    const redirectChart = await loadConfig(packageName, categoryName, keyName)
     return new redirectChart.default()
   }
-  const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`)
+  const chart = await loadConfig(targetData.package, category, key)
   return new chart.default()
 }
 
@@ -84,7 +94,7 @@ export const fetchImages = async (targetData?: ConfigType) => {
   // 正则判断图片是否为 url，是则直接返回该 url
   if (/^(http|https):\/\/([\w.]+\/?)\S*/.test(targetData.image)) return targetData.image
   // 新数据动态处理
-  const { image, package: targetDataPackage } = targetData
+  const { image } = targetData
   // 兼容旧数据
   if (image.includes('@') || image.includes('base64')) return image
 
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index f82292ff..986ed49d 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -182,20 +182,16 @@ export const useChartEditStore = defineStore({
     },
     getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
       return this.componentList
-    },
-    // 获取需要存储的数据项
+    }
+  },
+  actions: {
+    // * 获取需要存储的数据项
     getStorageInfo(): ChartEditStorage {
       return {
         [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: this.getEditCanvasConfig,
         [ChartEditStoreEnum.COMPONENT_LIST]: this.getComponentList,
         [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: this.getRequestGlobalConfig
       }
-    }
-  },
-  actions: {
-    // * 设置 peojectInfo 数据项
-    setProjectInfo<T extends keyof ProjectInfoType,  K extends ProjectInfoType[T]>(key: T, value: K) {
-      this.projectInfo[key] = value
     },
     // * 设置 editCanvas 数据项
     setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
index f2ae3126..b49bcfc8 100644
--- a/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts
@@ -20,14 +20,14 @@ export const syncData = () => {
     onPositiveCallback: async () => {
       window['$message'].success('正在同步编辑器...')
       dataSyncUpdate && (await dataSyncUpdate())
-      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
+      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo() }))
     }
   })
 }
 
 // 同步数据到预览页
 export const syncDataToPreview = () => {
-  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo }))
+  dispatchEvent(new CustomEvent(SavePageEnum.CHART_TO_PREVIEW, { detail: chartEditStore.getStorageInfo() }))
 }
 
 // 侦听器更新
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index 197a82c5..3f7ada41 100644
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -158,7 +158,7 @@ const editHandle = () => {
 
 // 把内存中的数据同步到SessionStorage 便于传递给新窗口初始化数据
 const updateToSession = (id: string) => {
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {
diff --git a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
index 39e7af13..f465123a 100644
--- a/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
+++ b/src/views/chart/ContentEdit/components/EditTools/utils/index.ts
@@ -1,41 +1,41 @@
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
-const chartEditStore = useChartEditStore()
-
-// 导出
-export const exportHandle = () => {
-  // 取消选中
-  chartEditStore.setTargetSelectChart(undefined)
-
-  // 导出数据
-  downloadTextFile(
-    JSONStringify(chartEditStore.getStorageInfo || []),
-    undefined,
-    'json'
-  )
-
-  // 导出图片
-  const range = document.querySelector('.go-edit-range') as HTMLElement
-  const watermark = document.getElementById('go-edit-watermark')
-  // 隐藏边距线
-  if (!range || !watermark) {
-    window['$message'].error('导出失败！')
-    return
-  }
-
-  // 记录缩放比例
-  const scaleTemp = chartEditStore.getEditCanvas.scale
-  // 百分百展示页面
-  chartEditStore.setScale(1, true)
-  // 展示水印
-  watermark.style.display = 'block'
-
-  setTimeout(() => {
-    canvasCut(range, () => {
-      // 隐藏水印
-      if (watermark) watermark.style.display = 'none'
-      // 还原页面大小
-      chartEditStore.setScale(scaleTemp, true)
-    })
-  }, 600)
-}
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { canvasCut, downloadTextFile, JSONStringify } from '@/utils'
+const chartEditStore = useChartEditStore()
+
+// 导出
+export const exportHandle = () => {
+  // 取消选中
+  chartEditStore.setTargetSelectChart(undefined)
+
+  // 导出数据
+  downloadTextFile(
+    JSONStringify(chartEditStore.getStorageInfo() || []),
+    undefined,
+    'json'
+  )
+
+  // 导出图片
+  const range = document.querySelector('.go-edit-range') as HTMLElement
+  const watermark = document.getElementById('go-edit-watermark')
+  // 隐藏边距线
+  if (!range || !watermark) {
+    window['$message'].error('导出失败！')
+    return
+  }
+
+  // 记录缩放比例
+  const scaleTemp = chartEditStore.getEditCanvas.scale
+  // 百分百展示页面
+  chartEditStore.setScale(1, true)
+  // 展示水印
+  watermark.style.display = 'block'
+
+  setTimeout(() => {
+    canvasCut(range, () => {
+      // 隐藏水印
+      if (watermark) watermark.style.display = 'none'
+      // 还原页面大小
+      chartEditStore.setScale(scaleTemp, true)
+    })
+  }, 600)
+}
diff --git a/src/views/chart/ContentHeader/headerRightBtn/index.vue b/src/views/chart/ContentHeader/headerRightBtn/index.vue
index e22c501d..fea220c4 100644
--- a/src/views/chart/ContentHeader/headerRightBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerRightBtn/index.vue
@@ -94,7 +94,7 @@ const previewHandle = () => {
   const { id } = routerParamsInfo.params
   // id 标识
   const previewId = typeof id === 'string' ? id : id[0]
-  const storageInfo = chartEditStore.getStorageInfo
+  const storageInfo = chartEditStore.getStorageInfo()
   const sessionStorageInfo = getLocalStorage(StorageEnum.GO_CHART_STORAGE_LIST) || []
 
   if (sessionStorageInfo?.length) {
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 6f8bee8f..a11c3049 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -209,9 +209,7 @@ export const useSync = () => {
             chartHistoryStore.clearForwardStack()
           }
         }
-      } else {
-        // 非组件(顺便排除脏数据)
-        if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
+      } else if (key === ChartEditStoreEnum.EDIT_CANVAS_CONFIG || key === ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG) {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 354fa29c..a24e8676 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -6,8 +6,8 @@
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, groupIndex),
-      ...getFilterStyle(item.styles),
-      ...getTransformStyle(item.styles),
+      ...getFilterStyle(groupData.styles),
+      ...getTransformStyle(groupData.styles),
       ...getStatusStyle(item.status),
       ...getPreviewConfigStyle(item.preview),
       ...getBlendModeStyle(item.styles) as any
@@ -19,7 +19,11 @@
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{ ...getSizeStyle(item.attr) }"
+      :style="{
+        ...getSizeStyle(item.attr),
+        ...getFilterStyle(item.styles),
+        ...getTransformStyle(item.styles)
+      }"
       v-on="useLifeHandler(item)"
     ></component>
   </div>
diff --git a/src/views/preview/suspenseIndex.vue b/src/views/preview/suspenseIndex.vue
index bf2c528e..bdb1aa32 100644
--- a/src/views/preview/suspenseIndex.vue
+++ b/src/views/preview/suspenseIndex.vue
@@ -47,6 +47,7 @@ setTitle(`预览-${chartEditStore.editCanvasConfig.projectName}`)
 
 const previewRefStyle = computed(() => {
   return {
+    overflow: 'hidden',
     ...getEditCanvasConfigStyle(chartEditStore.editCanvasConfig),
     ...getFilterStyle(chartEditStore.editCanvasConfig)
   }