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

修改

Browse Source
This commit is contained in:
‘937886381’
2025-12-30 09:04:48 +08:00
parent 80deffbb42
commit 7b3873f9ea
232 changed files with 13127 additions and 17011 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/home/operatingProfitComponents/dataTrendBar.vue
View File

@@ -28,7 +28,7 @@
</div>
<div class="button-group">
<div class="item-button category-btn">
<span class="item-text">展示顺序</span>
<span class="item-text">类目选择</span>
</div>
<div class="dropdown-container">
<div class="item-button profit-btn active" @click.stop="isDropdownShow = !isDropdownShow">
@@ -62,9 +62,8 @@ export default {
props: ["chartData"],
data() {
return {
activeButton: 0,
isDropdownShow: false,
selectedProfit: null, // 选中的名称，初始为null
selectedProfit: '经营性利润', // 选中的名称，初始为null
profitOptions: [
'经营性利润',
'销量',
@@ -81,18 +80,17 @@ export default {
// return this.categoryData.map(item => item.name) || [];
// },
currentDataSource() {
console.log('yyyy', this.chartData);
return this.activeButton === 0 ? this.chartData.sales : this.chartData.grossMargin;
return this.chartData
},
locations() {
console.log('this.chartData', this.chartData);
return this.activeButton === 0 ? this.chartData.salesLocations : this.chartData.grossMarginLocations;
return this.chartData.time
},
// 根据按钮切换生成对应的 chartData
chartD() {
// 销量场景数据
const data = this.currentDataSource;
console.log(this.currentDataSource, 'currentDataSource');
console.log('this.currentDataSource', data);
const salesData = {
allPlaceNames: this.locations,
@@ -119,7 +117,7 @@ export default {
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
])
},
data: data.rates, // 完成率（%）
data: data.proportion || [], // 完成率（%）
symbol: 'circle',
symbolSize: 6
},
@@ -141,7 +139,7 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.targets // 目标销量（万元）
data: data.targetValue || [] // 目标销量（万元）
},
// 3. 实际（柱状图，含达标状态）
{
@@ -149,10 +147,69 @@ export default {
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
label: {
show: true,
position: 'top',
offset: [0, 0],
// 固定label尺寸：68px×20px
width: 68,
height: 20,
// 关键：去掉换行，让文字在一行显示，适配小尺寸
formatter: function (params) {
const diff = data.diffValue || [];
const currentDiff = diff[params.dataIndex] || 0;
return `{rate|${currentDiff}}{text|差值}`;
},
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: {
text: {
// 缩小宽度和内边距，适配68px容器
width: 'auto', // 自动宽度，替代固定40px
padding: [5, 10, 5, 0], // 缩小内边距
align: 'center',
color: '#464646', // 文字灰色
fontSize: 11, // 缩小字体，适配小尺寸
lineHeight: 20 // 垂直居中
},
rate: {
width: 'auto',
padding: [5, 0, 5, 10],
align: 'center',
color: '#30B590',
fontSize: 11,
lineHeight: 20
}
}
},
itemStyle: {
color: (params) => {
// 达标状态：1=达标（绿色），0=未达标（橙色）
const safeFlag = data.flags;
const safeFlag = data.completed || [];
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
@@ -175,94 +232,10 @@ export default {
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: data.reals // 实际销量（万元）
data: data.value || [] // 实际销量（万元）
}
]
};
// 毛利率场景数据
const grossProfitData = {
series: [
// 1. 完成率（折线图）
{
name: '完成率',
type: 'line',
yAxisIndex: 1,
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: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率（%）
symbol: 'circle',
symbolSize: 6
},
// 2. 目标（柱状图）
{
name: '目标',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [30, 32, 31, 33, 32, 34] // 目标毛利率（万元）
},
// 3. 实际（柱状图）
{
name: '实际',
type: 'bar',
yAxisIndex: 0,
barWidth: 14,
itemStyle: {
color: (params) => {
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
const currentFlag = safeFlag[params.dataIndex] || 0;
return currentFlag === 1
? {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
]
}
: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
]
};
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [32, 31, 33, 35, 30, 36] // 实际毛利率（万元）
}
]
};
// 根据按钮状态返回对应数据
return salesData;
}
},
@@ -270,6 +243,7 @@ export default {
selectProfit(item) {
this.selectedProfit = item;
this.isDropdownShow = false;
this.$emit('handleGetItemData',item)
}
},
};