diff --git a/src/api/mock/graph.json b/src/api/mock/graph.json
new file mode 100644
index 00000000..48f71dc4
--- /dev/null
+++ b/src/api/mock/graph.json
@@ -0,0 +1,100 @@
+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": "@integer(0, 50)",
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": "@integer(0, 50)",
+        "category": 3
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": "@integer(0, 50)",
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": "@integer(0, 50)",
+        "category": 5
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": "@integer(0, 50)",
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": "@integer(0, 50)",
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": "@integer(0, 50)",
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": "@integer(0, 50)",
+        "category": 0
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "@integer(2, 4)"
+      },
+      {
+        "source": "2",
+        "target": "@integer(3, 4)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 2)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 1)"
+      },
+      {
+        "source": "4",
+        "target": "@integer(0, 3)"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/api/mock/index.ts b/src/api/mock/index.ts
index eea66104..9f639513 100644
--- a/src/api/mock/index.ts
+++ b/src/api/mock/index.ts
@@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
 export const wordCloudUrl = '/mock/wordCloud'
 export const treemapUrl = '/mock/treemap'
 export const threeEarth01Url = '/mock/threeEarth01Data'
+export const sankeyUrl = '/mock/sankey'
+export const graphUrl = '/mock/graphData'
 
 const mockObject: MockMethod[] = [
   {
@@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.threeEarth01Data
   },
+  {
+    url: sankeyUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchSankey
+  },
+  {
+    url: graphUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.graphData
+  },
 ]
 
 export default mockObject
diff --git a/src/api/mock/sankey.json b/src/api/mock/sankey.json
new file mode 100644
index 00000000..269c6b39
--- /dev/null
+++ b/src/api/mock/sankey.json
@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": "@integer(0, 10)"
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}
diff --git a/src/api/mock/test.mock.ts b/src/api/mock/test.mock.ts
index 9db8cc78..f5c56004 100644
--- a/src/api/mock/test.mock.ts
+++ b/src/api/mock/test.mock.ts
@@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
 import mapJson from './map.json'
 import tTreemapJson from './treemap.json'
+import sankeyJson from './sankey.json'
+import graphDataJson from './graph.json'
 
 export default {
   // 单图表
@@ -219,5 +221,19 @@ export default {
         'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
       }
     ]
-  }
+  },
+  // 桑基图
+  fetchSankey: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: sankeyJson
+  },
+  // 关系图
+  graphData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: graphDataJson
+  },
 }
diff --git a/src/assets/images/chart/charts/graph.png b/src/assets/images/chart/charts/graph.png
new file mode 100644
index 00000000..6dbbf039
Binary files /dev/null and b/src/assets/images/chart/charts/graph.png differ
diff --git a/src/assets/images/chart/charts/sankey.png b/src/assets/images/chart/charts/sankey.png
new file mode 100644
index 00000000..1ab374e9
Binary files /dev/null and b/src/assets/images/chart/charts/sankey.png differ
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index 6c8bcd2d..b83b9524 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -27,6 +27,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -62,7 +63,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index 683d777b..8f85f5f2 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -26,6 +26,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
+import cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -61,7 +62,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr
diff --git a/src/packages/components/Charts/Mores/Graph/config.ts b/src/packages/components/Charts/Mores/Graph/config.ts
new file mode 100644
index 00000000..0dfb0dc8
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Graph/config.ts
@@ -0,0 +1,71 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GraphConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+// 关系图布局
+export const GraphLayout = [
+  { label: '无', value: 'none' },
+  { label: '环形', value: 'circular' }
+]
+
+// 标签开关
+export const LabelSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+// 标签位置
+export const LabelPosition = [
+  { label: '左侧', value: 'left' },
+  { label: '右侧', value: 'right' },
+  { label: '顶部', value: 'top' },
+  { label: '底部', value: 'bottom' },
+  { label: '内部', value: 'inside' },
+]
+
+export const option = {
+    dataset: { ...dataJson },
+    tooltip: {},
+    legend:{
+      show:true,
+      textStyle:{
+        color:"#eee",
+        fontSize: 14 ,
+      },
+      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 // 线条卷曲程度
+        }
+      }
+    ]
+  };
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GraphConfig.key
+  public chartConfig = cloneDeep(GraphConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/Mores/Graph/config.vue b/src/packages/components/Charts/Mores/Graph/config.vue
new file mode 100644
index 00000000..07319fde
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Graph/config.vue
@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <CollapseItem name="关系图" :expanded="true">
+      <SettingItemBox name="样式">
+        <setting-item name="布局">
+          <n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="标签">
+        <setting-item name="展示">
+          <n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
+        </setting-item>
+      </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>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="图例">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.legend.textStyle.color"
+        ></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>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<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 { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const graphConfig = computed<typeof option.series[0]>(() => {
+  return props.optionData.series[0]
+})
+</script>
diff --git a/src/packages/components/Charts/Mores/Graph/data.json b/src/packages/components/Charts/Mores/Graph/data.json
new file mode 100644
index 00000000..4d8470ac
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Graph/data.json
@@ -0,0 +1,1744 @@
+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": 19.12381,
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": 28.685715,
+        "category": 0
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": 2.6666666666666665,
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": 6.323809333333333,
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": 6.323809333333333,
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": 2.6666666666666665,
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "5",
+        "name": "Geborand",
+        "symbolSize": 2.6666666666666665,
+        "x": -417.26337,
+        "y": 406.03506,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "6",
+        "name": "Champtercier",
+        "symbolSize": 2.6666666666666665,
+        "x": -332.6012,
+        "y": 485.16974,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "7",
+        "name": "Cravatte",
+        "symbolSize": 2.6666666666666665,
+        "x": -382.69568,
+        "y": 475.09113,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "8",
+        "name": "Count",
+        "symbolSize": 2.6666666666666665,
+        "x": -320.384,
+        "y": 387.17325,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "9",
+        "name": "OldMan",
+        "symbolSize": 2.6666666666666665,
+        "x": -344.39832,
+        "y": 451.16772,
+        "value": 4,
+        "category": 0
+      },
+      {
+        "id": "10",
+        "name": "Labarre",
+        "symbolSize": 2.6666666666666665,
+        "x": -89.34107,
+        "y": 234.56128,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "11",
+        "name": "Valjean",
+        "symbolSize": 66.66666666666667,
+        "x": -87.93029,
+        "y": -6.8120565,
+        "value": 100,
+        "category": 1
+      },
+      {
+        "id": "12",
+        "name": "Marguerite",
+        "symbolSize": 4.495239333333333,
+        "x": -339.77908,
+        "y": -184.69139,
+        "value": 6.742859,
+        "category": 1
+      },
+      {
+        "id": "13",
+        "name": "MmeDeR",
+        "symbolSize": 2.6666666666666665,
+        "x": -194.31313,
+        "y": 178.55301,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "14",
+        "name": "Isabeau",
+        "symbolSize": 2.6666666666666665,
+        "x": -158.05168,
+        "y": 201.99768,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "15",
+        "name": "Gervais",
+        "symbolSize": 2.6666666666666665,
+        "x": -127.701546,
+        "y": 242.55057,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "16",
+        "name": "Tholomyes",
+        "symbolSize": 17.295237333333333,
+        "x": -385.2226,
+        "y": -393.5572,
+        "value": 25.942856,
+        "category": 2
+      },
+      {
+        "id": "17",
+        "name": "Listolier",
+        "symbolSize": 13.638097333333334,
+        "x": -516.55884,
+        "y": -393.98975,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "18",
+        "name": "Fameuil",
+        "symbolSize": 13.638097333333334,
+        "x": -464.79382,
+        "y": -493.57944,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "19",
+        "name": "Blacheville",
+        "symbolSize": 13.638097333333334,
+        "x": -515.1624,
+        "y": -456.9891,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "20",
+        "name": "Favourite",
+        "symbolSize": 13.638097333333334,
+        "x": -408.12122,
+        "y": -464.5048,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "21",
+        "name": "Dahlia",
+        "symbolSize": 13.638097333333334,
+        "x": -456.44113,
+        "y": -425.13303,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "22",
+        "name": "Zephine",
+        "symbolSize": 13.638097333333334,
+        "x": -459.1107,
+        "y": -362.5133,
+        "value": 20.457146,
+        "category": 2
+      },
+      {
+        "id": "23",
+        "name": "Fantine",
+        "symbolSize": 28.266666666666666,
+        "x": -313.42786,
+        "y": -289.44803,
+        "value": 42.4,
+        "category": 2
+      },
+      {
+        "id": "24",
+        "name": "MmeThenardier",
+        "symbolSize": 20.95238266666667,
+        "x": 4.6313396,
+        "y": -273.8517,
+        "value": 31.428574,
+        "category": 7
+      },
+      {
+        "id": "25",
+        "name": "Thenardier",
+        "symbolSize": 30.095235333333335,
+        "x": 82.80825,
+        "y": -203.1144,
+        "value": 45.142853,
+        "category": 7
+      },
+      {
+        "id": "26",
+        "name": "Cosette",
+        "symbolSize": 20.95238266666667,
+        "x": 78.64646,
+        "y": -31.512747,
+        "value": 31.428574,
+        "category": 6
+      },
+      {
+        "id": "27",
+        "name": "Javert",
+        "symbolSize": 31.923806666666668,
+        "x": -81.46074,
+        "y": -204.20204,
+        "value": 47.88571,
+        "category": 7
+      },
+      {
+        "id": "28",
+        "name": "Fauchelevent",
+        "symbolSize": 8.152382000000001,
+        "x": -225.73984,
+        "y": 82.41631,
+        "value": 12.228573,
+        "category": 4
+      },
+      {
+        "id": "29",
+        "name": "Bamatabois",
+        "symbolSize": 15.466666666666667,
+        "x": -385.6842,
+        "y": -20.206686,
+        "value": 23.2,
+        "category": 3
+      },
+      {
+        "id": "30",
+        "name": "Perpetue",
+        "symbolSize": 4.495239333333333,
+        "x": -403.92447,
+        "y": -197.69823,
+        "value": 6.742859,
+        "category": 2
+      },
+      {
+        "id": "31",
+        "name": "Simplice",
+        "symbolSize": 8.152382000000001,
+        "x": -281.4253,
+        "y": -158.45137,
+        "value": 12.228573,
+        "category": 2
+      },
+      {
+        "id": "32",
+        "name": "Scaufflaire",
+        "symbolSize": 2.6666666666666665,
+        "x": -122.41348,
+        "y": 210.37503,
+        "value": 4,
+        "category": 1
+      },
+      {
+        "id": "33",
+        "name": "Woman1",
+        "symbolSize": 4.495239333333333,
+        "x": -234.6001,
+        "y": -113.15067,
+        "value": 6.742859,
+        "category": 1
+      },
+      {
+        "id": "34",
+        "name": "Judge",
+        "symbolSize": 11.809524666666666,
+        "x": -387.84915,
+        "y": 58.7059,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "35",
+        "name": "Champmathieu",
+        "symbolSize": 11.809524666666666,
+        "x": -338.2307,
+        "y": 87.48405,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "36",
+        "name": "Brevet",
+        "symbolSize": 11.809524666666666,
+        "x": -453.26874,
+        "y": 58.94648,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "37",
+        "name": "Chenildieu",
+        "symbolSize": 11.809524666666666,
+        "x": -386.44904,
+        "y": 140.05937,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "38",
+        "name": "Cochepaille",
+        "symbolSize": 11.809524666666666,
+        "x": -446.7876,
+        "y": 123.38005,
+        "value": 17.714287,
+        "category": 3
+      },
+      {
+        "id": "39",
+        "name": "Pontmercy",
+        "symbolSize": 6.323809333333333,
+        "x": 336.49738,
+        "y": -269.55914,
+        "value": 9.485714,
+        "category": 6
+      },
+      {
+        "id": "40",
+        "name": "Boulatruelle",
+        "symbolSize": 2.6666666666666665,
+        "x": 29.187843,
+        "y": -460.13132,
+        "value": 4,
+        "category": 7
+      },
+      {
+        "id": "41",
+        "name": "Eponine",
+        "symbolSize": 20.95238266666667,
+        "x": 238.36697,
+        "y": -210.00926,
+        "value": 31.428574,
+        "category": 7
+      },
+      {
+        "id": "42",
+        "name": "Anzelma",
+        "symbolSize": 6.323809333333333,
+        "x": 189.69513,
+        "y": -346.50662,
+        "value": 9.485714,
+        "category": 7
+      },
+      {
+        "id": "43",
+        "name": "Woman2",
+        "symbolSize": 6.323809333333333,
+        "x": -187.00418,
+        "y": -145.02663,
+        "value": 9.485714,
+        "category": 6
+      },
+      {
+        "id": "44",
+        "name": "MotherInnocent",
+        "symbolSize": 4.495239333333333,
+        "x": -252.99521,
+        "y": 129.87549,
+        "value": 6.742859,
+        "category": 4
+      },
+      {
+        "id": "45",
+        "name": "Gribier",
+        "symbolSize": 2.6666666666666665,
+        "x": -296.07935,
+        "y": 163.11964,
+        "value": 4,
+        "category": 4
+      },
+      {
+        "id": "46",
+        "name": "Jondrette",
+        "symbolSize": 2.6666666666666665,
+        "x": 550.3201,
+        "y": 522.4031,
+        "value": 4,
+        "category": 5
+      },
+      {
+        "id": "47",
+        "name": "MmeBurgon",
+        "symbolSize": 4.495239333333333,
+        "x": 488.13535,
+        "y": 356.8573,
+        "value": 6.742859,
+        "category": 5
+      },
+      {
+        "id": "48",
+        "name": "Gavroche",
+        "symbolSize": 41.06667066666667,
+        "x": 387.89572,
+        "y": 110.462326,
+        "value": 61.600006,
+        "category": 8
+      },
+      {
+        "id": "49",
+        "name": "Gillenormand",
+        "symbolSize": 13.638097333333334,
+        "x": 126.4831,
+        "y": 68.10622,
+        "value": 20.457146,
+        "category": 6
+      },
+      {
+        "id": "50",
+        "name": "Magnon",
+        "symbolSize": 4.495239333333333,
+        "x": 127.07365,
+        "y": -113.05923,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "51",
+        "name": "MlleGillenormand",
+        "symbolSize": 13.638097333333334,
+        "x": 162.63559,
+        "y": 117.6565,
+        "value": 20.457146,
+        "category": 6
+      },
+      {
+        "id": "52",
+        "name": "MmePontmercy",
+        "symbolSize": 4.495239333333333,
+        "x": 353.66415,
+        "y": -205.89165,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "53",
+        "name": "MlleVaubois",
+        "symbolSize": 2.6666666666666665,
+        "x": 165.43939,
+        "y": 339.7736,
+        "value": 4,
+        "category": 6
+      },
+      {
+        "id": "54",
+        "name": "LtGillenormand",
+        "symbolSize": 8.152382000000001,
+        "x": 137.69348,
+        "y": 196.1069,
+        "value": 12.228573,
+        "category": 6
+      },
+      {
+        "id": "55",
+        "name": "Marius",
+        "symbolSize": 35.58095333333333,
+        "x": 206.44687,
+        "y": -13.805411,
+        "value": 53.37143,
+        "category": 6
+      },
+      {
+        "id": "56",
+        "name": "BaronessT",
+        "symbolSize": 4.495239333333333,
+        "x": 194.82993,
+        "y": 224.78036,
+        "value": 6.742859,
+        "category": 6
+      },
+      {
+        "id": "57",
+        "name": "Mabeuf",
+        "symbolSize": 20.95238266666667,
+        "x": 597.6618,
+        "y": 135.18481,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "58",
+        "name": "Enjolras",
+        "symbolSize": 28.266666666666666,
+        "x": 355.78366,
+        "y": -74.882454,
+        "value": 42.4,
+        "category": 8
+      },
+      {
+        "id": "59",
+        "name": "Combeferre",
+        "symbolSize": 20.95238266666667,
+        "x": 515.2961,
+        "y": -46.167564,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "60",
+        "name": "Prouvaire",
+        "symbolSize": 17.295237333333333,
+        "x": 614.29285,
+        "y": -69.3104,
+        "value": 25.942856,
+        "category": 8
+      },
+      {
+        "id": "61",
+        "name": "Feuilly",
+        "symbolSize": 20.95238266666667,
+        "x": 550.1917,
+        "y": -128.17537,
+        "value": 31.428574,
+        "category": 8
+      },
+      {
+        "id": "62",
+        "name": "Courfeyrac",
+        "symbolSize": 24.609526666666667,
+        "x": 436.17184,
+        "y": -12.7286825,
+        "value": 36.91429,
+        "category": 8
+      },
+      {
+        "id": "63",
+        "name": "Bahorel",
+        "symbolSize": 22.780953333333333,
+        "x": 602.55225,
+        "y": 16.421427,
+        "value": 34.17143,
+        "category": 8
+      },
+      {
+        "id": "64",
+        "name": "Bossuet",
+        "symbolSize": 24.609526666666667,
+        "x": 455.81955,
+        "y": -115.45826,
+        "value": 36.91429,
+        "category": 8
+      },
+      {
+        "id": "65",
+        "name": "Joly",
+        "symbolSize": 22.780953333333333,
+        "x": 516.40784,
+        "y": 47.242233,
+        "value": 34.17143,
+        "category": 8
+      },
+      {
+        "id": "66",
+        "name": "Grantaire",
+        "symbolSize": 19.12381,
+        "x": 646.4313,
+        "y": -151.06331,
+        "value": 28.685715,
+        "category": 8
+      },
+      {
+        "id": "67",
+        "name": "MotherPlutarch",
+        "symbolSize": 2.6666666666666665,
+        "x": 668.9568,
+        "y": 204.65488,
+        "value": 4,
+        "category": 8
+      },
+      {
+        "id": "68",
+        "name": "Gueulemer",
+        "symbolSize": 19.12381,
+        "x": 78.4799,
+        "y": -347.15146,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "69",
+        "name": "Babet",
+        "symbolSize": 19.12381,
+        "x": 150.35959,
+        "y": -298.50797,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "70",
+        "name": "Claquesous",
+        "symbolSize": 19.12381,
+        "x": 137.3717,
+        "y": -410.2809,
+        "value": 28.685715,
+        "category": 7
+      },
+      {
+        "id": "71",
+        "name": "Montparnasse",
+        "symbolSize": 17.295237333333333,
+        "x": 234.87747,
+        "y": -400.85983,
+        "value": 25.942856,
+        "category": 7
+      },
+      {
+        "id": "72",
+        "name": "Toussaint",
+        "symbolSize": 6.323809333333333,
+        "x": 40.942253,
+        "y": 113.78272,
+        "value": 9.485714,
+        "category": 1
+      },
+      {
+        "id": "73",
+        "name": "Child1",
+        "symbolSize": 4.495239333333333,
+        "x": 437.939,
+        "y": 291.58234,
+        "value": 6.742859,
+        "category": 8
+      },
+      {
+        "id": "74",
+        "name": "Child2",
+        "symbolSize": 4.495239333333333,
+        "x": 466.04922,
+        "y": 283.3606,
+        "value": 6.742859,
+        "category": 8
+      },
+      {
+        "id": "75",
+        "name": "Brujon",
+        "symbolSize": 13.638097333333334,
+        "x": 238.79364,
+        "y": -314.06345,
+        "value": 20.457146,
+        "category": 7
+      },
+      {
+        "id": "76",
+        "name": "MmeHucheloup",
+        "symbolSize": 13.638097333333334,
+        "x": 712.18353,
+        "y": 4.8131495,
+        "value": 20.457146,
+        "category": 8
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "0"
+      },
+      {
+        "source": "2",
+        "target": "0"
+      },
+      {
+        "source": "3",
+        "target": "0"
+      },
+      {
+        "source": "3",
+        "target": "2"
+      },
+      {
+        "source": "4",
+        "target": "0"
+      },
+      {
+        "source": "5",
+        "target": "0"
+      },
+      {
+        "source": "6",
+        "target": "0"
+      },
+      {
+        "source": "7",
+        "target": "0"
+      },
+      {
+        "source": "8",
+        "target": "0"
+      },
+      {
+        "source": "9",
+        "target": "0"
+      },
+      {
+        "source": "11",
+        "target": "0"
+      },
+      {
+        "source": "11",
+        "target": "2"
+      },
+      {
+        "source": "11",
+        "target": "3"
+      },
+      {
+        "source": "11",
+        "target": "10"
+      },
+      {
+        "source": "12",
+        "target": "11"
+      },
+      {
+        "source": "13",
+        "target": "11"
+      },
+      {
+        "source": "14",
+        "target": "11"
+      },
+      {
+        "source": "15",
+        "target": "11"
+      },
+      {
+        "source": "17",
+        "target": "16"
+      },
+      {
+        "source": "18",
+        "target": "16"
+      },
+      {
+        "source": "18",
+        "target": "17"
+      },
+      {
+        "source": "19",
+        "target": "16"
+      },
+      {
+        "source": "19",
+        "target": "17"
+      },
+      {
+        "source": "19",
+        "target": "18"
+      },
+      {
+        "source": "20",
+        "target": "16"
+      },
+      {
+        "source": "20",
+        "target": "17"
+      },
+      {
+        "source": "20",
+        "target": "18"
+      },
+      {
+        "source": "20",
+        "target": "19"
+      },
+      {
+        "source": "21",
+        "target": "16"
+      },
+      {
+        "source": "21",
+        "target": "17"
+      },
+      {
+        "source": "21",
+        "target": "18"
+      },
+      {
+        "source": "21",
+        "target": "19"
+      },
+      {
+        "source": "21",
+        "target": "20"
+      },
+      {
+        "source": "22",
+        "target": "16"
+      },
+      {
+        "source": "22",
+        "target": "17"
+      },
+      {
+        "source": "22",
+        "target": "18"
+      },
+      {
+        "source": "22",
+        "target": "19"
+      },
+      {
+        "source": "22",
+        "target": "20"
+      },
+      {
+        "source": "22",
+        "target": "21"
+      },
+      {
+        "source": "23",
+        "target": "11"
+      },
+      {
+        "source": "23",
+        "target": "12"
+      },
+      {
+        "source": "23",
+        "target": "16"
+      },
+      {
+        "source": "23",
+        "target": "17"
+      },
+      {
+        "source": "23",
+        "target": "18"
+      },
+      {
+        "source": "23",
+        "target": "19"
+      },
+      {
+        "source": "23",
+        "target": "20"
+      },
+      {
+        "source": "23",
+        "target": "21"
+      },
+      {
+        "source": "23",
+        "target": "22"
+      },
+      {
+        "source": "24",
+        "target": "11"
+      },
+      {
+        "source": "24",
+        "target": "23"
+      },
+      {
+        "source": "25",
+        "target": "11"
+      },
+      {
+        "source": "25",
+        "target": "23"
+      },
+      {
+        "source": "25",
+        "target": "24"
+      },
+      {
+        "source": "26",
+        "target": "11"
+      },
+      {
+        "source": "26",
+        "target": "16"
+      },
+      {
+        "source": "26",
+        "target": "24"
+      },
+      {
+        "source": "26",
+        "target": "25"
+      },
+      {
+        "source": "27",
+        "target": "11"
+      },
+      {
+        "source": "27",
+        "target": "23"
+      },
+      {
+        "source": "27",
+        "target": "24"
+      },
+      {
+        "source": "27",
+        "target": "25"
+      },
+      {
+        "source": "27",
+        "target": "26"
+      },
+      {
+        "source": "28",
+        "target": "11"
+      },
+      {
+        "source": "28",
+        "target": "27"
+      },
+      {
+        "source": "29",
+        "target": "11"
+      },
+      {
+        "source": "29",
+        "target": "23"
+      },
+      {
+        "source": "29",
+        "target": "27"
+      },
+      {
+        "source": "30",
+        "target": "23"
+      },
+      {
+        "source": "31",
+        "target": "11"
+      },
+      {
+        "source": "31",
+        "target": "23"
+      },
+      {
+        "source": "31",
+        "target": "27"
+      },
+      {
+        "source": "31",
+        "target": "30"
+      },
+      {
+        "source": "32",
+        "target": "11"
+      },
+      {
+        "source": "33",
+        "target": "11"
+      },
+      {
+        "source": "33",
+        "target": "27"
+      },
+      {
+        "source": "34",
+        "target": "11"
+      },
+      {
+        "source": "34",
+        "target": "29"
+      },
+      {
+        "source": "35",
+        "target": "11"
+      },
+      {
+        "source": "35",
+        "target": "29"
+      },
+      {
+        "source": "35",
+        "target": "34"
+      },
+      {
+        "source": "36",
+        "target": "11"
+      },
+      {
+        "source": "36",
+        "target": "29"
+      },
+      {
+        "source": "36",
+        "target": "34"
+      },
+      {
+        "source": "36",
+        "target": "35"
+      },
+      {
+        "source": "37",
+        "target": "11"
+      },
+      {
+        "source": "37",
+        "target": "29"
+      },
+      {
+        "source": "37",
+        "target": "34"
+      },
+      {
+        "source": "37",
+        "target": "35"
+      },
+      {
+        "source": "37",
+        "target": "36"
+      },
+      {
+        "source": "38",
+        "target": "11"
+      },
+      {
+        "source": "38",
+        "target": "29"
+      },
+      {
+        "source": "38",
+        "target": "34"
+      },
+      {
+        "source": "38",
+        "target": "35"
+      },
+      {
+        "source": "38",
+        "target": "36"
+      },
+      {
+        "source": "38",
+        "target": "37"
+      },
+      {
+        "source": "39",
+        "target": "25"
+      },
+      {
+        "source": "40",
+        "target": "25"
+      },
+      {
+        "source": "41",
+        "target": "24"
+      },
+      {
+        "source": "41",
+        "target": "25"
+      },
+      {
+        "source": "42",
+        "target": "24"
+      },
+      {
+        "source": "42",
+        "target": "25"
+      },
+      {
+        "source": "42",
+        "target": "41"
+      },
+      {
+        "source": "43",
+        "target": "11"
+      },
+      {
+        "source": "43",
+        "target": "26"
+      },
+      {
+        "source": "43",
+        "target": "27"
+      },
+      {
+        "source": "44",
+        "target": "11"
+      },
+      {
+        "source": "44",
+        "target": "28"
+      },
+      {
+        "source": "45",
+        "target": "28"
+      },
+      {
+        "source": "47",
+        "target": "46"
+      },
+      {
+        "source": "48",
+        "target": "11"
+      },
+      {
+        "source": "48",
+        "target": "25"
+      },
+      {
+        "source": "48",
+        "target": "27"
+      },
+      {
+        "source": "48",
+        "target": "47"
+      },
+      {
+        "source": "49",
+        "target": "11"
+      },
+      {
+        "source": "49",
+        "target": "26"
+      },
+      {
+        "source": "50",
+        "target": "24"
+      },
+      {
+        "source": "50",
+        "target": "49"
+      },
+      {
+        "source": "51",
+        "target": "11"
+      },
+      {
+        "source": "51",
+        "target": "26"
+      },
+      {
+        "source": "51",
+        "target": "49"
+      },
+      {
+        "source": "52",
+        "target": "39"
+      },
+      {
+        "source": "52",
+        "target": "51"
+      },
+      {
+        "source": "53",
+        "target": "51"
+      },
+      {
+        "source": "54",
+        "target": "26"
+      },
+      {
+        "source": "54",
+        "target": "49"
+      },
+      {
+        "source": "54",
+        "target": "51"
+      },
+      {
+        "source": "55",
+        "target": "11"
+      },
+      {
+        "source": "55",
+        "target": "16"
+      },
+      {
+        "source": "55",
+        "target": "25"
+      },
+      {
+        "source": "55",
+        "target": "26"
+      },
+      {
+        "source": "55",
+        "target": "39"
+      },
+      {
+        "source": "55",
+        "target": "41"
+      },
+      {
+        "source": "55",
+        "target": "48"
+      },
+      {
+        "source": "55",
+        "target": "49"
+      },
+      {
+        "source": "55",
+        "target": "51"
+      },
+      {
+        "source": "55",
+        "target": "54"
+      },
+      {
+        "source": "56",
+        "target": "49"
+      },
+      {
+        "source": "56",
+        "target": "55"
+      },
+      {
+        "source": "57",
+        "target": "41"
+      },
+      {
+        "source": "57",
+        "target": "48"
+      },
+      {
+        "source": "57",
+        "target": "55"
+      },
+      {
+        "source": "58",
+        "target": "11"
+      },
+      {
+        "source": "58",
+        "target": "27"
+      },
+      {
+        "source": "58",
+        "target": "48"
+      },
+      {
+        "source": "58",
+        "target": "55"
+      },
+      {
+        "source": "58",
+        "target": "57"
+      },
+      {
+        "source": "59",
+        "target": "48"
+      },
+      {
+        "source": "59",
+        "target": "55"
+      },
+      {
+        "source": "59",
+        "target": "57"
+      },
+      {
+        "source": "59",
+        "target": "58"
+      },
+      {
+        "source": "60",
+        "target": "48"
+      },
+      {
+        "source": "60",
+        "target": "58"
+      },
+      {
+        "source": "60",
+        "target": "59"
+      },
+      {
+        "source": "61",
+        "target": "48"
+      },
+      {
+        "source": "61",
+        "target": "55"
+      },
+      {
+        "source": "61",
+        "target": "57"
+      },
+      {
+        "source": "61",
+        "target": "58"
+      },
+      {
+        "source": "61",
+        "target": "59"
+      },
+      {
+        "source": "61",
+        "target": "60"
+      },
+      {
+        "source": "62",
+        "target": "41"
+      },
+      {
+        "source": "62",
+        "target": "48"
+      },
+      {
+        "source": "62",
+        "target": "55"
+      },
+      {
+        "source": "62",
+        "target": "57"
+      },
+      {
+        "source": "62",
+        "target": "58"
+      },
+      {
+        "source": "62",
+        "target": "59"
+      },
+      {
+        "source": "62",
+        "target": "60"
+      },
+      {
+        "source": "62",
+        "target": "61"
+      },
+      {
+        "source": "63",
+        "target": "48"
+      },
+      {
+        "source": "63",
+        "target": "55"
+      },
+      {
+        "source": "63",
+        "target": "57"
+      },
+      {
+        "source": "63",
+        "target": "58"
+      },
+      {
+        "source": "63",
+        "target": "59"
+      },
+      {
+        "source": "63",
+        "target": "60"
+      },
+      {
+        "source": "63",
+        "target": "61"
+      },
+      {
+        "source": "63",
+        "target": "62"
+      },
+      {
+        "source": "64",
+        "target": "11"
+      },
+      {
+        "source": "64",
+        "target": "48"
+      },
+      {
+        "source": "64",
+        "target": "55"
+      },
+      {
+        "source": "64",
+        "target": "57"
+      },
+      {
+        "source": "64",
+        "target": "58"
+      },
+      {
+        "source": "64",
+        "target": "59"
+      },
+      {
+        "source": "64",
+        "target": "60"
+      },
+      {
+        "source": "64",
+        "target": "61"
+      },
+      {
+        "source": "64",
+        "target": "62"
+      },
+      {
+        "source": "64",
+        "target": "63"
+      },
+      {
+        "source": "65",
+        "target": "48"
+      },
+      {
+        "source": "65",
+        "target": "55"
+      },
+      {
+        "source": "65",
+        "target": "57"
+      },
+      {
+        "source": "65",
+        "target": "58"
+      },
+      {
+        "source": "65",
+        "target": "59"
+      },
+      {
+        "source": "65",
+        "target": "60"
+      },
+      {
+        "source": "65",
+        "target": "61"
+      },
+      {
+        "source": "65",
+        "target": "62"
+      },
+      {
+        "source": "65",
+        "target": "63"
+      },
+      {
+        "source": "65",
+        "target": "64"
+      },
+      {
+        "source": "66",
+        "target": "48"
+      },
+      {
+        "source": "66",
+        "target": "58"
+      },
+      {
+        "source": "66",
+        "target": "59"
+      },
+      {
+        "source": "66",
+        "target": "60"
+      },
+      {
+        "source": "66",
+        "target": "61"
+      },
+      {
+        "source": "66",
+        "target": "62"
+      },
+      {
+        "source": "66",
+        "target": "63"
+      },
+      {
+        "source": "66",
+        "target": "64"
+      },
+      {
+        "source": "66",
+        "target": "65"
+      },
+      {
+        "source": "67",
+        "target": "57"
+      },
+      {
+        "source": "68",
+        "target": "11"
+      },
+      {
+        "source": "68",
+        "target": "24"
+      },
+      {
+        "source": "68",
+        "target": "25"
+      },
+      {
+        "source": "68",
+        "target": "27"
+      },
+      {
+        "source": "68",
+        "target": "41"
+      },
+      {
+        "source": "68",
+        "target": "48"
+      },
+      {
+        "source": "69",
+        "target": "11"
+      },
+      {
+        "source": "69",
+        "target": "24"
+      },
+      {
+        "source": "69",
+        "target": "25"
+      },
+      {
+        "source": "69",
+        "target": "27"
+      },
+      {
+        "source": "69",
+        "target": "41"
+      },
+      {
+        "source": "69",
+        "target": "48"
+      },
+      {
+        "source": "69",
+        "target": "68"
+      },
+      {
+        "source": "70",
+        "target": "11"
+      },
+      {
+        "source": "70",
+        "target": "24"
+      },
+      {
+        "source": "70",
+        "target": "25"
+      },
+      {
+        "source": "70",
+        "target": "27"
+      },
+      {
+        "source": "70",
+        "target": "41"
+      },
+      {
+        "source": "70",
+        "target": "58"
+      },
+      {
+        "source": "70",
+        "target": "68"
+      },
+      {
+        "source": "70",
+        "target": "69"
+      },
+      {
+        "source": "71",
+        "target": "11"
+      },
+      {
+        "source": "71",
+        "target": "25"
+      },
+      {
+        "source": "71",
+        "target": "27"
+      },
+      {
+        "source": "71",
+        "target": "41"
+      },
+      {
+        "source": "71",
+        "target": "48"
+      },
+      {
+        "source": "71",
+        "target": "68"
+      },
+      {
+        "source": "71",
+        "target": "69"
+      },
+      {
+        "source": "71",
+        "target": "70"
+      },
+      {
+        "source": "72",
+        "target": "11"
+      },
+      {
+        "source": "72",
+        "target": "26"
+      },
+      {
+        "source": "72",
+        "target": "27"
+      },
+      {
+        "source": "73",
+        "target": "48"
+      },
+      {
+        "source": "74",
+        "target": "48"
+      },
+      {
+        "source": "74",
+        "target": "73"
+      },
+      {
+        "source": "75",
+        "target": "25"
+      },
+      {
+        "source": "75",
+        "target": "41"
+      },
+      {
+        "source": "75",
+        "target": "48"
+      },
+      {
+        "source": "75",
+        "target": "68"
+      },
+      {
+        "source": "75",
+        "target": "69"
+      },
+      {
+        "source": "75",
+        "target": "70"
+      },
+      {
+        "source": "75",
+        "target": "71"
+      },
+      {
+        "source": "76",
+        "target": "48"
+      },
+      {
+        "source": "76",
+        "target": "58"
+      },
+      {
+        "source": "76",
+        "target": "62"
+      },
+      {
+        "source": "76",
+        "target": "63"
+      },
+      {
+        "source": "76",
+        "target": "64"
+      },
+      {
+        "source": "76",
+        "target": "65"
+      },
+      {
+        "source": "76",
+        "target": "66"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/packages/components/Charts/Mores/Graph/index.ts b/src/packages/components/Charts/Mores/Graph/index.ts
new file mode 100644
index 00000000..832a24bc
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Graph/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GraphConfig: ConfigType = {
+  key: 'Graph',
+  chartKey: 'VGraph',
+  conKey: 'VCGraph',
+  title: '关系图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'graph.png'
+}
diff --git a/src/packages/components/Charts/Mores/Graph/index.vue b/src/packages/components/Charts/Mores/Graph/index.vue
new file mode 100644
index 00000000..40c2b0e1
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Graph/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset.nodes) {
+    props.chartConfig.option.series[0].data = dataset.nodes
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series[0].links = dataset.links
+  }
+  if (dataset.categories) {
+    props.chartConfig.option.series[0].categories = dataset.categories
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>
diff --git a/src/packages/components/Charts/Mores/Sankey/config.ts b/src/packages/components/Charts/Mores/Sankey/config.ts
new file mode 100644
index 00000000..cab0ff7d
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Sankey/config.ts
@@ -0,0 +1,43 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { SankeyConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 图表方向
+export const orientList = [
+  { label: '水平', value: 'horizontal' },
+  { label: '垂直', value: 'vertical' }
+]
+
+// 标签展示
+export const toolTipSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+export const option = {
+  dataset: { ...dataJson },
+  tooltip: {
+    show: 1,
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  series: {
+    type: 'sankey',
+    layout: 'none',
+    orient:'horizontal',
+    data: dataJson.label,
+    links: dataJson.links,
+    levels: dataJson.levels
+  }
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SankeyConfig.key
+  public chartConfig = cloneDeep(SankeyConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}
diff --git a/src/packages/components/Charts/Mores/Sankey/config.vue b/src/packages/components/Charts/Mores/Sankey/config.vue
new file mode 100644
index 00000000..fcb23e7e
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Sankey/config.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <CollapseItem name="桑基图" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="方向">
+          <n-select
+            v-model:value="sankeyConfig.orient"
+            size="small"
+            :options="orientList"
+            placeholder="选择方向"
+          />
+        </SettingItem>
+        <SettingItem name="提示标签">
+          <n-select
+            v-model:value="optionData.tooltip.show"
+            size="small"
+            :options="toolTipSwitch"
+            placeholder="是否开启"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, orientList, toolTipSwitch } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const sankeyConfig = computed<typeof option.series>(() => {
+  return props.optionData.series
+})
+
+</script>
diff --git a/src/packages/components/Charts/Mores/Sankey/data.json b/src/packages/components/Charts/Mores/Sankey/data.json
new file mode 100644
index 00000000..e1f81b79
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Sankey/data.json
@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": 5
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": 3
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": 8
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": 3
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": 1
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": 2
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}
diff --git a/src/packages/components/Charts/Mores/Sankey/index.ts b/src/packages/components/Charts/Mores/Sankey/index.ts
new file mode 100644
index 00000000..71992944
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Sankey/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const SankeyConfig: ConfigType = {
+  key: 'Sankey',
+  chartKey: 'VSankey',
+  conKey: 'VCSankey',
+  title: '桑基图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'sankey.png'
+}
diff --git a/src/packages/components/Charts/Mores/Sankey/index.vue b/src/packages/components/Charts/Mores/Sankey/index.vue
new file mode 100644
index 00000000..a8cdb09b
--- /dev/null
+++ b/src/packages/components/Charts/Mores/Sankey/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataHandle = (dataset: typeof dataJson) => {
+  if (dataset.label) {
+    props.chartConfig.option.series.data = dataset.label
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series.links = dataset.links
+  }
+  if (dataset.levels) {
+    props.chartConfig.option.series.levels = dataset.levels
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataHandle(newData)
+})
+</script>
diff --git a/src/packages/components/Charts/Mores/index.ts b/src/packages/components/Charts/Mores/index.ts
index 7e7725d0..84b74f78 100644
--- a/src/packages/components/Charts/Mores/index.ts
+++ b/src/packages/components/Charts/Mores/index.ts
@@ -5,5 +5,7 @@ import { HeatmapConfig } from './Heatmap/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
 import { DialConfig } from './Dial/index'
+import { SankeyConfig } from './Sankey/index'
+import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, DialConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]
diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
index 3b9f92d4..d7d58273 100644
--- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue
@@ -65,6 +65,7 @@ import { RequestHeader } from '../RequestHeader'
 import { isDev } from '@/utils'
 import { icon } from '@/plugins'
 import {
+  graphUrl,
   chartDataUrl,
   chartSingleDataUrl,
   rankListUrl,
@@ -80,7 +81,8 @@ import {
   capsuleUrl,
   wordCloudUrl,
   treemapUrl,
-  threeEarth01Url
+  threeEarth01Url,
+  sankeyUrl
 } from '@/api/mock'
 
 const props = defineProps({
@@ -142,6 +144,12 @@ const apiList = [
   },
   {
     value: `【三维地球】${threeEarth01Url}`
+  },
+  {
+    value: `【桑基图】${sankeyUrl}`
+  },
+  {
+    value: `【关系图】${graphUrl}`
   }
 ]
 </script>
diff --git a/src/views/chart/ContentHeader/headerLeftBtn/index.vue b/src/views/chart/ContentHeader/headerLeftBtn/index.vue
index 5c4b98be..38f493d4 100644
--- a/src/views/chart/ContentHeader/headerLeftBtn/index.vue
+++ b/src/views/chart/ContentHeader/headerLeftBtn/index.vue
@@ -11,7 +11,7 @@
       <!-- 模块展示按钮 -->
       <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>
-          <n-button size="small" ghost :type="styleHandle(item)" :focusable="false" @click="clickHandle(item, $event)">
+          <n-button size="small" ghost :type="styleHandle(item)" :focusable="false" @click="clickHandle(item)">
             <component :is="item.icon"></component>
           </n-button>
         </template>