488 lines
15 KiB
Vue
488 lines
15 KiB
Vue
<template>
|
||
<div class="coreBar">
|
||
<div class="lineBottom" style="height: 320px; width: 100%">
|
||
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import operatingLineBar from './operatingLineBarSaleGroup.vue';
|
||
import * as echarts from 'echarts';
|
||
|
||
export default {
|
||
name: "Container",
|
||
components: { operatingLineBar },
|
||
props: ["chartData"],
|
||
data() {
|
||
return {
|
||
activeButton: 0,
|
||
};
|
||
},
|
||
computed: {
|
||
currentDataSource() {
|
||
console.log('yyyy', this.chartData);
|
||
|
||
return this.chartData
|
||
},
|
||
locations() {
|
||
console.log('this.chartData', this.chartData);
|
||
|
||
return this.chartData.locations
|
||
},
|
||
// 根据按钮切换生成对应的 chartData
|
||
chartD() {
|
||
// 销量场景数据
|
||
const data = this.currentDataSource;
|
||
const diff = data.diff[0]
|
||
const rate = data.rate[0]
|
||
console.log(this.currentDataSource, 'currentDataSource');
|
||
|
||
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}%}`;
|
||
},
|
||
// 核心样式：匹配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
|
||
}
|
||
}
|
||
},
|
||
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: data.targets // 目标销量（万元）
|
||
},
|
||
// 3. 实际（柱状图，含达标状态）
|
||
{
|
||
name: '实际',
|
||
type: 'bar',
|
||
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
|
||
}
|
||
}
|
||
},
|
||
barWidth: 14,
|
||
itemStyle: {
|
||
color: (params) => {
|
||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||
const safeFlag = data.flags;
|
||
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: data.reals // 实际销量（万元）
|
||
}
|
||
]
|
||
};
|
||
|
||
// 毛利率场景数据
|
||
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 this.activeButton === 0 ? salesData : grossProfitData;
|
||
}
|
||
},
|
||
methods: {},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.coreBar {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
padding: 12px;
|
||
|
||
.barTop {
|
||
display: flex;
|
||
justify-content: flex-end; // 标题左、右侧容器右，整体两端对齐
|
||
align-items: center; // 垂直居中，避免上下错位
|
||
gap: 16px; // 标题与右侧容器的最小间距，防止拥挤
|
||
width: 100%; // 确保占满父容器，实现两端对齐
|
||
|
||
.title {
|
||
height: 18px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
// 标题固定在左侧，不挤压右侧空间
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 1. 右侧容器：包裹图例和按钮组，整体靠右
|
||
.right-container {
|
||
display: flex;
|
||
align-items: center; // 图例和按钮组垂直居中
|
||
gap: 24px; // 图例与按钮组的间距，避免贴紧
|
||
margin-right: 46px; // 右侧整体留边，与原按钮组边距一致
|
||
}
|
||
|
||
// 2. 图例：在右侧容器内横向排列
|
||
.legend {
|
||
display: flex;
|
||
gap: 16px; // 图例项之间间距，避免重叠
|
||
align-items: center;
|
||
// 移除原margin-left，避免位置偏移
|
||
margin: 0;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.8);
|
||
text-align: left;
|
||
font-style: normal;
|
||
white-space: nowrap; // 防止图例文字换行
|
||
}
|
||
|
||
.legend-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
.legend-icon.line {
|
||
width: 12px;
|
||
height: 2px;
|
||
position: relative;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
content: "";
|
||
top: -2px;
|
||
left: 3px;
|
||
width: 6px;
|
||
border-radius: 50%;
|
||
height: 6px;
|
||
background-color: rgba(40, 138, 255, 1);
|
||
}
|
||
}
|
||
|
||
.legend-icon.square {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
// 图例颜色
|
||
.yield {
|
||
background: rgba(40, 138, 255, 1);
|
||
}
|
||
|
||
.target {
|
||
background: #2889FF;
|
||
}
|
||
|
||
.achieved {
|
||
background: rgba(40, 203, 151, 1);
|
||
}
|
||
|
||
.unachieved {
|
||
background: rgba(255, 132, 0, 1);
|
||
}
|
||
|
||
// 3. 按钮组：在右侧容器内，保留原有样式
|
||
.button-group {
|
||
display: flex;
|
||
position: relative;
|
||
gap: 2px;
|
||
width: 283px;
|
||
align-items: center;
|
||
height: 24px;
|
||
background: #ecf4fe;
|
||
border-radius: 12px;
|
||
// 移除原margin-right，由右侧容器统一控制
|
||
margin: 0;
|
||
|
||
.item-button {
|
||
cursor: pointer;
|
||
width: 142px;
|
||
height: 24px;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 12px;
|
||
color: #0b58ff;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
font-style: normal;
|
||
letter-spacing: 8px; // 确保文字间距生效
|
||
padding-left: 8px; // 抵消letter-spacing导致的文字左偏
|
||
}
|
||
|
||
.item-button.active {
|
||
width: 142px;
|
||
height: 24px;
|
||
background: #3071ff;
|
||
border-radius: 12px;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|