feat: 新增线条配置

src/components/Pages/VChartItemSetting/Label.vue

@@ -7,7 +7,11 @@
 
       <setting-item-box name="布局">
         <setting-item name="位置">
-          <n-select v-model:value="optionData.label.position" size="small" :options="labelConfig.barPosition" />
+          <n-select
+            v-model:value="optionData.label.position"
+            size="small"
+            :options="positionOptions || labelConfig.barPosition"
+          />
         </setting-item>
 
         <setting-item name="间距">
@@ -33,6 +37,10 @@ defineProps({
   optionData: {
     type: Object as PropType<vChartGlobalThemeJsonType>,
     required: true
+  },
+  positionOptions: {
+    type: Array,
+    required: false
   }
 })
 </script>

src/components/Pages/VChartItemSetting/Line.vue

@@ -0,0 +1,33 @@
+<template>
+  <collapse-item name="线条" v-if="optionData.line">
+    <SettingItemBox name="样式">
+      <setting-item name="宽度">
+        <n-input-number v-model:value="optionData.line.style.lineWidth" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="线条类型">
+        <n-select
+          v-model:value="optionData.line.style.curveType"
+          :options="styleConfig.curveType"
+          size="small"
+        ></n-select>
+      </setting-item>
+      <setting-item name="末端样式">
+        <n-select v-model:value="optionData.line.style.lineCap" :options="styleConfig.lineCap" size="small"></n-select>
+      </setting-item>
+    </SettingItemBox>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/Point.vue

@@ -0,0 +1,56 @@
+<template>
+  <template v-if="optionData.point">
+    <collapse-item name="实心点(图元)">
+      <template #header>
+        <n-switch v-model:value="optionData.point.visible" size="small"></n-switch>
+      </template>
+
+      <setting-item-box name="样式">
+        <setting-item name="位置">
+          <n-select v-model:value="optionData.point.style.symbolType" size="small" :options="styleConfig.symbolType" />
+        </setting-item>
+
+        <setting-item name="大小">
+          <n-input-number v-model:value="optionData.point.style.size" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="填充透明度">
+          <n-input-number v-model:value="optionData.point.style.fillOpacity" :step="0.1" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="边框宽度">
+          <n-input-number v-model:value="optionData.point.style.lineWidth" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="边框颜色">
+          <n-color-picker v-model:value="optionData.point.style.stroke" size="small" />
+        </setting-item>
+        <setting-item name="边框透明度">
+          <n-input-number v-model:value="optionData.point.style.strokeOpacity" :step="0.1" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="偏移X">
+          <n-input-number v-model:value="optionData.point.style.dx" :min="0" size="small" />
+        </setting-item>
+        <setting-item name="偏移Y">
+          <n-input-number v-model:value="optionData.point.style.dy" :min="0" size="small" />
+        </setting-item>
+      </setting-item-box>
+    </collapse-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { styleConfig } from '@/packages/chartConfiguration/vcharts/index'
+import FontStyle from './common/FontStyle.vue'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  },
+  positionOptions: {
+    type: Array,
+    required: false
+  }
+})
+</script>

src/components/Pages/VChartItemSetting/index.ts

@@ -2,5 +2,7 @@ import VChartGlobalSetting from './VChartGlobalSetting.vue'
 import Axis from './Axis.vue'
 import Label from './Label.vue'
 import Bar from './Bar.vue'
+import Line from './Line.vue'
+import Point from './Point.vue'
 
-export { VChartGlobalSetting, Axis, Label, Bar }
+export { VChartGlobalSetting, Axis, Label, Bar, Line, Point }