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-11-12 16:56:14 +08:00
commit 1ea62af1d6
1135 changed files with 109385 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/views/home/costComponents/costBaseBarChart.vue Normal file
View File

@@ -0,0 +1,236 @@
<template>
<div ref="cockpitEffChip" id="coreLineChart" style="width: 100%; height: 500px;"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
components: {},
data() {
return {};
},
mounted() {
this.$nextTick(() => {
this.initData();
});
},
methods: {
initData() {
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
const myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
// 优化tooltip内容，区分各系列含义
formatter: (params) => {
let html = `${params[0].axisValue}<br/>`;
params.forEach(item => {
// 直接使用系列名，无需映射，仅保留单位判断
html += `${item.marker} ${item.seriesName}: ${item.value}${item.seriesName === '完成率' ? '%' : '片'}<br/>`;
});
return html;
}
},
grid: {
top: 30,
bottom: 30, // 增大底部间距，避免柱子与X轴标签重叠
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: ['漳州', '桐城', '合肥', '宜兴', '自贡', '洛阳']
}
],
yAxis: [
// 左侧Y轴：目标/达标/未达标（数量，单位“片”）
{
type: 'value',
name: '元',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
align: 'right'
},
min: 0, // 最小值设0，确保柱子从X轴底部开始，不超过X轴
max: (value) => Math.ceil(value.max * 1.1), // 最大值留10%余量，避免柱子顶满
scale: false, // 关闭缩放，强制从0开始
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',
// // name: '%',
// nameTextStyle: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12,
// align: 'left'
// },
// min: 0,
// max: 100, // 完成率最大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: [
// 1. 完成率：折线图（绑定右侧百分比Y轴）
// {
// 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(255, 132, 0, 0)' }
// ])
// },
// data: [65, 78, 52, 85, 60, 95, 72], // 完成率数据（0-100）
// symbol: 'circle', // 数据点为圆形
// symbolSize: 6 // 数据点大小
// },
// 2. 目标：柱状图（绑定左侧数量Y轴）
{
name: '销量',
type: 'bar',
yAxisIndex: 0,
barWidth: 24,
// 关键修复：label 直接放在 series 下，而非 itemStyle 内
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: 'rgba(75, 157, 255, 1)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [200, 280, 180, 300, 220, 350]
},
// 3. 达标：柱状图（绑定左侧数量Y轴）
{
name: '产量',
type: 'bar',
yAxisIndex: 0,
barWidth: 24,
// 关键修复：label 直接放在 series 下，而非 itemStyle 内
itemStyle: {
// 移除多余的 normal 层级，直接配置 color 渐变
color: {
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)' }
]
},
borderRadius: [4, 4, 0, 0],
borderWidth: 0
},
data: [130, 220, 95, 255, 132, 332] // 达标数据（小于目标）
},
// 4. 未达标：柱状图（绑定左侧数量Y轴）
// {
// name: '未达标',
// type: 'bar',
// yAxisIndex: 0,
// barWidth: 18,
// itemStyle: {
// color: 'rgba(249, 164, 74, 1)',
// borderRadius: [4, 4, 0, 0],
// borderWidth: 0
// },
// data: [70, 60, 85, 45, 88, 18, 78] // 未达标数据（目标-达标）
// }
],
// 图例：区分各系列，点击可控制显示隐藏
// legend: {
// top: 0,
// left: 'center',
// itemWidth: 12,
// itemHeight: 8,
// textStyle: {
// color: 'rgba(0, 0, 0, 0.45)',
// fontSize: 12
// },
// data: ['完成率', '目标', '达标', '未达标']
// }
};
option && myChart.setOption(option);
// 窗口缩放适配
window.addEventListener('resize', () => {
myChart.resize();
});
// 组件销毁清理
this.$once('hook:destroyed', () => {
window.removeEventListener('resize', () => {
myChart.resize();
});
myChart.dispose();
});
}
},
};
</script>