SaaS-DataScreen/src/views/hui-jia/components/implementary/now-year.vue

<template>
  <div class="now-year-container">
    <div class="now-year-title">
      <img src="@/assets/images/qst.png" class="title-icon" />
      实施服务（今年数据）
    </div>
    <div id="nowYearChart" class="chart"></div>
  </div>
</template>

<script>
  import { mapState } from "vuex"
  import * as echarts from "echarts"

  export default {
    name: "NowYearServices",
    props: {
      data: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {
        chartInstance: null,
        chartData: {
          categories: [
            "签约户数",
            "合同份数",
            "服务小区",
            "服务企业",
            "履约城市",
          ],
        },
      }
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
    },
    watch: {
      data: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.initChart()
          }
        },
        deep: true,
      },
    },
    mounted() {
      this.init()
      window.addEventListener("resize", this.handleResize)
    },
    beforeDestroy() {
      if (this.chartInstance) {
        this.chartInstance.dispose()
      }
      window.removeEventListener("resize", this.handleResize)
    },
    methods: {
      // 初始化组件
      init() {
        this.initChart()
      },

      // 初始化图表
      initChart() {
        this.chartInstance = echarts.init(
          document.getElementById("nowYearChart")
        )

        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(17, 28, 49, 0.9)",
            borderColor: "rgba(64, 158, 255, 0.2)",
            textStyle: {
              color: "#ffffff",
            },
          },
          legend: {
            data: ["进行中", "上月完成", "今年累计"],
            textStyle: {
              color: "#a0b3d6",
            },
            itemWidth: 16,
            itemHeight: 8,
            top: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            top: 50,
            containLabel: true,
          },
          xAxis: {
            type: "log",
            show: false, // 隐藏x轴
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: this.chartData.categories,
            show: true, // 隐藏y轴
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#a1a1a1",
              fontSize: 14,
            },
          },
          series: [
            {
              name: "进行中",
              type: "bar",
              stack: "total",
              // barMinHeight: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#1620D4" },
                  { offset: 0.8, color: "#3AB3E3" },
                ]),
                borderRadius: [20, 0, 0, 20],
              },
              label: {
                show: true,
                color: "#fff",
              },
              barGap: "0%",
              barCategoryGap: "20%",
              data: this.data.service_ing,
            },
            {
              name: "上月完成",
              type: "bar",
              stack: "total",
              // barMinHeight: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#192FC9" },
                  { offset: 0.8, color: "#6D44BC" },
                ]),
                borderRadius: [0, 0, 0, 0],
              },
              label: {
                show: true,
                color: "#fff",
              },
              barGap: "0%",
              data: this.data.service_last_month,
            },
            {
              name: "今年累计",
              type: "bar",
              stack: "total",
              // barMinHeight: 10,
              label: {
                show: true,
                color: "#fff",
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#F7897D" },
                  { offset: 0.8, color: "#F66C89" },
                ]),
                borderRadius: [0, 20, 20, 0],
              },
              barGap: "0%",
              data: this.data.year_summary,
            },
          ],
        }

        this.chartInstance.setOption(option)
        this.chartInstance.resize()
      },

      // 处理窗口大小变化
      handleResize() {
        if (this.chartInstance) {
          this.chartInstance.resize()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .now-year-container {
    background: var(--content-bg);
    border-radius: halfW(4);
    display: flex;
    flex-direction: column;
  }

  .now-year-title {
    font-size: halfW(16);
    border-radius: halfW(4);
    color: var(--title-primary);
    background: var(--title-bg);
    padding: halfH(4) halfW(10);
    display: flex;
    align-items: center;
  }

  .chart {
    width: 100%;
    height: 100%;
  }
</style>