feat: 修改组件展示，支持单个组件数据编辑

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>
 

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]
       }
     ]
-  })
-}
+  },
+  includes
+)
+
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key = BarCommonConfig.key
+  public chartConfig = omit(cloneDeep(BarCommonConfig), ['node'])
+  // 图表配置项
+  public option = option
+}

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>

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
-
-  public chartData = omit(BarCrossrangefig, ['node'])
+export const includes = ['legend', 'xAxis', 'yAxis']
 
-  // 图表配置项
-  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
 }

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>
 

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 default class Config extends publicConfig implements CreateComponentType {
-  public key: string = LineCommonConfig.key
+export const includes = ['legend', 'xAxis', 'yAxis']
 
-  public chartData = omit(LineCommonConfig, ['node'])
-
-  // 图表配置项
-  public option = echartOptionProfixHandle({
-    xAxis: {
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+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]
     },
-    yAxis: {
-      type: 'value'
-    },
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        type: 'line'
-      },
-      {
-        data: [130, 130, 312, 268, 155, 117, 160],
-        type: 'line'
-      }
-    ]
-  })
+    {
+      name: 'data2',
+      type: 'line',
+      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 = LineCommonConfig.key
+  public chartConfig = omit(LineCommonConfig, ['node'])
+  // 图表配置项
+  public option = options
 }

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>

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
 }

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>

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
 }
 

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)
+}

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"
     }

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 {

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') {

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
   }`
 }
 

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)"

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(() => {