feat: 初始化图表整体流程

src/components/Pages/VChartItemSetting/Legends.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- todo 补充常用配置项 -->
+  <div v-if="optionData.legends">
+    <div v-for="(legendItem, index) in optionData.legends" :key="index">
+      <collapse-item name="图例">
+        <template #header>
+          <n-switch v-model:value="legendItem.visible" size="small"></n-switch>
+        </template>
+        <setting-item-box name="布局">
+          <setting-item name="位置">
+            <n-select v-model:value="legendItem.orient" size="small" :options="legendsConfig.orient" />
+          </setting-item>
+          <setting-item name="对齐方式">
+            <n-select v-model:value="legendItem.position" size="small" :options="legendsConfig.position" />
+          </setting-item>
+        </setting-item-box>
+        <setting-item-box name="项配置">
+          <setting-item name="标题位置">
+            <n-select v-model:value="legendItem.item.align" size="small" :options="legendsConfig.align" />
+          </setting-item>
+          <setting-item name="颜色">
+            <n-color-picker size="small" v-model:value="legendItem.item.label.style.fill"></n-color-picker>
+          </setting-item>
+          <setting-item name="大小">
+            <n-input-number v-model:value="legendItem.item.label.style.fontSize" :min="1" size="small"></n-input-number>
+          </setting-item>
+        </setting-item-box>
+      </collapse-item>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { legendsConfig } from '@/packages/chartConfiguration/vcharts/index'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/VChartGlobalSetting.vue

@@ -0,0 +1,18 @@
+<template>
+  <!-- 图例 -->
+  <Legends :optionData="optionData"></Legends>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import Legends from './Legends.vue'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/index.ts

@@ -0,0 +1,3 @@
+import VChartGlobalSetting from './VChartGlobalSetting.vue'
+
+export { VChartGlobalSetting }