feat: 折线图和柱状图配置label

src/packages/components/Charts/Lines/LineGradientSingle/config.ts

@@ -20,7 +20,7 @@ const options = {
   },
   xAxis: {
     show: true,
-    type: 'category'
+    type: 'category',
   },
   yAxis: {
     show: true,
@@ -31,6 +31,13 @@ const options = {
     {
       type: 'line',
       smooth: false,
+      symbolSize: 5,   //设定实心点的大小
+      label:{
+        show: true,
+        position: 'top',
+        color: "#fff",
+        fontSize: 12,
+      },
       lineStyle: {
         type: 'solid',
         width: 3
@@ -52,7 +59,8 @@ const options = {
   ]
 }
 
-export default class Config extends PublicConfigClass implements CreateComponentType {
+export default class Config extends PublicConfigClass
+  implements CreateComponentType {
   public key: string = LineGradientSingleConfig.key
   public chartConfig = LineGradientSingleConfig
   // 图表配置项

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

@@ -25,28 +25,72 @@
         ></n-select>
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="实心点">
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="item.symbolSize"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number
+          v-model:value="item.label.fontSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.label.color"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+          v-model:value="item.label.position"
+          :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' },
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
   </CollapseItem>
 </template>
 
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { lineConf } from '@/packages/chartConfiguration/echarts/index'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { PropType, computed } from "vue";
+import { lineConf } from "@/packages/chartConfiguration/echarts/index";
+import { GlobalThemeJsonType } from "@/settings/chartThemes/index";
 import {
   GlobalSetting,
   CollapseItem,
   SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
+  SettingItem,
+} from "@/components/Pages/ChartItemSetting";
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
-    required: true
+    required: true,
   },
-})
+});
 
 const seriesList = computed(() => {
-  return props.optionData.series
-})
+  return props.optionData.series;
+});
 </script>

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.value" 
+    :manual-update="isPreview()" 
+    autoresize>
   </v-chart>
 </template>
 
@@ -32,7 +37,14 @@ const props = defineProps({
   }
 })
 
-use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -40,41 +52,32 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(
-  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
-  (newColor: keyof typeof chartColorsSearch) => {
-    if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-      props.chartConfig.option.series.forEach((value: any, index: number) => {
-        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: themeColor[3]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0, 0)'
-          }
-        ])
-      })
-    }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    props.chartConfig.option = option.value
-  },
-  {
-    immediate: true
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+  if (!isPreview()) {
+    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+    props.chartConfig.option.series.forEach((value: any, index: number) => {
+      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+        {
+          offset: 0,
+          color: themeColor[3]
+        },
+        {
+          offset: 1,
+          color: 'rgba(0,0,0, 0)'
+        }
+      ])
+    })
   }
-)
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  props.chartConfig.option = option.value
+}, {
+  immediate: true
+})
 
-watch(
-  () => props.chartConfig.option.dataset,
-  () => {
-    option.value = props.chartConfig.option
-  },
-  {
-    deep: false
-  }
-)
+
+watch(() => props.chartConfig.option.dataset, () => {
+  option.value = props.chartConfig.option
+})
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>