Commit dbc182f8401b40be31af0a1edc00ddea047263c9
1 parent
89225bce
feat(src/packages): 图表更多自定义native-ui新增取值范围
Showing
2 changed files
with
25 additions
and
5 deletions
@@ -50,7 +50,11 @@ export const option = { | @@ -50,7 +50,11 @@ export const option = { | ||
50 | // 指标颜色 | 50 | // 指标颜色 |
51 | indicatorTextColor: '#FFFFFFFF', | 51 | indicatorTextColor: '#FFFFFFFF', |
52 | // 偏移角度 | 52 | // 偏移角度 |
53 | - offsetDegree: 0 | 53 | + offsetDegree: 0, |
54 | + value:{ | ||
55 | + min:0, | ||
56 | + max:1000 | ||
57 | + } | ||
54 | } | 58 | } |
55 | 59 | ||
56 | export default class Config extends PublicConfigClass implements CreateComponentType { | 60 | export default class Config extends PublicConfigClass implements CreateComponentType { |
@@ -10,7 +10,14 @@ | @@ -10,7 +10,14 @@ | ||
10 | <n-input v-model:value="optionData.unit" size="small"></n-input> | 10 | <n-input v-model:value="optionData.unit" size="small"></n-input> |
11 | </setting-item> | 11 | </setting-item> |
12 | </SettingItemBox> | 12 | </SettingItemBox> |
13 | - | 13 | + <SettingItemBox name="范围"> |
14 | + <SettingItem name="最小值"> | ||
15 | + <n-input-number :min="0" v-model:value="optionData.value.min" size="small"></n-input-number> | ||
16 | + </SettingItem> | ||
17 | + <setting-item name="最大值"> | ||
18 | + <n-input-number v-model:value="optionData.value.max" size="small"></n-input-number> | ||
19 | + </setting-item> | ||
20 | + </SettingItemBox> | ||
14 | <SettingItemBox name="轨道"> | 21 | <SettingItemBox name="轨道"> |
15 | <SettingItem name="形状"> | 22 | <SettingItem name="形状"> |
16 | <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" /> | 23 | <n-select v-model:value="optionData.type" :options="types" placeholder="选择形状" /> |
@@ -41,7 +48,7 @@ | @@ -41,7 +48,7 @@ | ||
41 | <SettingItem name="文本颜色"> | 48 | <SettingItem name="文本颜色"> |
42 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker> | 49 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.indicatorTextColor"></n-color-picker> |
43 | </SettingItem> | 50 | </SettingItem> |
44 | - <setting-item name="文本大小"> | 51 | + <setting-item name="文本大小"> |
45 | <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number> | 52 | <n-input-number v-model:value="optionData.indicatorTextSize" size="small"></n-input-number> |
46 | </setting-item> | 53 | </setting-item> |
47 | </SettingItemBox> | 54 | </SettingItemBox> |
@@ -49,17 +56,26 @@ | @@ -49,17 +56,26 @@ | ||
49 | </template> | 56 | </template> |
50 | 57 | ||
51 | <script setup lang="ts"> | 58 | <script setup lang="ts"> |
52 | -import { PropType } from 'vue' | 59 | +import { PropType, watch, ref } from 'vue' |
53 | // 以下是封装的设置模块布局组件,具体效果可在官网查看 | 60 | // 以下是封装的设置模块布局组件,具体效果可在官网查看 |
54 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 61 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
55 | 62 | ||
56 | // 获取 option 的数据,便于使用 typeof 获取类型 | 63 | // 获取 option 的数据,便于使用 typeof 获取类型 |
57 | import { option, types, indicatorPlacements } from './config' | 64 | import { option, types, indicatorPlacements } from './config' |
58 | 65 | ||
59 | -defineProps({ | 66 | +const props = defineProps({ |
60 | optionData: { | 67 | optionData: { |
61 | type: Object as PropType<typeof option>, | 68 | type: Object as PropType<typeof option>, |
62 | required: true | 69 | required: true |
63 | } | 70 | } |
64 | }) | 71 | }) |
72 | + | ||
73 | +watch( | ||
74 | + () => props.optionData.dataset, | ||
75 | + (newData: number) => { | ||
76 | + if (newData < props.optionData.value.min || newData > props.optionData.value.max) { | ||
77 | + window['$message'].error('取值范围在最小值和最大值之间') | ||
78 | + } | ||
79 | + } | ||
80 | +) | ||
65 | </script> | 81 | </script> |