mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
chore: 优化进度条组件内容
This commit is contained in:
parent
e48ca421d8
commit
c792482c60
Binary file not shown.
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
@ -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"
|
||||||
|
@ -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>
|
@ -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,
|
||||||
// 子分类目录
|
// 子分类目录
|
||||||
|
@ -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"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user