oa二期内容更新

ruoyi-ui/src/views/dashboard/BarChart.vue

@@ -1,102 +1,134 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
+import * as echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from './mixins/resize';
 
 export default {
   mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: 'chart',
     },
     width: {
       type: String,
-      default: '100%'
+      default: '100%',
     },
     height: {
       type: String,
-      default: '300px'
-    }
+      default: '800px',
+    },
+    projectList: {
+      type: Array,
+      required: true,
+      default: [
+        { projectName: 'Project A', laborCost: 1500, color: '#7cb5ec' },
+        { projectName: 'Project B', laborCost: 800, color: '#434348' },
+        { projectName: 'Project C', laborCost: 1200, color: '#90ed7d' },
+        { projectName: 'Project D', laborCost: 1800, color: '#f7a35c' },
+        { projectName: 'Project E', laborCost: 600, color: '#8085e9' },
+      ]
+    }, // 新增prop
   },
   data() {
     return {
-      chart: null
-    }
+      chart: null,
+      colors: [], // 用于存储柱子颜色
+      laborCosts: [], // 用于存储人工成本数据
+      projectNames: [], // 用于存储项目名称
+    };
+  },
+  watch: {
+    projectList: {
+      handler(newVal) {
+        this.updateData(newVal);
+        this.setOption(); // 当projectList变化时更新图表选项
+      },
+      deep: true,
+      immediate: true, // 立即执行一次handler，确保组件创建时也更新图表
+    },
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.updateData(this.projectList); // 初始化时更新数据
+      this.setOption(); // 设置图表选项
+    },
+    updateData(projectList) {
+      this.colors = projectList.map((item) => item.color);
+      this.laborCosts = projectList.map((item) => item.laborCost);
+      this.projectNames = projectList.map((item) => item.projectName.replace(/(.{5})/g, '$1\n'));
+    },
+    setOption() {
       this.chart.setOption({
         tooltip: {
           trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+          axisPointer: {type: 'shadow'},
         },
         grid: {
           top: 10,
           left: '2%',
-          right: '2%',
+          right: '8%', // 增加右边距以适应标签
           bottom: '3%',
-          containLabel: true
+          containLabel: true,
         },
-        xAxis: [{
+        xAxis: {
+          max: 'dataMax',
+          name: '人天', // 设置横坐标名称
+          nameLocation: 'middle', // 横坐标名称的位置
+          nameGap: 25, // 横坐标名称与轴线的距离
+        },
+        yAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
+          data: this.projectNames,
+          inverse: true,
+          animationDuration: 300,
+          animationDurationUpdate: 300,
+          axisLabel: {
+            rotate: 45, // 设置标签旋转角度，正值表示顺时针旋转
+            interval: 0, // 强制显示所有标签
           }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
-}
+        },
+        series: [
+          {
+            realtimeSort: true,
+            type: 'bar',
+            data: this.laborCosts,
+            label: {
+              show: true,
+              position: 'right',
+              valueAnimation: true,
+            },
+            itemStyle: {
+              color: (params) => this.colors[params.dataIndex], // 应用颜色
+            },
+          },
+        ],
+        legend: {
+          show: true,
+        },
+        animationDuration: 6000,
+        animationDurationUpdate: 3000,
+        animationEasing: 'linear',
+        animationEasingUpdate: 'linear',
+      });
+    },
+  },
+};
 </script>