mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改集团及基地图表样式

Browse Source
This commit is contained in:
朱菊兰
2026-03-20 16:13:53 +08:00
parent 2465f89d26
commit bb66f97b95
257 changed files with 25365 additions and 6814 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/home/operatingComponents/monthlyOverview.vue
View File

@@ -19,9 +19,9 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>
<div class="electricityGauge">
<!-- <div class="electricityGauge">
<electricityGauge :detailData="monthData" id="month"></electricityGauge>
</div>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :detailData="monthData">
@@ -142,33 +142,27 @@ export default {
}
.number {
display: flex;
align-items: center;
gap: 6px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
font-size: 46px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
text-align: center;
font-style: normal;
white-space: nowrap;
margin-top: 20px;
}
.mom {
// width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
font-size: 20px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
text-align: center;
font-style: normal;
z-index: 1000;
margin-top: 20px;
}
}

40
src/views/home/operatingComponents/monthlyRelatedMetrics.vue
View File

@@ -5,8 +5,14 @@
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 销量模块（直接传递整合了flag的salesData） -->
<div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
<div class="title">
销量·万㎡
<div style='position: relative;'>
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{salesData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:salesData.flag>0?'#30B590':'#FF9423'}" >{{salesData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
@@ -14,8 +20,14 @@
</div>
<!-- 单价模块（直接传递整合了flag的unitPriceData） -->
<div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
<div class="title">
单价·元/㎡
<div style='position: relative;'>
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{unitPriceData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:unitPriceData.flag>0?'#30B590':'#FF9423'}" >{{unitPriceData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>
@@ -64,7 +76,7 @@ export default {
chart: null,
// 初始化数据包含flag字段
salesData: { title: "销量", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 }
unitPriceData: { title: "单价", budget: 0, real: 0, rate: 0, diff: 0, flag: 0 },
}
},
watch: {
@@ -90,18 +102,18 @@ export default {
})
},
// 判断flag的核心方法
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 其他情况 => 未达标
return 0;
},
updateChart(data) {
// 数据兜底

21
src/views/home/operatingComponents/operatingBar.vue
View File

@@ -39,7 +39,7 @@
</div>
</div>
<div class="lineBottom" style="height: 100%; width: 100%">
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 99%; width: 100%" />
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 100%; width: 100%" />
</div>
</div>
</template>
@@ -152,7 +152,7 @@ export default {
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 40,
itemStyle: {
color: {
type: 'linear',
@@ -172,13 +172,13 @@ export default {
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 40,
label: {
show: true,
position: 'top',
offset: [30, 0],
offset: [32, 0],
width: 100,
height: 20,
height: 22,
formatter: (params) => {
const diff = data.diff || [];
const flags = data.flags || [];
@@ -212,23 +212,21 @@ export default {
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
lineHeight: 26,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
fontSize: 14,
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
fontSize: 14,
},
// 未达标样式
unachieved: {
@@ -236,8 +234,7 @@ export default {
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
fontSize: 14,
}
}
},

11
src/views/home/operatingComponents/operatingLineBarSale.vue
View File

@@ -136,11 +136,12 @@ export default {
}
}
},
grid: {
grid: {
top: 30,
bottom: 30,
right: 70,
left: 60
bottom: 5,
right: 20,
left: 25,
containLabel: true
},
xAxis: [
{
@@ -174,7 +175,7 @@ export default {
fontSize: 12,
align: 'right'
},
min:1000,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {

6
src/views/home/operatingComponents/operatingLineBarSaleGroup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 380px;"></div>
</template>
<script>
import * as echarts from 'echarts';
@@ -85,7 +85,7 @@ export default {
},
grid: {
top: 30,
bottom: 5,
bottom:20,
right: 10,
left: 25,
containLabel: true
@@ -118,7 +118,7 @@ export default {
fontSize: 12,
align: 'right'
},
min:1500,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {

6
src/views/home/operatingComponents/operatingLineBarSaleSingle.vue
View File

@@ -92,10 +92,10 @@ export default {
// }
},
grid: {
top: 25,
top: 20,
bottom: 30,
right: 0,
left: 2,
right: 20,
left: 5,
containLabel: true
},
xAxis: [

15
src/views/home/operatingComponents/operatingLineChart.vue
View File

@@ -10,17 +10,20 @@
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
<div style="
padding: 16px 16px 5px 16px;
line-height: 18px;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="

15
src/views/home/operatingComponents/operatingLineChartCumulative.vue
View File

@@ -10,17 +10,20 @@
background-color: rgba(249, 252, 255, 1);
flex-direction: column;
">
<div style="
font-weight: 400;
<div style="
padding: 16px 16px 5px 16px;
line-height: 18px;
font-size: 18px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
font-style: normal;
padding: 16px 0 0 16px;
">
集团情况
</div>
集团情况
</div>
<div style='font-size: 16px;line-height: 16px;text-align: right;padding-right: 16px;'>
<span>完成率:<span style='color: #0B58FF;'>{{chartData.group.rate[0]}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:chartData.group.flags>0?'#30B590':'#FF9423'}" >{{chartData.group.diff[0]}}</span></span>
</div>
<operatingTopBar :chartData="chartData" />
</div>
<div class="right" style="

123
src/views/home/operatingComponents/operatingSingleBar.vue
View File

@@ -36,59 +36,7 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
color: {
@@ -110,72 +58,7 @@ export default {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = this.detailData?.flag || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
borderRadius: [4, 4, 0, 0],
@@ -189,7 +72,7 @@ export default {
series: [
{
type: 'bar',
barWidth: 24,
barWidth: 60,
barCategoryGap: '50%',
data: seriesData,
itemStyle: {

162
src/views/home/operatingComponents/operatingTopBar.vue
View File

@@ -40,98 +40,15 @@ export default {
const salesData = {
allPlaceNames: this.locations,
series: [
// 1. 完成率（折线图）
// {
// name: '完成率',
// type: 'line',
// yAxisIndex: 1, // 绑定右侧Y轴（需在子组件启用配置）
// lineStyle: {
// color: 'rgba(40, 138, 255, .5)',
// width: 2
// },
// itemStyle: {
// color: 'rgba(40, 138, 255, 1)',
// borderColor: 'rgba(40, 138, 255, 1)',
// borderWidth: 2,
// radius: 4
// },
// areaStyle: {
// opacity: 0.2,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(40, 138, 255, .9)' },
// { offset: 1, color: 'rgba(40, 138, 255, 0)' }
// ])
// },
// data: data.rates, // 完成率（%）
// symbol: 'circle',
// symbolSize: 6
// },
// 2. 目标（柱状图）
{
name: '预算',
type: 'bar',
yAxisIndex: 0, // 左侧Y轴（万元）
label: {
show: true,
position: 'top',
offset: [-30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const { rate = 0, diff = 0 } = params.data || {};
return `{value|完成率}{rate|${rate}%}`;
},
// formatter: `{value|完成率}{rate|${rate}%}`,
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
position: 'top'
},
barWidth: 14,
barWidth: 65,
itemStyle: {
color: {
type: 'linear',
@@ -153,76 +70,9 @@ export default {
yAxisIndex: 0,
label: {
show: true,
position: 'top',
offset: [30, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = data?.flags[0] || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
position: 'top'
},
barWidth: 14,
barWidth: 65,
itemStyle: {
color: (params) => {
// 达标状态：1=达标（绿色），0=未达标（橙色）
@@ -285,7 +135,7 @@ export default {
name: '预算',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 65,
itemStyle: {
color: {
type: 'linear',
@@ -305,7 +155,7 @@ export default {
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
barWidth: 65,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态

22
src/views/home/operatingComponents/totalOverview.vue
View File

@@ -19,9 +19,9 @@
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
</div>
</div>
<div class="electricityGauge">
<!-- <div class="electricityGauge">
<electricityGauge :id=" 'totalG' " :detailData="ytdData" id="totalGauge"></electricityGauge>
</div>
</div> -->
</div>
<div class="line" style="padding: 0px;">
<verticalBarChart :refName=" 'totalVerticalBarChart' " :detailData="ytdData">
@@ -141,32 +141,26 @@ export default {
}
.number {
display: flex;
align-items: center;
gap: 8px;
// width: 190px;
height: 32px;
font-family: YouSheBiaoTiHei;
font-size: 32px;
font-size: 46px;
color: #0B58FF;
line-height: 32px;
letter-spacing: 2px;
text-align: left;
text-align: center;
font-style: normal;
margin-top: 20px;
}
.mom {
// width: 97px;
height: 18px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 18px;
font-size: 20px;
color: #000000;
line-height: 18px;
letter-spacing: 1px;
text-align: left;
text-align: center;
font-style: normal;
z-index: 1000;
margin-top: 20px;
}
}

156
src/views/home/operatingComponents/verticalBarChart.vue
View File

@@ -1,5 +1,11 @@
<template>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
<div style="width: 100%; height: 210px;position: relative;">
<div style='font-size: 16px;position: absolute;right: 20px;top:10px'>
<span>完成率:<span style='color: #0B58FF;'>{{detailData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:detailData.diff>=0?'#30B590':'#FF9423'}" >{{detailData.diff}}</span></span>
</div>
<div :ref="refName" id="coreLineChart" style="width: 100%; height: 210px;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
@@ -43,18 +49,18 @@ export default {
}
},
methods: {
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
getRateFlag(rate, real, target) {
if (isNaN(rate) || rate === null || rate === undefined) return 0;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 1. 完成率 >= 100 => 达标
if (rate >= 100) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 2. 完成率 = 0 且 (目标值=0 或 实际值=目标值=0) => 达标
if (rate === 0 && target === 0) return 1;
// 其他情况 => 未达标
return 0;
},
// 其他情况 => 未达标
return 0;
},
updateChart() {
const chartDom = this.$refs[this.refName];
if (!chartDom) {
@@ -66,6 +72,7 @@ getRateFlag(rate, real, target) {
this.myChart.dispose();
}
this.myChart = echarts.init(chartDom);
const diff = this.detailData.diff || 0
const rate = this.detailData.rate || 0
@@ -92,10 +99,10 @@ getRateFlag(rate, real, target) {
// }
},
grid: {
top: 10,
bottom: 30,
top: 40,
bottom: 15,
right: 80,
left: 30,
left: 10,
containLabel: true,
show: false // 隐藏grid背景，避免干扰
},
@@ -153,73 +160,7 @@ getRateFlag(rate, real, target) {
label: {
show: true,
position: 'right',
offset: [0, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: (params) => {
// const flags = flags || [];
const currentDiff = diff || 0;
const currentFlag = flagValue || 0;
// console.log('flags[params.dataIndex]', flags);
const prefix = currentFlag === 1 ? '+' : '-';
// 根据标志位选择不同的样式类
if (currentFlag === 1) {
// 达标 - 使用 rate-achieved 样式
return `{achieved|${currentDiff}}{text|差值}`;
} else {
// 未达标 - 使用 rate-unachieved 样式
return `{unachieved|${currentDiff}}{text|差值}`;
}
},
backgroundColor: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' },
{ offset: 0.2, color: '#ffffff' },
{ offset: 1, color: '#ffffff' }
]
},
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
borderRadius: 4,
borderColor: '#BFCBD577',
borderWidth: 0,
lineHeight: 20,
rich: {
text: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#464646',
fontSize: 11,
lineHeight: 20
},
achieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#76DABE', // 与达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
},
// 未达标样式
unachieved: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#F9A44A', // 与未达标的 offset: 1 颜色一致
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
color: flagValue === 1
@@ -246,60 +187,7 @@ getRateFlag(rate, real, target) {
label: {
show: true,
position: 'right',
offset: [0, 25],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
return `{value|完成率}{rate|${rate}%}`;
},
// 核心样式：匹配CSS需求
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(205, 215, 224, 0.6)' }, // 顶部0px位置：阴影最强
// { offset: 0.1, color: 'rgba(205, 215, 224, 0.4)' }, // 1px位置：阴影减弱（对应1px）
// { offset: 0.15, color: 'rgba(205, 215, 224, 0.6)' }, // 3px位置：阴影几乎消失（对应3px扩散）
{ offset: 0.2, color: '#ffffff' }, // 主体白色
{ offset: 1, color: '#ffffff' }
]
},
// 外阴影：0px 2px 2px 0px rgba(191,203,215,0.5)
shadowColor: 'rgba(191,203,215,0.5)',
shadowBlur: 2,
shadowOffsetX: 0,
shadowOffsetY: 2,
// 圆角：4px
borderRadius: 4,
// 移除边框
borderColor: '#BFCBD577',
borderWidth: 0,
// 文字垂直居中（针对富文本）
lineHeight: 20,
rich: {
value: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 0, 5, 10], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 10, 5, 0],
align: 'center',
color: '#0B58FF', // 数字蓝色
fontSize: 11,
lineHeight: 20
}
}
fontSize: 14,
},
itemStyle: {
// 预算的渐变颜色（蓝系渐变）

20
src/views/home/operatingComponents/yearRelatedMetrics.vue
View File

@@ -5,8 +5,14 @@
<div class="topItem-container" style="display: flex; gap: 8px; width: 100%;">
<!-- 销量模块（直接传递整合了flag的salesData） -->
<div class="dashboard left" @click="handleDashboardClick('/salesVolumeAnalysis/salesVolumeAnalysisBase')">
<div class="title">
销量·万㎡
<div style='position: relative;'>
<div class="title">
销量·万㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{salesData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:salesData.flag>0?'#30B590':'#FF9423'}" >{{salesData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="salesData"></operatingSingleBar>
@@ -14,8 +20,14 @@
</div>
<!-- 单价模块（直接传递整合了flag的unitPriceData） -->
<div class="dashboard right" @click="handleDashboardClick('/unitPriceAnalysis/unitPriceAnalysisBase')">
<div class="title">
单价·元/㎡
<div style='position: relative;'>
<div class="title">
单价·元/㎡
</div>
<div style='font-size: 16px;position: absolute;top:-4px;right:15px'>
<span>完成率:<span style='color: #0B58FF;'>{{unitPriceData.rate}}%</span></span>
<span style='display: inline-block;margin-left: 10px;'>差值:<span :style="{color:unitPriceData.flag>0?'#30B590':'#FF9423'}" >{{unitPriceData.diff}}</span></span>
</div>
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="unitPriceData"></operatingSingleBar>