ducha-qianduan/src/views/materialManagement/chartdisplay/index.vue

<template>
  <div class="material-dashboard app-container">
    <!-- 标题 -->
    <h2 style="margin-bottom: 20px;">物资数量概览</h2>

    <!-- 库存统计卡片 -->
    <div class="stats">
      <el-card v-for="item in materials" :key="item.name" class="stat-card" shadow="hover">
        <div class="title">{{ item.name }}</div>
        <div class="count" :class="{ low: item.count < 20 }">{{ item.count }}</div>
        <div class="status" v-if="item.count < 20">⚠ 库存不足，请及时补充</div>
      </el-card>
    </div>

    <!-- 柱状图展示 -->
    <el-card style="margin-top: 30px;" shadow="always">
      <div slot="header">物资数量分布</div>
      <div id="materialChart" style="height: 400px;"></div>
    </el-card>

    <!-- 折线图展示 -->
    <el-card style="margin-top: 30px;" shadow="always">
      <div slot="header">近7天物资消耗趋势</div>
      <div id="trendChart" style="height: 400px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "MaterialDashboard",
  data() {
    return {
      // 库存死数据
      materials: [
        { name: "武器", count: 35 },
        { name: "弹药", count: 12 }, // 库存不足
        { name: "装备", count: 50 },
        { name: "物资", count: 18 }, // 库存不足
        { name: "其他", count: 42 },
      ],
      // 近7天消耗死数据
      trendData: {
        dates: ["8-28", "8-29", "8-30", "8-31", "9-1", "9-2", "9-3"],
        武器: [5, 3, 6, 2, 4, 5, 3],
        弹药: [10, 8, 12, 6, 7, 11, 9],
        装备: [2, 1, 3, 2, 1, 2, 2],
        物资: [7, 6, 8, 5, 9, 7, 8],
        其他: [3, 4, 2, 5, 3, 4, 3],
      },
    };
  },
  mounted() {
    this.initChart();
    this.initTrendChart();
  },
  methods: {
    // 柱状图
    initChart() {
      const chart = echarts.init(document.getElementById("materialChart"));
      chart.setOption({
        tooltip: { trigger: "axis" },
        xAxis: {
          type: "category",
          data: this.materials.map((m) => m.name),
        },
        yAxis: { type: "value" },
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.materials.map((m) => m.count),
            itemStyle: {
              color: (params) => {
                return params.data < 20 ? "#ff4d4f" : "#1890ff"; // 库存不足显示红色
              },
            },
          },
        ],
      });
    },
    // 折线图
    initTrendChart() {
      const chart = echarts.init(document.getElementById("trendChart"));
      chart.setOption({
        tooltip: { trigger: "axis" },
        legend: { data: Object.keys(this.trendData).filter((k) => k !== "dates") },
        xAxis: {
          type: "category",
          data: this.trendData.dates,
        },
        yAxis: { type: "value" },
        series: Object.keys(this.trendData)
          .filter((k) => k !== "dates")
          .map((key) => ({
            name: key,
            type: "line",
            smooth: true,
            data: this.trendData[key],
          })),
      });
    },
  },
};
</script>

<style scoped>
.stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  width: 200px;
  text-align: center;
  padding: 15px;
}

.stat-card .title {
  font-size: 18px;
  margin-bottom: 10px;
}

.stat-card .count {
  font-size: 32px;
  font-weight: bold;
  color: #1890ff;
}

.stat-card .count.low {
  color: #ff4d4f;
}

.stat-card .status {
  margin-top: 5px;
  color: #ff4d4f;
  font-size: 14px;
}
</style>