yudao-init/src/views/dashboard/charts/ChipYieldChart.vue

<!--
 * @Author: zhp
 * @Date: 2024-04-28 13:42:51
 * @LastEditTime: 2024-05-31 16:11:56
 * @LastEditors: zhp
 * @Description:
-->
<!--
    filename: ChipYield.vue
    author: liubin
    date: 2024-04-11 10:46:47
    description:
-->

<template>
  <chart-container class="chip-yield-chart" :noScroll="true">
    <div
      ref="chart"
      style="width: 10vw"
      :style="{ height: vHeight + 'vh' }"
    ></div>
  </chart-container>
</template>

<script>
import ChartContainerVue from "../../components/ChartContainer.vue";
import chartMixin from "@/mixins/chart.js";
import screenfull from "screenfull";

export default {
  name: "ChipYield",
  components: { ChartContainer: ChartContainerVue },
  mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
      default: 22,
    },
    factory: {
      type: String,
      default: "1",
    },
  },
  data() {
    const year = new Date().getFullYear();
    return {
      isFullscreen: false,
      options: {
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        tooltip: {},
        title: {
          text: "0%",
          left: "48%",
          top: "40%",
          textAlign: "center",
          textStyle: {
            fontWeight: 600,
            fontSize: 32,
            color: "#fffd",
          },
          subtext: `\u2002${year}年累计产出\u2002`,
          subtextStyle: {
            fontSize: 12,
            fontWeight: 100,
            color: "#fffd",
            align: "right",
          },
        },
        series: [
          // 背景 series - 2024计划
          {
            type: "pie",
            name: `${year}目标`,
            radius: ["70%", "85%"],
            center: ["50%", "52%"],
            emptyCircleStyle: {
              color: "#042c5f33",
            },
          },
          // 数据 series - 2024累计
          {
            type: "pie",
            radius: ["70%", "85%"],
            center: ["50%", "52%"],
            avoidLabelOvervlap: false,
            label: {
              show: false,
              // position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 90,
                name: `${year}累计产出`,
                selected: false,
                itemStyle: {
                  borderJoin: "round",
                  borderCap: "round",
                  borderWidth: 12,
                  borderRadius: "50%",
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#4CF0E811" },
                      { offset: 1, color: "#4CF0E8" },
                    ],
                  },
                },
              },
              {
                value: 20,
                name: "-",
                itemStyle: { color: "transparent" },
                label: { show: false },
              },
            ],
          },
          // 数据 series2 - 2023累计
          {
            type: "pie",
            radius: ["55%", "70%"],
            center: ["50%", "52%"],
            avoidLabelOvervlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 90,
                name: `${year - 1}累计产出`,
                selected: false,
                itemStyle: {
                  borderJoin: "round",
                  borderCap: "round",
                  borderWidth: 12,
                  borderRadius: "50%",
                  color: {
                    type: "linear",
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: "#1065ff66" },
                      { offset: 1, color: "#1065ff" },
                    ],
                  },
                },
              },
              {
                value: 0,
                name: "-",
                itemStyle: { color: "transparent" },
                label: { show: false },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    output() {
      const chipOutput = this.$store.getters.home.chipOutput;
      if (
        !chipOutput ||
        !chipOutput.target ||
        !chipOutput.current ||
        !chipOutput.previous
      )
        return {
          target: 0,
          current: 0,
          previous: 0,
        };
      const index =
        this.factory == "1"
          ? 4
          : this.factory == "2"
          ? 1
          : this.factory == "3"
          ? 2
          : this.factory == "4"
          ? 0
          : this.factory == "5"
          ? 3
          : this.factory == "6"
          ? 5
          : 6;
      return {
        target: chipOutput.target[index], //  parseInt(chipOutput.target[index]).toLocaleString(),
        current: chipOutput.current[index], //  parseInt(chipOutput.current[index]).toLocaleString(),
        previous: chipOutput.previous[index], //  parseInt(chipOutput.previous[index]).toLocaleString(),
      };
    },
    actualOptions() {
      const options = JSON.parse(JSON.stringify(this.options));
      // 标题
      if (!this.output.target) options.title.text = "0%";
      else
        options.title.text =
          (this.output.current / this.output.target) * 100 + "%";
      // 外环
      if (
        this.output.current == this.output.target &&
        this.output.current == 0
      ) {
        options.series[1].data[0].value = 0;
        options.series[1].data[1].value = 100;
      } else {
        options.series[1].data[0].value = this.output.current;
        options.series[1].data[1].value =
          this.output.target - this.output.current;
      }
      // 内环
      if (this.output.previous == 0) {
        options.series[2].data[0].value = 0;
        options.series[2].data[1].value = 100;
      } else {
        options.series[2].data[0].value = this.output.previous;
        options.series[2].data[1].value = 0;
      }
      return options;
    },
  },
  watch: {
    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
    isFullscreen(val) {
      // this.options.title.top = val ? "40%" : "37%";
      this.options.title.textStyle.fontSize = val ? 48 : 32;
      this.options.title.subtextStyle.fontSize = val ? 18 : 12;
      // this.options.title.subtextStyle.fontSize = val ? 18 : 14;
      this.initOptions(this.actualOptions);
    },
    factory(val) {
      this.initOptions(this.actualOptions);
    },
  },
  mounted() {
    console.log("mounted", this.actualOptions);
    /** 清除 MIN_WIDTH, 此处比较特殊, 需要这么一步, 去除 chart mixin 的滚动条功能 */
    this.MIN_WIDTH = 0;
    this.initOptions(this.actualOptions);
    debugger;

    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
};
</script>

<style scoped lang="scss">
.chip-yield-chart {
  height: 100%;
  flex: 1;
  overflow: visible;
}
</style>