167 lines
4.4 KiB
Vue
167 lines
4.4 KiB
Vue
<template>
|
|
<div class="chart-container">
|
|
<div class="tabs">
|
|
<button
|
|
:class="{ active: currentTab === 'month' }"
|
|
@click="switchTab('month')">月</button>
|
|
<button
|
|
:class="{ active: currentTab === 'quarter' }"
|
|
@click="switchTab('quarter')">季</button>
|
|
<button
|
|
:class="{ active: currentTab === 'year' }"
|
|
@click="switchTab('year')">年</button>
|
|
</div>
|
|
<div ref="chart" style="width: 520px; height: 300px;"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import { currentGET } from "api/modules";
|
|
export default {
|
|
name: 'BarChart',
|
|
// 修改数据结构和series配置
|
|
data() {
|
|
return {
|
|
currentTab: 'month',
|
|
chartData: {
|
|
month: {
|
|
xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
seriesData:[],
|
|
},
|
|
quarter: {
|
|
xData: ['一季度', '二季度', '三季度', '四季度'],
|
|
seriesData: [
|
|
]
|
|
},
|
|
year: {
|
|
xData: ['2022', '2023', '2024', '2025', '2026'],
|
|
seriesData: [
|
|
]
|
|
}
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
getData() {
|
|
currentGET("big11").then((res) => {
|
|
console.log(res);
|
|
if (res.code === 0) {
|
|
// this.chartData.month.seriesData = res.data.monthList
|
|
res.data.monthList.forEach((item, index) => {
|
|
let month = parseInt(item.months);
|
|
this.chartData.month.seriesData[month-1] = item;
|
|
})
|
|
// this.chartData.quarter.seriesData = res.data.quarterList;
|
|
res.data.quarterList.forEach((item, index) => {
|
|
let quarter = parseInt(item.quarters);
|
|
this.chartData.quarter.seriesData[quarter-1] = item;
|
|
})
|
|
// this.chartData.year.seriesData = res.data.yearList;
|
|
res.data.yearList.forEach((item, index) => {
|
|
let year = parseInt(item.years);
|
|
this.chartData.year.seriesData[year-2022] = item;
|
|
})
|
|
console.log('==========',this.chartData.year.seriesData);
|
|
this.$nextTick(() => {
|
|
this.initChart();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
switchTab(tab) {
|
|
this.currentTab = tab;
|
|
this.$nextTick(() => {
|
|
this.initChart();
|
|
});
|
|
},
|
|
initChart() {
|
|
const myChart = echarts.init(this.$refs.chart);
|
|
const { xData, seriesData } = this.chartData[this.currentTab];
|
|
|
|
// 在option配置中添加tooltip格式化
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: (params) => {
|
|
const dataItem = seriesData[params.dataIndex];
|
|
let tip = `${params.name}<br>总数: ${params.value}`;
|
|
for (const [code, count] of Object.entries(dataItem.faultCodes)) {
|
|
tip += `<br>${code}: ${count}次`;
|
|
}
|
|
return tip;
|
|
}
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
right: '4%',
|
|
top: '20%',
|
|
bottom: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData,
|
|
axisLabel: { color: '#000000' }
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#000000'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#3399FF'
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
data: seriesData.map(item => item.total), // 保持数值部分
|
|
type: 'bar',
|
|
barWidth: this.currentTab === 'month' ? 16 : 28, // 微调月份柱宽到16px
|
|
barCategoryGap: '-5%', // 间距从15%减少到10%
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0, color: '#6a99f8'
|
|
}, {
|
|
offset: 1, color: '#0b2149'
|
|
}])
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
position: relative;
|
|
}
|
|
|
|
.tabs {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
button {
|
|
background: rgba(25, 61, 112, 0.8);
|
|
border: 1px solid #2f6ed4;
|
|
color: #000000;
|
|
padding: 5px 15px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
button.active {
|
|
background: #2f6ed4;
|
|
border-color: #4a8df8;
|
|
}
|
|
</style> |