feat: 新增 border 样式修改，修改全部设置引入方式

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -3,6 +3,7 @@ import { BarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 

src/packages/components/Charts/Bars/BarCommon/config.vue

@@ -36,20 +36,23 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import {
+  GlobalSetting,
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })

src/packages/components/Charts/Bars/BarCrossrange/config.vue

@@ -25,16 +25,19 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 --> 
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/ChartItemSetting/index'
 import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })

src/packages/components/Charts/Lines/LineCommon/config.vue

@@ -65,21 +65,24 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
 import {
+  GlobalSetting,
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import { option } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<GlobalThemeJsonType>,
     required: true
   }
 })

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -1,6 +1,18 @@
 <template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { GlobalSetting } from '@/components/ChartItemSetting/index'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+console.log(props.optionData)
 </script>

src/packages/components/Decorates/Borders/borderCommon/config.ts

@@ -3,10 +3,12 @@ import { CreateComponentType } from '@/packages/index.d'
 import {BorderCommonConfig} from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
+export const option = {
+  colors: ['#6586ec', '#2cf7fe']
+} 
+
 export default class Config extends publicConfig implements CreateComponentType {
   public key = BorderCommonConfig.key
   public chartConfig = cloneDeep(BorderCommonConfig)
-  public borderOptions = {
+  public option = option
-    colors: ['#6586ec', '#2cf7fe']
-  }
 }

src/packages/components/Decorates/Borders/borderCommon/config.vue

@@ -1,18 +1,26 @@
 <template>
-  <CollapseItem name="颜色" :expanded="true">
+  <CollapseItem name="边框" :expanded="true">
-    <!-- <SettingItemBox
+    <SettingItemBox
-      name="图形"
+      :name="`颜色-${index + 1}`"
-      v-for="(item, index) in optionData.borderOptions.colors"
+      v-for="(item, index) in optionData.colors"
       :key="index"
     >
-      <SettingItem :name="`颜色-${index + 1}`">
+      <SettingItem name="颜色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.borderOptions.colors[index]"
+          v-model:value="optionData.colors[index]"
         ></n-color-picker>
       </SettingItem>
-    </SettingItemBox> -->
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
   </CollapseItem>
 </template>
 
@@ -23,11 +31,11 @@ import {
   SettingItemBox,
   SettingItem
 } from '@/components/ChartItemSetting/index'
-import Config from './config'
+import { option } from './config'
 
 const props = defineProps({
   optionData: {
-    type: Object as PropType<Config>,
+    type: Object as PropType<typeof option>,
     required: true
   }
 })

src/packages/components/Decorates/Borders/borderCommon/index.vue

@@ -30,9 +30,7 @@
       <path
         fill="transparent"
         :stroke="colors[1]"
-        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${
+        :d="`M ${w - 5} ${h - 30} L ${w - 5} ${h - 5} L ${w - 30} ${h - 5}`"
-          w - 30
-        } ${h - 5}`"
       />
     </svg>
 
@@ -43,18 +41,21 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
     required: true
-  },
+  }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.borderOptions)
+
+const colors = computed(() => {
+  return props.chartConfig.option?.colors
+})
 </script>
 
 <style lang="scss" scoped></style>

src/packages/index.d.ts

@@ -36,8 +36,7 @@ export interface PublicConfigType extends requestConfig {
 export interface CreateComponentType extends PublicConfigType {
   key: string
   chartConfig: ConfigType
-  option?: GlobalThemeJsonType
+  option: GlobalThemeJsonType
-  [T: string]: any
 }
 
 // 获取组件实例类中某个key对应value类型的方法

src/settings/chartThemes/index.ts

@@ -83,5 +83,8 @@ export const chartColorsSearch = {
 }
 
 // 默认主题详细配置
-export type GlobalThemeJsonType = typeof themeJson
+type ThemeJsonType = typeof themeJson
+export interface GlobalThemeJsonType extends Partial<ThemeJsonType> {
+  [T:string]: any
+}
 export const globalThemeJson = themeJson

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -10,13 +10,11 @@
     <styles-setting :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
-    <!-- Echarts 全局设置 --> 
-    <global-setting v-if="targetData.option" :optionData="targetData.option" :in-chart="true"></global-setting>
   </div>
 </template>
 
 <script setup lang="ts">
-import { GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
+import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
 import { useTargetData } from '../hooks/useTargetData.hook'
 const { targetData, chartEditStore } = useTargetData()