feat:新增水球图设置项

This commit is contained in:
奔跑的面条 2022-06-13 17:29:39 +08:00
parent 2499cbdd44
commit d3afea8c5e
2 changed files with 42 additions and 3 deletions

View File

@ -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%'],

View File

@ -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,