-
+
{{ index + 1 }}.
{{ item.deptAbbreviation }}
{{ item.applyUser }}
@@ -137,7 +137,7 @@
-
+
@@ -331,261 +331,168 @@ export default {
chart.setOption(option)
},
initBarChart() {
- const barDom = this.$refs.barRef
- const barChart = echarts.init(barDom)
-
- const companyNames = this.tableList.map((item) => item.companyName)
- const equipTotals = this.tableList.map((item) => item.maNum)
- const toolTotals = this.tableList.map((item) => item.toolNum)
-
- // 定义固定的y轴刻度
- const yAxisTicks = ['0', '200', '500', '1000', '10000', '100000', '200000+']
+ const barDom = this.$refs.barRef;
+ const barChart = echarts.init(barDom);
+
+ const companyNames = this.tableList.map((item) => item.companyName);
+ const equipTotals = this.tableList.map((item) => item.maNum);
+ const toolTotals = this.tableList.map((item) => item.toolNum);
+
+ // 双系列专用-固定刻度
+ const yAxisTicks = ['0', '200', '500', '1000', '10000', '100000', '200000+'];
+ const yAxisValues = [0, 200, 500, 1000, 10000, 100000, 200000];
+
+ // 双系列数值映射(预计算映射后的数据)
+ const mapToStepHeight = (value) => {
+ let i = 0;
+ while (i < yAxisValues.length - 1 && value > yAxisValues[i + 1]) i++;
+ const rangeStart = yAxisValues[i];
+ const rangeEnd = yAxisValues[i + 1] || yAxisValues[i];
+ const ratio = (value - rangeStart) / (rangeEnd - rangeStart || 1);
+ return i + ratio;
+ };
+ const mappedEquipTotals = equipTotals.map(mapToStepHeight);
+ const mappedToolTotals = toolTotals.map(mapToStepHeight);
+
+ // ---------------------- 初始化图表 ----------------------
+ const initShowEquip = equipTotals.some(v => v > 0);
+ const initShowTool = toolTotals.some(v => v > 0);
+ const initShowBoth = initShowEquip && initShowTool;
- // 定义刻度对应的实际数值
- const yAxisValues = [0, 200, 500, 1000, 10000, 100000, 200000]
-
- // 数据映射函数:将原始数据映射到对应的y轴刻度索引
- const mapDataToYAxis = (value) => {
- for (let i = 0; i < yAxisValues.length; i++) {
- if (value <= yAxisValues[i]) {
- return i
- }
- }
- return yAxisValues.length - 1 // 超过最大值的都映射到最后一个刻度
- }
-
- // 映射后的系列数据
- const mappedEquipTotals = equipTotals.map(mapDataToYAxis)
- const mappedToolTotals = toolTotals.map(mapDataToYAxis)
-
- // 判断是否同时显示两个系列
- const showBothSeries = equipTotals.some(val => val > 0) && toolTotals.some(val => val > 0)
-
- // 动态生成y轴配置
- let yAxisConfig
- if (showBothSeries) {
- // 同时显示两个系列时,使用固定刻度的category类型y轴
- yAxisConfig = {
- type: 'category',
- data: yAxisTicks,
- name: '数量(个)',
- nameTextStyle: { fontSize: 14 },
-
- axisTick: {
- show: true,
- alignWithLabel: true,
- length: 4
- },
-
- axisLabel: {
- fontSize: 12,
- margin: 8 // 增加标签与坐标轴的间距
- },
-
- // 调整位置
- offset: 0,
-
- // 强制将坐标轴显示在网格边缘
- boundaryGap: false,
-
- // 分割线配置
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#e0e0e0'
- }
- }
- }
- } else {
- // 只显示一个系列时,使用value类型y轴
- yAxisConfig = {
- type: 'value',
- name: '数量(个)',
- nameTextStyle: { fontSize: 14 }
- }
- }
-
- // 动态生成series配置
- const series = []
-
- // 添加装备总数系列(如果有数据)
- if (equipTotals.some(val => val > 0)) {
- series.push({
- name: '装备总数',
- type: 'bar',
- barWidth: 35,
- barGap: '0%', // ← 两个柱子紧贴
- barCategoryGap: '0%', // ← 类目间无空隙
- itemStyle: {
- color: '#5470C6',
- borderRadius: [4, 4, 0, 0],
- },
- data: showBothSeries ? mappedEquipTotals : equipTotals,
- coordinateSystem: 'cartesian2d',
- xAxisIndex: 0,
- yAxisIndex: 0,
- })
- }
-
- // 添加工具总数系列(如果有数据)
- if (toolTotals.some(val => val > 0)) {
- series.push({
- name: '工具总数',
- type: 'bar',
- barWidth: 35,
- barGap: '0%',
- barCategoryGap: '0%',
- itemStyle: {
- color: '#91CC75',
- borderRadius: [4, 4, 0, 0],
- },
- data: showBothSeries ? mappedToolTotals : toolTotals,
- coordinateSystem: 'cartesian2d',
- xAxisIndex: 0,
- yAxisIndex: 0,
- })
- }
-
- const option = {
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- // 自定义tooltip显示原始数值
- let result = params[0].name + '
'
- params.forEach(param => {
- // 获取原始数据
- const originalValue = param.seriesName === '装备总数'
- ? equipTotals[param.dataIndex]
- : toolTotals[param.dataIndex]
- result += `${param.seriesName}: ${originalValue}个
`
- })
- return result
- }
- },
-
+ barChart.setOption({
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params) => {
+ let res = `${params[0].name}
`;
+ params.forEach(p => {
+ const val = p.seriesName === '装备总数'
+ ? equipTotals[p.dataIndex]
+ : toolTotals[p.dataIndex];
+ res += `${p.seriesName}: ${val}个
`;
+ });
+ return res;
+ }
+ },
+ // ✅ 永久双图例,永不消失
legend: {
top: 0,
right: 20,
- data: series.map(s => s.name), // 动态设置图例数据
- },
-
- grid: {
- left: '3%',
- right: '3%',
- bottom: '3%',
- top: '15%',
- containLabel: true,
- },
-
- xAxis: {
+ data: ['装备总数', '工具总数'],
+ selected: {
+ '装备总数': initShowEquip,
+ '工具总数': initShowTool
+ }
+ },
+ grid: { left: '3%', right: '3%', bottom: '3%', top: '15%', containLabel: true },
+ xAxis: {
type: 'category',
- data: companyNames,
-
- axisLabel: {
- fontSize: 13,
- interval: 0, // 强制全部显示
- lineHeight: 16,
- formatter: function (name) {
- const maxLen = 3 // 每行6字符,可调整
- if (name.length <= maxLen) return name
- const rows = Math.ceil(name.length / maxLen)
- let res = ''
- for (let i = 0; i < rows; i++) {
- res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
- }
- return res
- },
- },
- },
-
- yAxis: yAxisConfig, // 使用动态生成的y轴配置
-
- series: series, // 使用动态生成的系列配置
- }
-
- barChart.setOption(option)
-
- // 监听图例点击事件
+ data: companyNames,
+ axisLabel: {
+ fontSize: 13, interval: 0, lineHeight: 16,
+ formatter: (name) => {
+ if (name.length <= 4) return name;
+ let res = '';
+ for (let i = 0; i < Math.ceil(name.length / 4); i++) {
+ res += name.substring(i * 4, (i + 1) * 4) + '\n';
+ }
+ return res;
+ }
+ }
+ },
+ yAxis: initShowBoth
+ ? { // 双系列-固定阶梯刻度
+ type: 'value',
+ name: '数量(个)',
+ nameTextStyle: { fontSize: 14 },
+ min: 0, max: 6, interval: 1,
+ axisLabel: { fontSize:12, margin:8, formatter: idx => yAxisTicks[Math.floor(idx)] },
+ splitLine: { lineStyle: { type: 'dashed', color: '#e0e0e0' } }
+ }
+ : { // 单系列-原生线性轴
+ type: 'value',
+ name: '数量(个)',
+ nameTextStyle: { fontSize: 14 }
+ },
+ series: [
+ ...(initShowEquip ? [{
+ name: '装备总数', type: 'bar', barWidth:35,
+ barGap:'0%', barCategoryGap:'0%',
+ itemStyle: { color:'#5470C6', borderRadius:[4,4,0,0] },
+ data: initShowBoth ? mappedEquipTotals : equipTotals
+ }] : []),
+ ...(initShowTool ? [{
+ name: '工具总数', type: 'bar', barWidth:35,
+ barGap:'0%', barCategoryGap:'0%',
+ itemStyle: { color:'#91CC75', borderRadius:[4,4,0,0] },
+ data: initShowBoth ? mappedToolTotals : toolTotals
+ }] : [])
+ ]
+ }, true);
+
+ // ---------------------- 严格按你指定格式编写【核心修复Y轴不生效问题】 ----------------------
barChart.on('legendselectchanged', (params) => {
// 获取当前显示的系列
const selectedSeries = Object.keys(params.selected).filter(key => params.selected[key]);
-
// 判断是否同时显示两个系列
const showBothSeries = selectedSeries.length > 1;
- // 重新生成y轴配置
+ // ✅ 核心修复:单系列清空所有固定配置,强制线性轴生效
let newYAxisConfig;
if (showBothSeries) {
- // 同时显示两个系列时,使用固定刻度的category类型y轴
- newYAxisConfig = {
- type: 'category',
- data: yAxisTicks,
- name: '数量(个)',
- nameTextStyle: { fontSize: 14 },
-
- axisTick: {
- show: true,
- alignWithLabel: true,
- length: 4
- },
-
- axisLabel: {
- fontSize: 12,
- margin: 8 // 增加标签与坐标轴的间距
- },
-
- // 调整位置
- offset: 0,
-
- // 强制将坐标轴显示在网格边缘
- boundaryGap: false,
-
- // 分割线配置
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#e0e0e0'
- }
- }
- };
- } else {
- // 只显示一个系列时,使用value类型y轴
+ // 双系列:固定阶梯刻度(完整配置)
newYAxisConfig = {
type: 'value',
name: '数量(个)',
- nameTextStyle: { fontSize: 14 }
+ nameTextStyle: { fontSize: 14 },
+ min: 0, // 固定最小值
+ max: 6, // 固定最大值
+ interval: 1, // 固定刻度间隔
+ axisTick: { show: true, alignWithLabel: true, length: 4 },
+ axisLabel: { fontSize: 12, margin:8, formatter: idx => yAxisTicks[Math.floor(idx)] },
+ splitLine: { lineStyle: { type: 'dashed', color: '#e0e0e0' } }
+ };
+ } else {
+ // ✅ 单系列:彻底清空所有固定配置,强制原生线性轴【必生效】
+ newYAxisConfig = {
+ type: 'value',
+ name: '数量(个)',
+ nameTextStyle: { fontSize: 14 },
+ min: undefined, // 清空固定最小值
+ max: undefined, // 清空固定最大值
+ interval: undefined, // 清空固定间隔
+ axisLabel: { // 清空自定义格式化,恢复原生数值显示
+ fontSize: 12,
+ margin: 8,
+ formatter: undefined
+ },
+ splitLine: { lineStyle: { type: 'solid', color: '#e0e0e0' } }
};
}
- // 更新y轴配置
- barChart.setOption({
- yAxis: newYAxisConfig
- });
+ // ✅ 关键:更新Y轴时添加 replaceMerge: true,强制覆盖旧配置(解决不生效核心)
+ barChart.setOption({ yAxis: newYAxisConfig }, { replaceMerge: ['yAxis'], silent: true });
// 更新系列数据
const newSeries = [];
-
- // 更新装备总数系列(如果显示)
if (params.selected['装备总数']) {
newSeries.push({
name: '装备总数',
+ type: 'bar', barWidth:35,
+ barGap:'0%', barCategoryGap:'0%',
+ itemStyle: { color:'#5470C6', borderRadius:[4,4,0,0] },
data: showBothSeries ? mappedEquipTotals : equipTotals
});
}
-
- // 更新工具总数系列(如果显示)
if (params.selected['工具总数']) {
newSeries.push({
name: '工具总数',
+ type: 'bar', barWidth:35,
+ barGap:'0%', barCategoryGap:'0%',
+ itemStyle: { color:'#91CC75', borderRadius:[4,4,0,0] },
data: showBothSeries ? mappedToolTotals : toolTotals
});
}
-
- barChart.setOption({
- series: newSeries
- });
+ barChart.setOption({ series: newSeries });
});
}
},