修改
This commit is contained in:
‘937886381’
@@ -8,7 +8,7 @@
|
||||
<div class="bottom"
|
||||
style="height: 227px; margin-left: 16px; display: flex; width: 100%;background-color: rgba(249, 252, 255, 1);">
|
||||
<KFAPMiddleBar :chartData="{
|
||||
allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData
|
||||
allPlaceNames, incomeValueData, profitListData, costValueData, costCompletedData
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -51,11 +51,13 @@ export default {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.middleChartData.map(item => item.name).filter(Boolean);
|
||||
},
|
||||
profitProportionData() {
|
||||
profitListData() {
|
||||
if (!Array.isArray(this.middleChartData)) return [];
|
||||
return this.PlaceNames.map(place => {
|
||||
const target = this.middleChartData.find(item => item.name === place);
|
||||
return target?.profitProportion || 0;
|
||||
console.log('target?.profit', target?.profit);
|
||||
|
||||
return target?.profit || 0;
|
||||
});
|
||||
},
|
||||
incomeValueData() {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="right-container">
|
||||
<div class="legend">
|
||||
<span class="legend-item">
|
||||
<span class="legend-icon line yield"></span>
|
||||
<span class="legend-icon square yield"></span>
|
||||
利润
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
@@ -60,39 +60,13 @@ export default {
|
||||
// 原有计算属性（allPlaceNames、profitProportionData 等）保持不变
|
||||
// 新增：定义图表 series 配置
|
||||
chartSeries() {
|
||||
const { allPlaceNames, incomeValueData, profitProportionData, costValueData, costCompletedData } = this.chartData
|
||||
const { allPlaceNames, incomeValueData, profitListData, costValueData, costCompletedData } = this.chartData
|
||||
// 处理空数据默认值
|
||||
const incomeData = incomeValueData || Array(allPlaceNames.length).fill(0);
|
||||
const profitData = profitProportionData || Array(allPlaceNames.length).fill(0);
|
||||
const profitData = profitListData || Array(allPlaceNames.length).fill(0);
|
||||
const costData = costValueData || Array(allPlaceNames.length).fill(0);
|
||||
|
||||
return [
|
||||
// 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(255, 132, 0, 0)' }
|
||||
])
|
||||
},
|
||||
data: profitData,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
// 2. 营业收入：柱状图
|
||||
{
|
||||
name: '营业收入',
|
||||
@@ -100,26 +74,106 @@ export default {
|
||||
yAxisIndex: 0,
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
color: '#2889FF',
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
// 移除多余的 normal 层级，直接配置 color 渐变
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
|
||||
{ offset: 1, color: '#2889FF' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: '#2889FF',
|
||||
// borderRadius: [4, 4, 0, 0]
|
||||
// },
|
||||
data: incomeData
|
||||
},
|
||||
// 3. 成本：柱状图（动态颜色）
|
||||
{
|
||||
name: '成本',
|
||||
type: 'bar',
|
||||
stack: 'total', // 堆叠分组名（与利润保持一致）
|
||||
yAxisIndex: 0,
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
// 根据 safeFlag 动态返回不同的渐变色
|
||||
color: (params) => {
|
||||
const completed = costCompletedData?.[params.dataIndex] ?? 0;
|
||||
return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
|
||||
const dataIndex = params.dataIndex;
|
||||
const currentFlag = costCompletedData[dataIndex] || 0; // 默认为0（不达标）
|
||||
|
||||
// 达标时的渐变（绿色系）
|
||||
if (currentFlag === 1) {
|
||||
return {
|
||||
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)' } // 深绿
|
||||
]
|
||||
};
|
||||
}
|
||||
// 不达标时的渐变（橙色系）
|
||||
else {
|
||||
return {
|
||||
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]
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: costData
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
// lineStyle: {
|
||||
// color: 'rgba(40, 138, 255, .5)',
|
||||
// width: 2
|
||||
// },
|
||||
stack: 'total', // 堆叠分组名（与利润保持一致）
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
// 移除多余的 normal 层级，直接配置 color 渐变
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
|
||||
{ offset: 1, color: '#288aff' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: '#288aff',
|
||||
// borderRadius: [4, 4, 0, 0]
|
||||
// },
|
||||
data: profitData,
|
||||
},
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
@@ -65,8 +65,7 @@ export default {
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
borderColor: 2
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
@@ -86,8 +85,8 @@ export default {
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
borderColor: 'rgba(255, 132, 0, 1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
|
||||
@@ -66,8 +66,8 @@ export default {
|
||||
lineStyle: { color: 'rgba(91, 230, 190, 1)' },
|
||||
itemStyle: {
|
||||
color: 'rgba(91, 230, 190, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
borderColor: 'rgba(91, 230, 190, 1)',
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
@@ -86,8 +86,8 @@ export default {
|
||||
lineStyle: { color: 'rgba(255, 132, 0, 1)' },
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 132, 0, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
borderColor: 'rgba(255, 132, 0, 1)',
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.3,
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="right">
|
||||
<!-- 完成率颜色动态绑定 -->
|
||||
<div class="number" :style="{ 'color': item.completed === 0 ? '#FF8400' : 'rgba(54, 181, 138, .7)' }">
|
||||
{{ item.proportion !== null && item.proportion !== undefined ? (item.proportion * 100) + '%' : '0%' }}
|
||||
{{ item.proportion !== null && item.proportion !== undefined ? (item.proportion) + '%' : '0%' }}
|
||||
</div>
|
||||
<div class="title">完成率</div>
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -36,13 +36,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||||
<operatingLineBar style="height: 99%; width: 100%" />
|
||||
<operatingLineBar :chartData="chartData" style="height: 99%; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import operatingLineBar from './operatingLineBar.vue';
|
||||
import operatingLineBar from './operatingLineBarSale.vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { operatingLineBar },
|
||||
@@ -50,15 +52,185 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
activeButton: 0,
|
||||
itemList: [
|
||||
{ unit: "单价·元/m²", targetValue: 16, currentValue: 14.5, progress: 90 },
|
||||
{ unit: "净价·元/m²", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
{ unit: "销量·万m²", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
{ unit: "双镀面板·万m²", targetValue: 15, currentValue: 13.8, progress: 92 },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
// 根据按钮切换生成对应的 chartData
|
||||
chartData() {
|
||||
// 销量场景数据
|
||||
const salesData = {
|
||||
allPlaceNames: ['桐城', '合肥', '宜兴', '漳州', '自贡', '洛阳'], // x轴刻度
|
||||
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: [104, 96.7, 107.3, 97.1, 107.7, 93.8], // 完成率（%）
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
// 2. 目标（柱状图）
|
||||
{
|
||||
name: '目标',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0, // 左侧Y轴（万元）
|
||||
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: [50, 60, 55, 70, 65, 80] // 目标销量（万元）
|
||||
},
|
||||
// 3. 实际（柱状图，含达标状态）
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
// 达标状态：1=达标（绿色），0=未达标（橙色）
|
||||
const safeFlag = [1, 0, 1, 0, 1, 0];
|
||||
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: [52, 58, 59, 68, 70, 75] // 实际销量（万元）
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
const grossProfitData = {
|
||||
allPlaceNames: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
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>
|
||||
|
||||
@@ -131,25 +131,25 @@ export default {
|
||||
splitNumber: 4
|
||||
},
|
||||
// 右侧Y轴：利润占比（百分比）
|
||||
{
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
align: 'left'
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
splitNumber: 4
|
||||
}
|
||||
// {
|
||||
// type: 'value',
|
||||
// nameTextStyle: {
|
||||
// color: 'rgba(0, 0, 0, 0.45)',
|
||||
// fontSize: 12,
|
||||
// align: 'left'
|
||||
// },
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// axisTick: { show: false },
|
||||
// axisLabel: {
|
||||
// color: 'rgba(0, 0, 0, 0.45)',
|
||||
// fontSize: 12,
|
||||
// formatter: '{value}%'
|
||||
// },
|
||||
// splitLine: { show: false },
|
||||
// axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
// splitNumber: 4
|
||||
// }
|
||||
],
|
||||
series: chartSeries // 直接使用父组件传递的 series
|
||||
};
|
||||
|
||||
173
src/views/home/components/operatingLineBarSale.vue
Normal file
173
src/views/home/components/operatingLineBarSale.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
myChart: null // 存储图表实例，避免重复创建
|
||||
};
|
||||
},
|
||||
props: {
|
||||
// 明确接收的props结构，增强可读性
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
series: [],
|
||||
allPlaceNames: []
|
||||
}),
|
||||
// 校验数据格式
|
||||
validator: (value) => {
|
||||
return Array.isArray(value.series) && Array.isArray(value.allPlaceNames);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.updateChart();
|
||||
});
|
||||
},
|
||||
|
||||
// 新增：监听 chartData 变化
|
||||
watch: {
|
||||
// 深度监听数据变化，仅更新图表配置（不销毁实例）
|
||||
chartData: {
|
||||
handler() {
|
||||
console.log(this.chartData,'chartData');
|
||||
|
||||
this.updateChart();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true // 初始化时立即执行
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateChart() {
|
||||
const chartDom = this.$refs.cockpitEffChip;
|
||||
if (!chartDom) {
|
||||
console.error('图表容器未找到！');
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.myChart) {
|
||||
this.myChart.dispose();
|
||||
}
|
||||
|
||||
this.myChart = echarts.init(chartDom);
|
||||
const { allPlaceNames, series } = this.chartData || {};
|
||||
|
||||
// 处理空数据
|
||||
const xData = allPlaceNames || [];
|
||||
const chartSeries = series || []; // 父组件传递的 series
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
},
|
||||
// formatter: (params) => {
|
||||
// let html = `${params[0].axisValue}<br/>`;
|
||||
// params.forEach(item => {
|
||||
// const unit = item.seriesName === '完成率' ? '%' : (
|
||||
// ['产量', '销量'].includes(this.$parent.selectedProfit) ? '片' : '万元'
|
||||
// );
|
||||
// html += `${item.marker} ${item.seriesName}: ${item.value}${unit}<br/>`;
|
||||
// });
|
||||
// return html;
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
right: 70,
|
||||
left: 40,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
padding: [5, 0, 0, 0]
|
||||
},
|
||||
data: xData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
// 左侧Y轴：营业收入、成本（单位万元）
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
min: 0,
|
||||
max: (value) => Math.ceil((value.max || 0) * 1.1),
|
||||
scale: false,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
splitNumber: 4
|
||||
},
|
||||
// 右侧Y轴：利润占比（百分比）
|
||||
{
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
align: 'left'
|
||||
},
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
fontSize: 12,
|
||||
formatter: '{value}%'
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
splitNumber: 4
|
||||
}
|
||||
],
|
||||
series: chartSeries // 直接使用父组件传递的 series
|
||||
};
|
||||
|
||||
option && this.myChart.setOption(option);
|
||||
|
||||
// 窗口缩放适配和销毁逻辑保持不变
|
||||
window.addEventListener('resize', () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
|
||||
this.$once('hook:destroyed', () => {
|
||||
window.removeEventListener('resize', () => {
|
||||
this.myChart && this.myChart.resize();
|
||||
});
|
||||
this.myChart && this.myChart.dispose();
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -41,15 +41,61 @@ export default {
|
||||
chart: null,
|
||||
parentItemList: [
|
||||
{
|
||||
name: "利润总额", targetValue: 0, value: 0, proportion: 0,
|
||||
route:'profitAnalysis'
|
||||
},
|
||||
{ name: "毛利率", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
|
||||
{ name: "单价", targetValue: 0, value: 0, proportion: 0, route: 'cost/cost' },
|
||||
{ name: "净价", targetValue: 0, value: 0, proportion: 0, route: 'cost/cost' },
|
||||
{ name: "销量", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
|
||||
{ name: "双镀面板", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
|
||||
{ name: "溢价产品销量", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' }
|
||||
name: "利润总额",
|
||||
targetValue: 50,
|
||||
value: 58,
|
||||
proportion: 116,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 实际超目标，达标
|
||||
},
|
||||
{
|
||||
name: "毛利率",
|
||||
targetValue: 30,
|
||||
value: 28.5,
|
||||
proportion: 95,
|
||||
route: 'profitAnalysis',
|
||||
completed: 0 // 未达30%目标，不达标
|
||||
},
|
||||
{
|
||||
name: "单价",
|
||||
targetValue: 12,
|
||||
value: 12.5,
|
||||
proportion: 104.2,
|
||||
route: 'cost/cost',
|
||||
completed: 1 // 单价达标
|
||||
},
|
||||
{
|
||||
name: "净价",
|
||||
targetValue: 9,
|
||||
value: 8.8,
|
||||
proportion: 97.8,
|
||||
route: 'cost/cost',
|
||||
completed: 0 // 未达目标，不达标
|
||||
},
|
||||
{
|
||||
name: "销量",
|
||||
targetValue: 100,
|
||||
value: 120,
|
||||
proportion: 120,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 销量超额达标
|
||||
},
|
||||
{
|
||||
name: "双镀面板",
|
||||
targetValue: 30,
|
||||
value: 29,
|
||||
proportion: 96.7,
|
||||
route: 'profitAnalysis',
|
||||
completed: 0 // 略低目标，不达标
|
||||
},
|
||||
{
|
||||
name: "溢价产品销量",
|
||||
targetValue: 15,
|
||||
value: 18,
|
||||
proportion: 120,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 超额达标
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -354,7 +354,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.cityLine {
|
||||
|
||||
@@ -67,13 +67,22 @@ export default {
|
||||
return {
|
||||
chart: null,
|
||||
parentItemList: [
|
||||
{ name: "月度", targetValue: 0, value: 0, proportion: 0, route:'profitAnalysis' },
|
||||
{ name: "年度", targetValue: 0, value: 0, proportion: 0, route: 'profitAnalysis' },
|
||||
// { unit: "单价", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
// { unit: "净价", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
// { unit: "销量", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
// { unit: "双镀面板", targetValue: 15, currentValue: 13.8, progress: 92 },
|
||||
// { unit: "溢价产品销量", targetValue: 15, currentValue: 13.8, progress: 92 }
|
||||
{
|
||||
name: "月度",
|
||||
targetValue: 80,
|
||||
value: 76,
|
||||
proportion: 95,
|
||||
route: 'profitAnalysis',
|
||||
completed: 0 // 未达目标值，不达标
|
||||
},
|
||||
{
|
||||
name: "年度",
|
||||
targetValue: 900,
|
||||
value: 920,
|
||||
proportion: 102.2,
|
||||
route: 'profitAnalysis',
|
||||
completed: 1 // 超出目标值，达标
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -136,7 +136,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -50,6 +50,8 @@
|
||||
|
||||
<script>
|
||||
import operatingLineBar from './operatingBottomLineBar.vue';
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { operatingLineBar },
|
||||
@@ -69,7 +71,7 @@ export default {
|
||||
// 核心：将原计算属性改为方法，主动处理数据
|
||||
getChartData() {
|
||||
const currentKey = this.selectedProfit
|
||||
console.log(this.formattedData,'22222');
|
||||
// console.log(this.formattedData,'22222');
|
||||
|
||||
// 严格判断数据有效性
|
||||
if (
|
||||
@@ -89,13 +91,23 @@ export default {
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
|
||||
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: targetData.map(item => item.proportion),
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
@@ -117,11 +129,42 @@ export default {
|
||||
yAxisIndex: 0,
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
// 根据 safeFlag 动态返回不同的渐变色
|
||||
color: (params) => {
|
||||
const completed = targetData[params.dataIndex].completed;
|
||||
return completed === 1 ? 'rgba(255, 132, 0, 1)' : 'rgba(40, 203, 151, 1)';
|
||||
const dataIndex = params.dataIndex;
|
||||
const currentFlag = targetData[dataIndex] || 0; // 默认为0（不达标）
|
||||
|
||||
// 达标时的渐变（绿色系）
|
||||
if (currentFlag === 1) {
|
||||
return {
|
||||
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)' } // 深绿
|
||||
]
|
||||
};
|
||||
}
|
||||
// 不达标时的渐变（橙色系）
|
||||
else {
|
||||
return {
|
||||
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]
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: targetData.map(item => item.value)
|
||||
}
|
||||
|
||||
@@ -63,7 +63,7 @@ export default {
|
||||
xData.push(place);
|
||||
saleData.push(item.saleValue); // 销量值（保留两位小数）
|
||||
productData.push(item.productValue);
|
||||
rateData.push(item.saleAndProductProportion *100 ); // 转为百分比后保留两位小数
|
||||
rateData.push(Number((item.saleAndProductProportion * 100).toFixed(2))); // 转为百分比后保留两位小数
|
||||
});
|
||||
}
|
||||
|
||||
@@ -204,7 +204,7 @@ export default {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||||
{ offset: 1, color: 'rgba(255, 132, 0, 0)' }
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: rateData, // 动态产销率数据
|
||||
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -146,7 +146,7 @@ export default {
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(40, 203, 151, 1));
|
||||
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), #cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
@@ -187,7 +187,7 @@ export default {
|
||||
height: 46px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(255, 0, 0, 0),
|
||||
rgba(40, 203, 151, 1));
|
||||
#cbcbcb);
|
||||
}
|
||||
|
||||
.left,
|
||||
|
||||
Reference in New Issue
Block a user