SynthesisManagement/src/views/screens/screen-components/ProductionSituation.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 { chartLegend } from "@/views/screens/configs/chartsConfig";

const chartRef = ref(null);

const option = {
  legend: chartLegend,
  tooltip: {},
  dataset: {
    dimensions: ["product", "2015", "2016", "2017"],
    source: [
      { product: "Matcha Latte", 2015: 43.3, 2016: 85.8, 2017: 93.7 },
      { product: "Milk Tea", 2015: 83.1, 2016: 73.4, 2017: 55.1 },
      { product: "Cheese Cocoa", 2015: 86.4, 2016: 65.2, 2017: 82.5 },
      { product: "Walnut Brownie", 2015: 72.4, 2016: 53.9, 2017: 39.1 },
    ],
  },
  xAxis: { type: "category" },
  yAxis: {
    // axisLine: { show: false },
    // axisTick: { show: false },
    splitLine: { show: false },
  },
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
};

onMounted(() => {
  const chart = echarts.init(chartRef.value);
  chart.setOption(option);
});

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

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