<template>
  <div class="parking_resource">
    <!-- 标题区域 -->
    <div class="title">
      <div class="title_text">停车场资源</div>
      <img src="@/assets/images/33.png" />
    </div>

    <!-- 内容区域 -->
    <div class="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: 2, name: "三爪仑" },
  { value: 2, name: "双溪镇" },
  { value: 5, name: "雷公尖" },
  { value: 3, name: "仁首镇" },
  { value: 4, name: "宝峰镇" },
  { value: 4, name: "三仑" },
]);

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

const initPieChart = () => {
  let myPieChart = Echarts.init(pieChart.value);
  // 圆环图配置
  const options = {
    title: {
      text: "20",
      left: "42%",
      top: "28%",
      textStyle: {
        fontSize: 58,
        color: "#9BB7D4",
      },
      subtext: "停车场",
      subtextStyle: {
        fontSize: 23,
        color: "#fff",
        align: "center",
        fontWeight: "bold",
      },
      itemGap: 15,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "12%",
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 25,
      textStyle: {
        padding: 10,
        color: "#9BB7D4",
        fontSize: 19,
        rich: {
          a: {
            fontSize: 19,
            fontWeight: "bold",
            color: "#fff",
          },
          b: {
            fontSize: 19,
            fontWeight: "bold",
            align: "right",
            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: ["#F5944D", "#2493F1", "#38F5E8", "#FFC13A", "#FCFCFC", "#85C643"],
    series: [
      {
        name: "停车场资源分布情况",
        type: "pie",
        center: ["50%", "35%"],
        radius: ["48%", "55%"],
        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>
.parking_resource {
  width: 100%;
  height: 100%;

  .title {
    position: relative;
    width: 100%;
    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: 100%;
      height: 16px;
    }
  }

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