epmet-work-pc-chengyang/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue

<template>
  <div>
    <div class="visualizing laonianren">
      <div class="visualizing-item">
        <div>
          <data-title title="志愿者年龄统计" />
        </div>
        <div id="zyzLeftChart" style="height: 400px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="志愿者类别统计" />
        </div>
        <div id="zyzRightChart" style="height: 400px"></div>
      </div>
      <div class="visualizing-item">
        <div>
          <data-title title="志愿者享受服务情况统计" />
        </div>
        <div id="resiServiceChart" style="height: 400px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
import * as echarts from "echarts";
import {color, legend, series, title} from "@/views/dataBoard/renfang/visualizing/components/pie_config";

function dataFormatter(arr) {
  return arr.map((item) => {
    return {
      name: item.classification,
      value: Number(item.classificationNum),
    };
  });
}
export default {
  name: "zhiyuanzhe",
  props: {
    title: {
      type: String,
      default: "",
    },
    org_id: {
      type: String,
      default: "",
    },
  },
  components: {
    dataTitle,
  },
  data() {
    return {
      zyzLeft: [],
      zyzRight: [],
      resiService: [],
    };
  },
  created() {
    const query = this.$route.query;
    this.getData();
  },
  activated() {},
  methods: {
    getData() {
      this.$http
        .get("/actual/base/peopleRoomOverview/volunteerPie?type=0")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.zyzLeft = dataFormatter(res.data);
          this.initLeftCharts();
        })
        .catch(() => {});
      this.$http
        .get("/actual/base/peopleRoomOverview/volunteerPie?type=1")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.zyzRight = dataFormatter(res.data);
          this.initRightCharts();
        })
        .catch(() => {});

      this.$http
        .get("/actual/base/peopleRoomOverview/findPeoplePie/VOLUNTEER_FLAG")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.resiService = dataFormatter(res.data);
          this.initResiServiceCharts();
        })
        .catch(() => {});
    },
    initLeftCharts() {
      let div = document.getElementById("zyzLeftChart");
      this.myChart1 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.zyzLeft),
            title: title(this.zyzLeft),
            series: series(this.zyzLeft)
      };
      this.myChart1.setOption(option);
      this.myChart1.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "志愿者",
            pageType: "normal",
            type: "zhiyuanzhe",
            olds: e.data.name,
          },
        });
      });
      window.addEventListener("resize", () => this.myChart1.resize());
    },
    initRightCharts() {
      let div = document.getElementById("zyzRightChart");
      this.myChart2 = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.zyzRight),
            title: title(this.zyzRight),
            series: series(this.zyzRight)
      };
      this.myChart2.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "志愿者",
            pageType: "normal",
            type: "zhiyuanzhe",
            gategoryCode: e.data.name,
          },
        });
      });
      this.myChart2.setOption(option);
      window.addEventListener("resize", () => this.myChart2.resize());
    },

    initResiServiceCharts() {
      let div = document.getElementById("resiServiceChart");
      this.resiChart = echarts.init(div);
      const option = {
            tooltip: {
              trigger: "item",
            },
            color,
            legend: legend(this.resiService),
            title: title(this.resiService),
            series: series(this.resiService)
      };
      this.resiChart.setOption(option);
      this.resiChart.on("click", (e) => {
        this.$router.push({
          path: "/dataBoard/renfang/resi-class-new",
          query: {
            org_id: this.org_id,
            type_id: "aged",
            type_name: "志愿者",
            pageType: "normal",
            type: "zhiyuanzhe",
            serv_type: e.data.name,
          },
        });
      });
      window.addEventListener("resize", () => this.resiChart.resize());
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/dataBoard/renfang/index.scss"
  scoped
></style>
<style lang="scss" scoped>
.laonianren {
  padding: 140px 130px;
}
</style>