chore: 优化进度条组件内容

This commit is contained in:
奔跑的面条
2022-06-13 13:05:41 +08:00
parent e48ca421d8
commit c792482c60
6 changed files with 47 additions and 52 deletions
@@ -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"
}
}
]
}
},
]
}
@@ -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>