init

src/views/indexs/right-center.vue

@@ -0,0 +1,167 @@
+<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: 'white' }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: 'white'
+          },
+          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: #fff;
+  padding: 5px 15px;
+  margin-right: 10px;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+button.active {
+  background: #2f6ed4;
+  border-color: #4a8df8;
+}
+</style>