diff --git a/src/views/EquipmentLedger/components/EquAnalysis.vue b/src/views/EquipmentLedger/components/EquAnalysis.vue index 3e7a3582..1cfdbf04 100644 --- a/src/views/EquipmentLedger/components/EquAnalysis.vue +++ b/src/views/EquipmentLedger/components/EquAnalysis.vue @@ -175,6 +175,7 @@ export default { if (res4.data && res4.data.length > 0) { this.dataMap.major = res4.data.map((item) => ({ + ...item, name: item.type, value: item.total, })) @@ -184,6 +185,7 @@ export default { const res5 = await getTenMajorApi(this.queryParams) if (res5.data && res5.data.length > 0) { this.dataMap.process = res5.data.map((item) => ({ + ...item, name: item.type, value: item.total, })) @@ -216,10 +218,17 @@ export default { }, legend: { orient: 'vertical', - right: '5%', + right: '-1%', top: 'center', itemWidth: 10, itemHeight: 10, + itemGap: 15, + textStyle: { + // 👈 图例文字样式 + fontSize: 16, // 字体大小 + color: '#3F3F3F', + lineHeight: 20, // 行高(让文字更松一点) + }, formatter: (name) => { const item = this.chartData.find((i) => i.name === name) const percent = item.value > 0 && this.total > 0 ? ((item.value / this.total) * 100).toFixed(2) : '0.00' @@ -230,7 +239,7 @@ export default { { type: 'pie', radius: ['60%', '80%'], - center: ['35%', '50%'], + center: ['25%', '50%'], avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false }, @@ -240,7 +249,7 @@ export default { graphic: [ { type: 'group', - left: '35%', // 与饼图 center[0] 保持一致 + left: '25%', // 与饼图 center[0] 保持一致 top: '42%', bounding: 'raw', children: [ @@ -283,7 +292,11 @@ export default { renderBarChart() { const list = this.dataMap[this.activeTab2] const xData = list.map((i) => i.name) - const yData = list.map((i) => i.value) + const yData = list.map((item) => ({ + value: item.value, + proType: item.proType, + })) + console.log('🚀 ~ yData:', yData) const option = { tooltip: { @@ -296,7 +309,7 @@ export default { return `
${item.name}
-
数量:${item.value}
+
总数:${item.value}
` }, @@ -332,18 +345,22 @@ export default { { type: 'bar', data: yData, - barWidth: 24, + barWidth: 20, itemStyle: { borderRadius: [12, 12, 0, 0], color: (params) => { - const colors = [ - ['#5DA9FF', '#8EC5FF'], - ['#4ED6C8', '#7BE7D7'], - ['#FDBA4F', '#FFD78A'], - ] + const colorMap = { + 1: ['#5DA9FF', '#8EC5FF'], // 专业1 + 2: ['#4ED6C8', '#7BE7D7'], // 专业2 + 3: ['#FDBA4F', '#FFD78A'], // 专业3 + } + + const type = params.data.proType + const colors = colorMap[type] || ['#5DA9FF', '#8EC5FF'] // 兜底色 + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: colors[params.dataIndex % 3][0] }, - { offset: 1, color: colors[params.dataIndex % 3][1] }, + { offset: 0, color: colors[0] }, + { offset: 1, color: colors[1] }, ]) }, },