chore: 优化进度条组件内容

This commit is contained in:
奔跑的面条 2022-06-13 13:05:41 +08:00
parent 3dc745d4ad
commit ca8cac3f1a
6 changed files with 47 additions and 52 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -4,9 +4,36 @@ import { ProcessConfig } from './index'
import { chartInitConfig } from '@/settings/designSetting' import { chartInitConfig } from '@/settings/designSetting'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
export const types = [
{
label: '线形',
value: 'line'
},
{
label: '圆形',
value: 'circle'
},
{
label: '仪表盘',
value: 'dashboard'
},
]
export const indicatorPlacements = [
{
label: '内部',
value: 'inside'
},
{
label: '外部',
value: 'outside'
}
]
export const option = { export const option = {
dataset: 36, dataset: 36,
type: "circle", type: types[2].value,
color: '#4992FFFF', color: '#4992FFFF',
// 指标位置(线条时可用) // 指标位置(线条时可用)
indicatorPlacement: "outside" indicatorPlacement: "outside"

View File

@ -38,7 +38,7 @@ import {
} from '@/components/Pages/ChartItemSetting' } from '@/components/Pages/ChartItemSetting'
// option 便使 typeof // option 便使 typeof
import { option } from './config' import { option, types, indicatorPlacements} from './config'
const props = defineProps({ const props = defineProps({
optionData: { optionData: {
@ -46,30 +46,4 @@ const props = defineProps({
required: true required: true
} }
}) })
const types = [
{
label: '线形',
value: 'line'
},
{
label: '圆形',
value: 'circle'
},
{
label: '仪表盘',
value: 'dashboard'
},
]
const indicatorPlacements = [
{
label: '里面',
value: 'inside'
},
{
label: '外边',
value: 'outside'
}
]
</script> </script>

View File

@ -13,7 +13,7 @@ export const ProcessConfig: ConfigType = {
// 配置组件渲染 Components 格式: VC + key // 配置组件渲染 Components 格式: VC + key
conKey: 'VCProcess', conKey: 'VCProcess',
// 名称 // 名称
title: '多类进度条', title: 'NaiveUI-进度',
// 子分类目录 // 子分类目录
category: ChatCategoryEnum.MORE, category: ChatCategoryEnum.MORE,
// 子分类目录 // 子分类目录

View File

@ -29,33 +29,27 @@ const option = {
hoverAnimation: true, hoverAnimation: true,
color: ["#00bcd44a", "transparent"], color: ["#00bcd44a", "transparent"],
label: { label: {
normal: {
show: false show: false
}
}, },
data: [ data: [
{ {
value: [25], value: [25],
itemStyle: { itemStyle: {
normal: {
color: "#03a9f4", color: "#03a9f4",
shadowBlur: 10, shadowBlur: 10,
shadowColor:"#97e2f5" shadowColor:"#97e2f5"
} }
}
}, },
{ {
value: [75], value: [75],
itemStyle: { itemStyle: {
normal: {
color: "#00bcd44a", color: "#00bcd44a",
shadowBlur: 0, shadowBlur: 0,
shadowColor:"#00bcd44a" shadowColor:"#00bcd44a"
} }
} }
}
] ]
} },
] ]
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<!-- 遍历 seriesList --> <!-- 遍历 seriesList -->
<CollapseItem v-for="(item, index) in config.series" :key="index" :name="`圆环-${index + 1}`" :expanded="true"> <CollapseItem v-for="(item, index) in config.series" :key="index" :name="`圆环`" :expanded="true">
<SettingItemBox name="数据"> <SettingItemBox name="数据">
<SettingItem name="数值"> <SettingItem name="数值">
<n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值"> <n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值">
@ -8,28 +8,28 @@
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<!-- Echarts 全局设置 --> <!-- Echarts 全局设置 -->
<SettingItemBox name="进度条样式"> <SettingItemBox name="进度条">
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.data[0].itemStyle.normal.color" v-model:value="item.data[0].itemStyle.color"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="阴影模糊等级"> <SettingItem name="阴影模糊等级">
<n-input-number v-model:value="item.data[0].itemStyle.normal.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级"> <n-input-number v-model:value="item.data[0].itemStyle.shadowBlur" :min="0" :max="50" :step="1" size="small" placeholder="阴影模糊等级">
</n-input-number> </n-input-number>
</SettingItem> </SettingItem>
<SettingItem name="阴影颜色"> <SettingItem name="阴影颜色">
<n-color-picker <n-color-picker
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.data[0].itemStyle.normal.shadowColor" v-model:value="item.data[0].itemStyle.shadowColor"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>
<!-- 中心标题 --> <!-- 中心标题 -->
<SettingItemBox name="标题"> <SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色"> <SettingItem name="颜色">
<n-color-picker <n-color-picker
size="small" size="small"
@ -48,18 +48,18 @@
<n-color-picker <n-color-picker
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.data[1].itemStyle.normal.color" v-model:value="item.data[1].itemStyle.color"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
<SettingItem name="阴影模糊等级"> <SettingItem name="阴影模糊等级">
<n-input-number v-model:value="item.data[1].itemStyle.normal.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级"> <n-input-number v-model:value="item.data[1].itemStyle.shadowBlur" :min="0" :step="1" size="small" placeholder="阴影模糊等级">
</n-input-number> </n-input-number>
</SettingItem> </SettingItem>
<SettingItem name="阴影颜色"> <SettingItem name="阴影颜色">
<n-color-picker <n-color-picker
size="small" size="small"
:modes="['hex']" :modes="['hex']"
v-model:value="item.data[1].itemStyle.normal.shadowColor" v-model:value="item.data[1].itemStyle.shadowColor"
></n-color-picker> ></n-color-picker>
</SettingItem> </SettingItem>
</SettingItemBox> </SettingItemBox>