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

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

@@ -31,6 +31,13 @@ const option = {
     {
       type: 'line',
       smooth: false,
+      symbolSize: 5,   //设定实心点的大小
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
       lineStyle: {
         width: 3,
         type: 'solid'
@@ -52,6 +59,12 @@ const option = {
     {
       type: 'line',
       smooth: false,
+      label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+      },
       lineStyle: {
         width: 3,
         type: 'solid'

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

@@ -25,6 +25,50 @@
         ></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>
 

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

@@ -1,76 +1,93 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType } from 'vue'
-import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
-import { mergeTheme } from '@/packages/public/chart'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { useChartDataFetch } from '@/hooks'
-import { isPreview } from '@/utils'
+import { reactive, watch, PropType } from "vue";
+import VChart from "vue-echarts";
+import { use, graphic } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import config, { includes } from "./config";
+import { mergeTheme } from "@/packages/public/chart";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { chartColorsSearch, defaultTheme } from "@/settings/chartThemes/index";
+import {
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+} from "echarts/components";
+import { useChartDataFetch } from "@/hooks";
+import { isPreview } from "@/utils";
 
 const props = defineProps({
   themeSetting: {
     type: Object,
-    required: true
+    required: true,
   },
   themeColor: {
     type: Object,
-    required: true
+    required: true,
   },
   chartConfig: {
     type: Object as PropType<config>,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-const chartEditStore = useChartEditStore()
+use([
+  DatasetComponent,
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+const chartEditStore = useChartEditStore();
 
 const option = reactive({
-  value: {}
-})
+  value: {},
+});
 
 // 渐变色处理
 watch(
   () => chartEditStore.getEditCanvasConfig.chartThemeColor,
   (newColor: keyof typeof chartColorsSearch) => {
     if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      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 + index]
+            color: themeColor[3 + index],
           },
           {
             offset: 1,
-            color: 'rgba(0,0,0, 0)'
-          }
-        ])
-      })
+            color: "rgba(0,0,0, 0)",
+          },
+        ]);
+      });
     }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    props.chartConfig.option = option.value
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
+    props.chartConfig.option = option.value;
   },
   {
-    immediate: true
+    immediate: true,
   }
-)
+);
 
 watch(
   () => props.chartConfig.option.dataset,
   () => {
-    option.value = props.chartConfig.option
+    option.value = props.chartConfig.option;
   }
-)
-
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+);
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
 </script>