整合前端

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

@@ -0,0 +1,142 @@
+<template>
+  <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';
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      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,
+      colors: [], // 用于存储柱子颜色
+      laborCosts: [], // 用于存储人工成本数据
+      projectNames: [], // 用于存储项目名称
+    };
+  },
+  watch: {
+    projectList: {
+      handler(newVal) {
+        this.updateData(newVal);
+        if (this.chart) {  // 确保图表已经初始化
+          this.setOption();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+
+  methods: {
+    initChart() {
+      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' },
+          formatter: (params) => { // 自定义 tooltip 格式
+            let { dataIndex } = params[0]; // 获取鼠标悬停的索引
+            let projectName = this.projectNames[dataIndex]; // 获取对应的项目名称
+            let laborCost = this.laborCosts[dataIndex]; // 获取对应的人工成本
+            return `${projectName}<br/>人工成本: ${laborCost} 人天`; // 显示项目名称和人工成本
+          },
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          max: 'dataMax',
+          name: '人天',
+          nameLocation: 'middle',
+          nameGap: 25,
+        },
+        yAxis: {
+          type: 'category',
+          data: this.projectNames,
+          inverse: true,
+          axisLabel: {
+            rotate: 45, // 设置标签旋转角度
+            interval: 0, // 强制显示所有标签
+          },
+        },
+        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>