SynthesisManagement/src/views/screens/screen-components/ChanLiangTongJi.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="产量统计" />
    <div ref="chartRef" class="charts-container"></div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import {
  allChartColors,
  chartLegend,
} from "@/views/screens/configs/chartsConfig";
import { productionStatisticsDetail } from "@/api/screens";

const chartRef = ref(null);
const bigScreenData: any = inject("bigScreenData");
const option = {
  backgroundColor: "transparent",
  textStyle: {
    fontSize: bigScreenData.value.fontSize * 2,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  legend: {
    data: ["Evaporation", "Precipitation", "Temperature"],
    ...chartLegend,
  },
  xAxis: [
    {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "数量",
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: "{value} 个",
      },
    },
  ],
  series: [
    {
      name: "Evaporation",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " ml";
        },
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
      ],
    },
    {
      name: "Precipitation",
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value + " ml";
        },
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
      ],
    },
    {
      name: "Temperature",
      type: "line",
      tooltip: {
        valueFormatter: function (value) {
          return value + " °C";
        },
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    },
  ],
};

onMounted(async () => {
  const chart = echarts.init(chartRef.value, "dark");

  let res = await productionStatisticsDetail();
  let seriesData = [];
  for (let i = 0; i < res?.data?.materialCountVOList.length; i++) {
    let item = res.data.materialCountVOList[i];
    seriesData.push({
      type: "bar",
      name: item.materialName,
      // tooltip: {
      //   valueFormatter: function (value) {
      //     return value + " ml";
      //   },
      // },
      data: item?.counts ?? [],
    });
  }

  let option = {
    color: allChartColors,
    backgroundColor: "transparent",
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 2,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        // crossStyle: {
        //   color: "#999",
        // },
      },
    },
    legend: {
      data: res?.data?.materialNames ?? [],
    },
    xAxis: [
      {
        type: "category",
        data: res?.data?.weeks ?? [],
        axisPointer: {
          type: "shadow",
        },
        axisLabel: {
          fontSize: bigScreenData.value.fontSize * 2,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量",
        // min: 0,
        // max: 250,
        // interval: 50,
        minInterval: 1,
        axisLabel: {
          formatter: "{value} ",
        },
        axisLabel: {
          fontSize: bigScreenData.value.fontSize * 2,
        },
      },
    ],
    series: seriesData,
  };

  chart.setOption(option);
});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
</script>

<style lang="scss" scoped></style>