feat(src/packages): 图表更多自定义native-ui新增取值范围

@@ -50,7 +50,11 @@ export const option = {
   // 指标颜色
   indicatorTextColor: '#FFFFFFFF',
   // 偏移角度
-  offsetDegree: 0
+  offsetDegree: 0,
+  value:{
+    min:0,
+    max:1000
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -10,7 +10,14 @@
         <n-input v-model:value="optionData.unit" size="small"></n-input>
       </setting-item>
     </SettingItemBox>
-
+    <SettingItemBox name="范围">
+      <SettingItem name="最小值">
+        <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number>
+      </SettingItem>
+      <setting-item name="最大值">
+        <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number>
+      </setting-item>
+    </SettingItemBox>
     <SettingItemBox name="轨道">
       <SettingItem name="形状">
         <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" />
@@ -41,7 +48,7 @@
       <SettingItem name="文本颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker>
       </SettingItem>
-       <setting-item name="文本大小">
+      <setting-item name="文本大小">
         <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number>
       </setting-item>
     </SettingItemBox>
@@ -49,17 +56,26 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, watch, ref } from 'vue'
 // 以下是封装的设置模块布局组件，具体效果可在官网查看
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
 // 获取 option 的数据，便于使用 typeof 获取类型
 import { option, types, indicatorPlacements } from './config'
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
+
+watch(
+  () => props.optionData.dataset,
+  (newData: number) => {
+    if (newData < props.optionData.value.min || newData > props.optionData.value.max) {
+      window['$message'].error('取值范围在最小值和最大值之间')
+    }
+  }
+)
 </script>