柱状图用百分比实现非线性结构
This commit is contained in:
parent
94c6812662
commit
8de15e50dd
|
|
@ -88,7 +88,7 @@
|
|||
<ul class="scroll-list" ref="list">
|
||||
<li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="width: 65%">
|
||||
<div style="width: 65%">
|
||||
<span>{{ index + 1 }}. </span>
|
||||
<span>{{ item.deptAbbreviation }} </span>
|
||||
<span>{{ item.applyUser }} </span>
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 柱状图 -->
|
||||
<div v-else ref="barRef" style="width: 100%; height: calc(100vh - 580px); margin-top: 20px"></div>
|
||||
<div v-else ref="barRef" style="width: 100%; height: calc(100vh - 480px); margin-top: 20px"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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 + '<br/>'
|
||||
params.forEach(param => {
|
||||
// 获取原始数据
|
||||
const originalValue = param.seriesName === '装备总数'
|
||||
? equipTotals[param.dataIndex]
|
||||
: toolTotals[param.dataIndex]
|
||||
result += `${param.seriesName}: ${originalValue}个<br/>`
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
|
||||
barChart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (params) => {
|
||||
let res = `${params[0].name}<br/>`;
|
||||
params.forEach(p => {
|
||||
const val = p.seriesName === '装备总数'
|
||||
? equipTotals[p.dataIndex]
|
||||
: toolTotals[p.dataIndex];
|
||||
res += `${p.seriesName}: ${val}个<br/>`;
|
||||
});
|
||||
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 });
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue