feat:新增水球图设置项
This commit is contained in:
parent
2499cbdd44
commit
d3afea8c5e
@ -3,6 +3,37 @@ import { CreateComponentType } from '@/packages/index.d'
|
|||||||
import { WaterPoloConfig } from './index'
|
import { WaterPoloConfig } from './index'
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
|
export const shapes = [
|
||||||
|
{
|
||||||
|
label: '圆形',
|
||||||
|
value: 'circle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '正方形',
|
||||||
|
value: 'rect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '带圆角的正方形',
|
||||||
|
value: 'roundRect'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '正三角形',
|
||||||
|
value: 'triangle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '菱形',
|
||||||
|
value: 'diamond'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '水滴',
|
||||||
|
value: 'pin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '箭头',
|
||||||
|
value: 'arrow'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export const includes = []
|
export const includes = []
|
||||||
|
|
||||||
export const option = {
|
export const option = {
|
||||||
@ -10,6 +41,7 @@ export const option = {
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'liquidFill',
|
type: 'liquidFill',
|
||||||
|
shape: shapes[0].value,
|
||||||
radius: '90%',
|
radius: '90%',
|
||||||
data: [0],
|
data: [0],
|
||||||
center: ['50%', '50%'],
|
center: ['50%', '50%'],
|
||||||
|
@ -15,19 +15,26 @@
|
|||||||
placeholder="水球数值"
|
placeholder="水球数值"
|
||||||
></n-input-number>
|
></n-input-number>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
<SettingItem name="形状">
|
||||||
|
<n-select v-model:value="item.shape" :options="shapes" placeholder="选择形状" />
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem name="文本">
|
||||||
|
<n-input-number v-model:value="item.label.normal.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
|
||||||
|
</n-input-number>
|
||||||
|
</SettingItem>
|
||||||
<SettingItem name="颜色1">
|
<SettingItem name="颜色1">
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['hex']"
|
:modes="['hex']"
|
||||||
v-model:value="item.color[0].colorStops[0].color"
|
v-model:value="item.color[0].colorStops[0].color"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
<SettingItem name="颜色2">
|
<SettingItem name="颜色2">
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['hex']"
|
:modes="['hex']"
|
||||||
v-model:value="item.color[0].colorStops[1].color"
|
v-model:value="item.color[0].colorStops[1].color"
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
<SettingItemBox name="背景" :alone="true">
|
<SettingItemBox name="背景" :alone="true">
|
||||||
@ -44,7 +51,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { PropType, computed } from 'vue'
|
import { PropType, computed } from 'vue'
|
||||||
import { option } from './config'
|
import { option, shapes } from './config'
|
||||||
import {
|
import {
|
||||||
CollapseItem,
|
CollapseItem,
|
||||||
SettingItemBox,
|
SettingItemBox,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user