diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue index 5180b173..da078ea5 100644 --- a/src/views/Home/Index.vue +++ b/src/views/Home/Index.vue @@ -244,7 +244,7 @@ v-model="deviceOverviewRange" type="daterange" unlink-panels value-format="YYYY- @@ -347,6 +347,18 @@ const loading = ref(true) const avatar = userStore.getUser.avatar const username = userStore.getUser.nickname +const getCssVar = (name: string, fallback: string) => { + if (typeof window === 'undefined') return fallback + const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim() + return v || fallback +} + +const chartTitleColor = { + primary: getCssVar('--el-text-color-primary', '#303133'), + secondary: getCssVar('--el-text-color-secondary', '#909399'), + accent: getCssVar('--el-color-primary', '#409eff') +} + const productionOverviewRange = ref([]) @@ -393,18 +405,14 @@ const deviceStatusCards = ref([]) const moldStatusCards = ref([]) const formData = ref() const deviceRepairLineOptions = ref({ - title: { - text: '设备维修数量统计', - left: 'center' - }, tooltip: { trigger: 'axis' }, grid: { left: 40, right: 30, - bottom: 50, - top: 60, + bottom: 20, + top: 40, containLabel: true }, xAxis: { @@ -425,10 +433,6 @@ const deviceRepairLineOptions = ref({ ] }) const deviceCategoryPieOptionsData = ref({ - title: { - text: '设备分类统计', - left: 'center' - }, tooltip: { trigger: 'item', formatter: '{b}:{c}' @@ -441,8 +445,8 @@ const deviceCategoryPieOptionsData = ref({ { name: '设备类别', type: 'pie', - radius: '55%', - center: ['50%', '60%'], + radius: '65%', + center: ['55%', '50%'], label: { show: true, formatter: '{b}:{c}' @@ -452,9 +456,40 @@ const deviceCategoryPieOptionsData = ref({ }) const moldTypeBarOptionsData = ref({ -title: { - text: '模具分类统计', - left: 'center' + title: { + left: 18, + top: 10, + textStyle: { + rich: { + bar: { + width: 4, + height: 16, + backgroundColor: chartTitleColor.accent, + borderRadius: 2 + }, + title: { + fontSize: 16, + fontWeight: 700, + lineHeight: 18, + color: chartTitleColor.primary + } + } + }, + subtextStyle: { + rich: { + barSub: { + width: 4, + height: 12, + backgroundColor: chartTitleColor.accent, + borderRadius: 2 + }, + sub: { + fontSize: 12, + lineHeight: 14, + color: chartTitleColor.secondary + } + } + } }, tooltip: { trigger: 'axis', @@ -465,8 +500,8 @@ title: { grid: { left: 40, right: 20, - bottom: 30, - top: 60, + bottom: 10, + top: 40, containLabel: true }, xAxis: { @@ -474,6 +509,16 @@ title: { // data: ['一车间', '二车间', '三车间', '四车间', '五车间'], axisTick: { alignWithLabel: true + }, + axisLabel: { + rotate: 35, + interval: 0, + margin: 14, + color: chartTitleColor.secondary, + formatter: (value: string) => { + const v = String(value ?? '') + return v.length > 10 ? `${v.slice(0, 10)}…` : v + } } }, yAxis: {