柱状图格式修改
This commit is contained in:
parent
1bd066c3f8
commit
94c6812662
|
|
@ -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>
|
||||
|
|
@ -331,86 +331,263 @@ 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)
|
||||
|
||||
const option = {
|
||||
tooltip: { trigger: 'axis' },
|
||||
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 20,
|
||||
data: ['装备总数', '工具总数'],
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
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 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: 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: {
|
||||
type: 'value',
|
||||
data: yAxisTicks,
|
||||
name: '数量（个）',
|
||||
nameTextStyle: { fontSize: 14 },
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '装备总数',
|
||||
type: 'bar',
|
||||
barWidth: 35,
|
||||
barGap: '0%', // ← 两个柱子紧贴
|
||||
barCategoryGap: '0%', // ← 类目间无空隙
|
||||
itemStyle: {
|
||||
color: '#5470C6',
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
},
|
||||
data: equipTotals,
|
||||
},
|
||||
{
|
||||
name: '工具总数',
|
||||
type: 'bar',
|
||||
barWidth: 35,
|
||||
barGap: '0%',
|
||||
barCategoryGap: '0%',
|
||||
itemStyle: {
|
||||
color: '#91CC75',
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
},
|
||||
data: toolTotals,
|
||||
},
|
||||
],
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
barChart.setOption(option)
|
||||
},
|
||||
|
||||
// 动态生成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
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
top: 0,
|
||||
right: 20,
|
||||
data: series.map(s => s.name), // 动态设置图例数据
|
||||
},
|
||||
|
||||
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)
|
||||
|
||||
// 监听图例点击事件
|
||||
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 }
|
||||
};
|
||||
}
|
||||
|
||||
// 更新y轴配置
|
||||
barChart.setOption({
|
||||
yAxis: newYAxisConfig
|
||||
});
|
||||
|
||||
// 更新系列数据
|
||||
const newSeries = [];
|
||||
|
||||
// 更新装备总数系列（如果显示）
|
||||
if (params.selected['装备总数']) {
|
||||
newSeries.push({
|
||||
name: '装备总数',
|
||||
data: showBothSeries ? mappedEquipTotals : equipTotals
|
||||
});
|
||||
}
|
||||
|
||||
// 更新工具总数系列（如果显示）
|
||||
if (params.selected['工具总数']) {
|
||||
newSeries.push({
|
||||
name: '工具总数',
|
||||
data: showBothSeries ? mappedToolTotals : toolTotals
|
||||
});
|
||||
}
|
||||
|
||||
barChart.setOption({
|
||||
series: newSeries
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -523,4 +700,4 @@ export default {
|
|||
.scroll-list li.odd {
|
||||
background-color: #ebf8f3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue