<template>
  <div class="resource">
    <!-- 标题区域 -->
    <div class="resource_title">
      <div class="title_text">住宿资源</div>
      <img src="@/assets/images/33.png" />
    </div>

    <!-- 环形图区域 -->
    <div class="resource_chart" ref="pieChart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Echarts from "echarts";

// 圆环图DOM元素
const pieChart = ref(null);

// 圆环图数据
const chartData = ref([
  { value: 8, name: "三爪仑" },
  { value: 11, name: "双溪镇" },
  { value: 7, name: "雷公尖" },
  { value: 10, name: "仁首镇" },
  { value: 12, name: "宝峰镇" },
]);

onMounted(() => {
  // 初始化圆环图
  initPieChart();
});

const initPieChart = () => {
  let myPieChart = Echarts.init(pieChart.value);
  // 圆环图配置
  const options = {
    title: {
      text: "靖安县",
      left: "19%",
      top: "40%",
      textStyle: {
        fontSize: 16,
        color: "#9BB7D4",
      },
      subtext: " 48",
      subtextStyle: {
        fontSize: 20,
        color: "#fff",
        align: "center",
        fontWeight: "bold",
      },
      itemGap: 15,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      right: "0%",
      top: "center",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 25,
      textStyle: {
        padding: 8,
        color: "#9BB7D4",
        fontSize: 19,
        rich: {
          a: {
            fontSize: 19,
            fontWeight: "bold",
            align: "right",
            color: "#fff",
          },
          b: {
            fontSize: 19,
            fontWeight: "bold",
            align: "right",
            color: "#9BB7D4",
            padding: [0, 20, 0, 20],
          },
        },
      },
      formatter: (params: any) => {
        // 计算总人数
        let count = 0;
        chartData.value.forEach((element) => {
          count += element.value;
        });

        const valueObj: any = chartData.value.find(
          (item) => item.name === params
        );

        // 计算百分比
        let rate =
          (Number((valueObj.value / count).toFixed(2)) * 100).toFixed(0) + "%";

        return params + "{b|" + rate + "}" + "{a|" + valueObj.value + "}";
      },
    },
    color: ["#59F7CA", "#2B99FF", "#F2B949", "#81C4E4", "#FDFDFD"],
    series: [
      {
        name: "住宿资源分布情况",
        type: "pie",
        center: ["24%", "48%"],
        radius: ["45%", "65%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        itemStyle: {
          borderColor: "rgba(2, 27, 41, 0.1)",
          borderWidth: 5,
        },
        data: chartData.value,
      },
    ],
  };
  myPieChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.resource {
  width: 100%;
  height: 100%;

  .resource_title {
    position: relative;
    width: 548px;
    height: 41px;
    line-height: 41px;

    .title_text {
      position: absolute;
      left: 15px;
      z-index: 1;
      font-size: 23.5px;
      font-weight: bold;
      color: #e0efff;
    }

    img {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 548px;
      height: 16px;
    }
  }

  .resource_chart {
    width: 548px;
    height: 350px;
  }
}
</style>
