mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 优化进度条组件内容

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/charts/process.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

29
src/packages/components/Charts/Mores/Process/config.ts
View File

@ -4,9 +4,36 @@ import { ProcessConfig } from './index'
import { chartInitConfig } from '@/settings/designSetting'
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 = {
dataset: 36,
type: "circle",
type: types[2].value,
color: '#4992FFFF',
// 指标位置（线条时可用）
indicatorPlacement: "outside"

28
src/packages/components/Charts/Mores/Process/config.vue
View File

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

2
src/packages/components/Charts/Mores/Process/index.ts
View File

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

22
src/packages/components/Charts/Pies/PieCircle/config.ts
View File

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

18
src/packages/components/Charts/Pies/PieCircle/config.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 遍历 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="数据">
<SettingItem name="数值">
<n-input-number v-model:value="config.dataset" :min="0" :max="1" :step="0.01" size="small" placeholder="数值">
@ -8,28 +8,28 @@
</SettingItem>
</SettingItemBox>
<!-- Echarts 全局设置 -->
<SettingItemBox name="进度条样式">
<SettingItemBox name="进度条">
<SettingItem name="颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.data[0].itemStyle.normal.color"
v-model:value="item.data[0].itemStyle.color"
></n-color-picker>
</SettingItem>
<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>
</SettingItem>
<SettingItem name="阴影颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.data[0].itemStyle.normal.shadowColor"
v-model:value="item.data[0].itemStyle.shadowColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
<!-- 中心标题 -->
<SettingItemBox name="标题">
<SettingItemBox v-if="config.title" name="标题">
<SettingItem name="颜色">
<n-color-picker
size="small"
@ -48,18 +48,18 @@
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.data[1].itemStyle.normal.color"
v-model:value="item.data[1].itemStyle.color"
></n-color-picker>
</SettingItem>
<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>
</SettingItem>
<SettingItem name="阴影颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="item.data[1].itemStyle.normal.shadowColor"
v-model:value="item.data[1].itemStyle.shadowColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>