From 14010cce8fd51d390437974e733a42b7acdbfb2b Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 24 Feb 2022 17:23:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8D=95=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=95=B0=E6=8D=AE=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/GlobalSetting.vue        |  42 +++++---
 .../Charts/Bars/BarCommon/config.ts           |  35 +++---
 .../Charts/Bars/BarCommon/index.vue           |  14 +--
 .../Charts/Bars/BarCrossrange/config.ts       |  41 ++++---
 .../Charts/Bars/BarCrossrange/index.vue       |  10 +-
 .../Charts/Lines/LineCommon/config.ts         |  59 ++++++-----
 .../Charts/Lines/LineCommon/index.vue         |   8 +-
 .../Charts/Pies/PieCommon/config.ts           | 100 +++++++++---------
 .../Charts/Pies/PieCommon/index.vue           |   9 +-
 src/packages/index.d.ts                       |   2 +-
 src/packages/public/chart.ts                  |  23 ++--
 src/settings/chartThemes/global.theme.json    |  10 --
 .../modules/chartEditStore/chartEditStore.ts  |  10 +-
 .../components/ChartSetting/index.vue         |  25 ++++-
 .../components/EditHistory/index.vue          |   2 +-
 src/views/chart/ContentEdit/index.vue         |   2 +-
 .../components/ListItem/index.vue             |   2 +-
 17 files changed, 219 insertions(+), 175 deletions(-)

diff --git a/src/components/ChartItemSetting/GlobalSetting.vue b/src/components/ChartItemSetting/GlobalSetting.vue
index be96d3e3..a1aca2d3 100644
--- a/src/components/ChartItemSetting/GlobalSetting.vue
+++ b/src/components/ChartItemSetting/GlobalSetting.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="go-global-setting">
-    <CollapseItem name="标题">
+    <CollapseItem v-if="title" name="标题">
       <template #header>
-        <n-switch v-model:value="title.show" size="small" />
+        <n-switch v-show="inChart" v-model:value="title.show" size="small" />
       </template>
       <SettingItemBox name="标题">
         <SettingItem name="颜色">
@@ -33,9 +33,9 @@
       </SettingItemBox>
     </CollapseItem>
 
-    <CollapseItem name="X轴">
+    <CollapseItem v-if="xAxis" name="X轴">
       <template #header>
-        <n-switch v-model:value="xAxis.show" size="small" />
+        <n-switch v-show="inChart" v-model:value="xAxis.show" size="small" />
       </template>
       <SettingItemBox name="名称">
         <SettingItem name="颜色">
@@ -46,7 +46,7 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="标签">
-        <SettingItem name="展示">
+        <SettingItem v-show="inChart" name="展示">
           <n-space>
             <n-switch v-model:value="xAxis.axisLabel.show" size="small" />
           </n-space>
@@ -76,7 +76,7 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="刻度">
-        <SettingItem name="展示">
+        <SettingItem v-show="inChart" name="展示">
           <n-space>
             <n-switch v-model:value="xAxis.axisTick.show" size="small" />
           </n-space>
@@ -90,6 +90,11 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="分割线">
+        <SettingItem v-show="inChart" name="展示">
+          <n-space>
+            <n-switch v-model:value="xAxis.splitLine.show" size="small" />
+          </n-space>
+        </SettingItem>
         <SettingItem name="颜色">
           <n-color-picker
             v-model:value="xAxis.splitLine.lineStyle.color"
@@ -120,9 +125,9 @@
       </SettingItemBox>
     </CollapseItem>
 
-    <CollapseItem name="Y轴">
+    <CollapseItem v-if="yAxis" name="Y轴">
       <template #header>
-        <n-switch v-model:value="yAxis.show" size="small" />
+        <n-switch v-show="inChart" v-model:value="yAxis.show" size="small" />
       </template>
       <SettingItemBox name="名称">
         <SettingItem name="颜色">
@@ -133,7 +138,7 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="标签">
-        <SettingItem name="展示">
+        <SettingItem v-show="inChart" name="展示">
           <n-space>
             <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
           </n-space>
@@ -143,7 +148,7 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="轴线">
-        <SettingItem name="展示">
+        <SettingItem v-show="inChart" name="展示">
           <n-space>
             <n-switch v-model:value="yAxis.axisLine.show" size="small" />
           </n-space>
@@ -168,7 +173,7 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="刻度">
-        <SettingItem name="展示">
+        <SettingItem v-show="inChart" name="展示">
           <n-space>
             <n-switch v-model:value="yAxis.axisTick.show" size="small" />
           </n-space>
@@ -182,6 +187,11 @@
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="分割线">
+        <SettingItem v-show="inChart" name="展示">
+          <n-space>
+            <n-switch v-model:value="yAxis.splitLine.show" size="small" />
+          </n-space>
+        </SettingItem>
         <SettingItem name="颜色">
           <n-color-picker
             v-model:value="yAxis.splitLine.lineStyle.color"
@@ -212,9 +222,9 @@
       </SettingItemBox>
     </CollapseItem>
 
-    <CollapseItem name="图例">
+    <CollapseItem v-if="legend" name="图例">
       <template #header>
-        <n-switch v-model:value="legend.show" size="small" />
+        <n-switch v-show="inChart" v-model:value="legend.show" size="small" />
       </template>
       <SettingItemBox name="图例文字">
         <SettingItem>
@@ -239,9 +249,15 @@ const props = defineProps({
   data: {
     type: Object as PropType<GlobalThemeJsonType>,
     required: true
+  },
+  inChart: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 
+console.log(props.data)
 const { title, xAxis, yAxis, legend } = toRefs(props.data)
 </script>
 
diff --git a/src/packages/components/Charts/Bars/BarCommon/config.ts b/src/packages/components/Charts/Bars/BarCommon/config.ts
index bc5bd2d3..30b94779 100644
--- a/src/packages/components/Charts/Bars/BarCommon/config.ts
+++ b/src/packages/components/Charts/Bars/BarCommon/config.ts
@@ -4,39 +4,50 @@ import { CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 import cloneDeep from 'lodash/cloneDeep'
 
-export default class Config extends publicConfig implements CreateComponentType {
-  public key = BarCommonConfig.key
-  public chartData = omit(cloneDeep(BarCommonConfig), ['node'])
+export const includes = ['legend', 'xAxis', 'yAxis']
 
-  // 图表配置项
-  public option = echartOptionProfixHandle({
+// 图表配置项
+const option = echartOptionProfixHandle(
+  {
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },
     legend: {
-      data: ["name1", "name2"]
+      show: true,
     },
     xAxis: {
+      show: true,
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
+      show: true,
       type: 'value'
     },
     series: [
       {
-        name: 'name1',
+        name: 'data1',
         type: 'bar',
-        data: [120, 200, 150, 80, 70, 110, 130],
+        data: [120, 200, 150, 80, 70, 110, 130]
       },
       {
-        name: 'name2',
+        name: 'data2',
         type: 'bar',
-        data: [130, 130, 312, 268, 155, 117, 160],
+        data: [130, 130, 312, 268, 155, 117, 160]
       }
     ]
-  })
-}
\ No newline at end of file
+  },
+  includes
+)
+
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key = BarCommonConfig.key
+  public chartConfig = omit(cloneDeep(BarCommonConfig), ['node'])
+  // 图表配置项
+  public option = option
+}
diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue
index ae4cf123..c35b4b12 100644
--- a/src/packages/components/Charts/Bars/BarCommon/index.vue
+++ b/src/packages/components/Charts/Bars/BarCommon/index.vue
@@ -8,13 +8,12 @@ import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import config from './config'
+import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import {
   GridComponent,
   TooltipComponent,
-  LegendComponent,
-  TitleComponent
+  LegendComponent
 } from 'echarts/components'
 
 const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  chartData: {
+  chartConfig: {
     type: Object as PropType<config>,
     required: true
   }
@@ -37,13 +36,10 @@ use([
   BarChart,
   GridComponent,
   TooltipComponent,
-  LegendComponent,
-  TitleComponent
+  LegendComponent
 ])
 
-const includes = ['title', 'legend', 'xAxis', 'yAxis']
-
 const option = computed(() => {
-  return mergeTheme( props.chartData.option, props.themeSetting, includes)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/config.ts b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
index 5323bffc..2ff5aa50 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/config.ts
+++ b/src/packages/components/Charts/Bars/BarCrossrange/config.ts
@@ -2,38 +2,51 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCrossrangefig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
+import cloneDeep from 'lodash/cloneDeep'
 
-export default class Config extends publicConfig implements CreateComponentType {
-  public key: string = BarCrossrangefig.key
+export const includes = ['legend', 'xAxis', 'yAxis']
 
-  public chartData = omit(BarCrossrangefig, ['node'])
-
-  // 图表配置项
-  public option = echartOptionProfixHandle({
+const option = echartOptionProfixHandle(
+  {
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },
+    legend: {
+      show: true,
+    },
     xAxis: {
+      show: true,
       type: 'value',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
+      show: true,
       type: 'category'
     },
     series: [
       {
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar'
+        name: 'data1',
+        type: 'bar',
+        data: [120, 200, 150, 80, 70, 110, 130]
+      },
+      {
+        name: 'data2',
+        type: 'bar',
+        data: [130, 130, 312, 268, 155, 117, 160]
       }
     ]
-  })
+  },
+  includes
+)
 
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key: string = BarCrossrangefig.key
+  public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node'])
+  // 图表配置项
+  public option = option
 }
diff --git a/src/packages/components/Charts/Bars/BarCrossrange/index.vue b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
index e56b37d7..271521d0 100644
--- a/src/packages/components/Charts/Bars/BarCrossrange/index.vue
+++ b/src/packages/components/Charts/Bars/BarCrossrange/index.vue
@@ -8,13 +8,12 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import merge from 'lodash/merge'
-import config from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
 import {
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 } from 'echarts/components'
 
 const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  chartData: {
+  chartConfig: {
     type: Object as PropType<config>,
     required: true
   }
@@ -38,11 +37,10 @@ use([
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 ])
 
 const option = computed(() => {
-  return merge(props.themeSetting, props.chartData.option)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
 
diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index 46ab7790..d74b4573 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -3,35 +3,38 @@ import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
+export const includes = ['legend', 'xAxis', 'yAxis']
+
+const options = echartOptionProfixHandle({
+  legend: {
+    show: true,
+  },
+  xAxis: {
+    show: true,
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  series: [
+    {
+      name: 'data1',
+      type: 'line',
+      data: [120, 200, 150, 80, 70, 110, 130]
+    },
+    {
+      name: 'data2',
+      type: 'line',
+      data: [130, 130, 312, 268, 155, 117, 160]
+    }
+  ]
+}, includes)
+
 export default class Config extends publicConfig implements CreateComponentType {
   public key: string = LineCommonConfig.key
-
-  public chartData = omit(LineCommonConfig, ['node'])
-
+  public chartConfig = omit(LineCommonConfig, ['node'])
   // 图表配置项
-  public option = echartOptionProfixHandle({
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-    },
-    yAxis: {
-      type: 'value'
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: 'line'
-      },
-      {
-        data: [130, 130, 312, 268, 155, 117, 160],
-        type: 'line'
-      }
-    ]
-  })
-
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
+  public option = options
 }
\ No newline at end of file
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index 406f058f..617406e1 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -8,7 +8,7 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config from './config'
+import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import {
   GridComponent,
@@ -26,7 +26,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  chartData: {
+  chartConfig: {
     type: Object as PropType<config>,
     required: true
   }
@@ -41,9 +41,7 @@ use([
   TitleComponent
 ])
 
-const includes = ['title', 'legend', 'xAxis', 'yAxis']
-
 const option = computed(() => {
-  return mergeTheme( props.chartData.option, props.themeSetting, includes)
+  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
diff --git a/src/packages/components/Charts/Pies/PieCommon/config.ts b/src/packages/components/Charts/Pies/PieCommon/config.ts
index 1e4910fb..050a4ebe 100644
--- a/src/packages/components/Charts/Pies/PieCommon/config.ts
+++ b/src/packages/components/Charts/Pies/PieCommon/config.ts
@@ -3,59 +3,59 @@ import { PieCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
+export const includes = ['legend']
+
+const option = echartOptionProfixHandle({
+  tooltip: {
+    show: true,
+    trigger: 'item'
+  },
+  legend: {
+    show: true,
+    top: '5%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '40',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+}, includes)
+
 export default class Config extends publicConfig implements CreateComponentType {
   public key: string = PieCommonConfig.key
 
-  public chartData = omit(PieCommonConfig, ['node'])
+  public chartConfig = omit(PieCommonConfig, ['node'])
 
   // 图表配置项
-  public option = echartOptionProfixHandle({
-    tooltip: {
-      trigger: 'item'
-    },
-    legend: {
-      top: '5%',
-      left: 'center'
-    },
-    series: [
-      {
-        name: 'Access From',
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '40',
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' }
-        ]
-      }
-    ]
-  })
-
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
+  public option = option
 }
diff --git a/src/packages/components/Charts/Pies/PieCommon/index.vue b/src/packages/components/Charts/Pies/PieCommon/index.vue
index c9f5f584..6042312b 100644
--- a/src/packages/components/Charts/Pies/PieCommon/index.vue
+++ b/src/packages/components/Charts/Pies/PieCommon/index.vue
@@ -9,12 +9,11 @@ import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
-import config from './config'
+import config, { includes } from './config'
 import {
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 } from 'echarts/components'
 
 const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  chartData: {
+  chartConfig: {
     type: Object as PropType<config>,
     required: true
   }
@@ -38,12 +37,10 @@ use([
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 ])
 
-const includes = ['title', 'legend']
 
 const option = computed(() => {
-  return mergeTheme( props.chartData.option, props.themeSetting, includes)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 4c83cf3a..8b646660 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -20,7 +20,7 @@ export interface PublicConfigType {
 }
 export interface CreateComponentType extends PublicConfigType {
   key: string
-  chartData: Omit<ConfigType, 'node'>
+  chartConfig: Omit<ConfigType, 'node'>
   option: object
 }
 
diff --git a/src/packages/public/chart.ts b/src/packages/public/chart.ts
index 43f3eb43..8c66a3e3 100644
--- a/src/packages/public/chart.ts
+++ b/src/packages/public/chart.ts
@@ -1,14 +1,6 @@
 import merge from 'lodash/merge'
 import pick from 'lodash/pick'
-
-/**
- * * ECharts option 统一前置处理
- * @param option
- */
-export const echartOptionProfixHandle = (option: any) => {
-  option['backgroundColor'] = 'rgba(0,0,0,0)'
-  return option
-}
+import { globalThemeJson } from '@/settings/chartThemes/index'
 
 /**
  * * 合并 color 和全局配置项
@@ -17,10 +9,19 @@ export const echartOptionProfixHandle = (option: any) => {
  * @param excludes 排除元素
  * @returns object
  */
-export const mergeTheme = <T, U, E extends keyof U> (
+export const mergeTheme = <T, U> (
   option: T,
   themeSetting: U,
-  includes: E[] = []
+  includes: string[]
 ) => {
   return merge({}, pick(themeSetting, includes), option)
 }
+
+/**
+ * * ECharts option 统一前置处理
+ * @param option
+ */
+ export const echartOptionProfixHandle = (option: any, includes: string[]) => {
+  option['backgroundColor'] = 'rgba(0,0,0,0)'
+  return mergeTheme(option, globalThemeJson, includes)
+}
\ No newline at end of file
diff --git a/src/settings/chartThemes/global.theme.json b/src/settings/chartThemes/global.theme.json
index 66bb85ec..b758af68 100644
--- a/src/settings/chartThemes/global.theme.json
+++ b/src/settings/chartThemes/global.theme.json
@@ -1,6 +1,5 @@
 {
   "title": {
-    "show": true,
     "textStyle": {
       "color": "#BFBFBF",
       "fontSize": 18
@@ -11,17 +10,14 @@
     }
   },
   "xAxis": {
-    "show": true,
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
     "axisLabel": {
-      "show": true,
       "color": "#B9B8CE"
     },
     "position": "bottom",
     "axisLine": {
-      "show": true,
       "lineStyle": {
         "color": "#B9B8CE",
         "width": 1
@@ -29,7 +25,6 @@
       "onZero": true
     },
     "axisTick": {
-      "show": true,
       "length": 5
     },
     "splitLine": {
@@ -41,17 +36,14 @@
     }
   },
   "yAxis": {
-    "show": true,
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
     "axisLabel": {
-      "show": true,
       "color": "#B9B8CE"
     },
     "position": "left",
     "axisLine": {
-      "show": true,
       "lineStyle": {
         "color": "#B9B8CE",
         "width": 1
@@ -59,7 +51,6 @@
       "onZero": true
     },
     "axisTick": {
-      "show": true,
       "length": 5
     },
     "splitLine": {
@@ -71,7 +62,6 @@
     }
   },
   "legend": {
-    "show": true,
     "textStyle": {
       "color": "#B9B8CE"
     }
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index f75ce602..10a01835 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -138,20 +138,20 @@ export const useChartEditStoreStore = defineStore({
     },
     /**
      * * 新增组件列表
-     * @param chartData 新图表实例
+     * @param chartConfig 新图表实例
      * @param isEnd 是否末端插入
      * @param isHistory 是否进行记录
      * @returns
      */
-    addComponentList(chartData: CreateComponentType, isEnd = false, isHistory = false): void {
+    addComponentList(chartConfig: CreateComponentType, isEnd = false, isHistory = false): void {
       if (isHistory) {
-        chartHistoryStoreStore.createAddHistory(chartData)
+        chartHistoryStoreStore.createAddHistory(chartConfig)
       }
       if (isEnd) {
-        this.componentList.unshift(chartData)
+        this.componentList.unshift(chartConfig)
         return
       }
-      this.componentList.push(chartData)
+      this.componentList.push(chartConfig)
     },
     // * 删除组件列表
     removeComponentList(isHistory = true): void {
diff --git a/src/views/chart/ContentDetails/components/ChartSetting/index.vue b/src/views/chart/ContentDetails/components/ChartSetting/index.vue
index 3c74ffbb..3a3b9f06 100644
--- a/src/views/chart/ContentDetails/components/ChartSetting/index.vue
+++ b/src/views/chart/ContentDetails/components/ChartSetting/index.vue
@@ -1,10 +1,31 @@
 <template>
   <div class="go-chart-content-details">
-    设置
+    <GlobalSetting
+      v-if="targetData"
+      :data="targetData.option"
+      :in-chart="true"
+    />
   </div>
 </template>
 
-<script setup></script>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { loadAsyncComponent } from '@/utils'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GlobalSetting } from '@/components/ChartItemSetting/index'
+import { CreateComponentType } from '@/packages/index.d'
+
+const GlobalSettingCom = loadAsyncComponent(() =>
+  import('@/components/ChartItemSetting/index')
+)
+const chartEditStoreStore = useChartEditStoreStore()
+
+const targetData = computed(() => {
+  const list = chartEditStoreStore.getComponentList
+  const targetIndex = chartEditStoreStore.fetchTargetIndex()
+  return list[targetIndex]
+})
+</script>
 
 <style lang="scss" scoped>
 @include go('chart-content-details') {
diff --git a/src/views/chart/ContentEdit/components/EditHistory/index.vue b/src/views/chart/ContentEdit/components/EditHistory/index.vue
index a3d36655..c6a5dc59 100644
--- a/src/views/chart/ContentEdit/components/EditHistory/index.vue
+++ b/src/views/chart/ContentEdit/components/EditHistory/index.vue
@@ -94,7 +94,7 @@ const labelHandle = (e: HistoryItemType) => {
     return historyActionTypeName[HistoryTargetTypeEnum.CANVAS]
   }
   return `${historyActionTypeName[e.actionType]} - ${
-    (e.historyData as CreateComponentType).chartData.title
+    (e.historyData as CreateComponentType).chartConfig.title
   }`
 }
 
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 5018d9e6..5fdf8733 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -29,7 +29,7 @@
           <component
             class="edit-content-chart"
             :is="item.key"
-            :chartData="item"
+            :chartConfig="item"
             :themeSetting="themeSetting"
             :themeColor="themeColor"
             :style="useSizeStyle(item.attr)"
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
index 64e94275..b41eec6a 100644
--- a/src/views/chart/ContentLayers/components/ListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -39,7 +39,7 @@ const props = defineProps({
   }
 })
 
-const { image, title } = toRefs(props.componentData.chartData)
+const { image, title } = toRefs(props.componentData.chartConfig)
 
 // 计算当前选中目标
 const select = computed(() => {