<template>
  <div class="w-90% mx-auto right3 text-base h-67">
    <Model title="行业超标分析">
      <div class="py-3 h-full">
        <Pie :chartData="chartData" style="height: 80%" :option="option" v-if="chartData.length || chartData.length > 0" />
      </div>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Model from './model.vue';
  import Pie from '/@/components/chart/Pie.vue';
  import { hycbfx } from '../api';
  const chartData = ref<any>([
    {
      name: '广州市',
      value: 40,
    },
    {
      name: '深圳市',
      value: 38,
    },
    {
      name: '韶关市',
      value: 32,
    },
    {
      name: '江门市',
      value: 30,
    },
  ]);

  async function init() {
    const res = await hycbfx();
    chartData.value = res.slice(0, 11);
    chartData.value.map(function (obj) {
      obj['value'] = obj['zs']; // 新建一个名为 fullName 的属性，值与 name 相同
      delete obj['zs']; // 删除原有的 name 属性
    });
  }
  init();

  const option = ref({
    title: {
      show: false,
    },
    label: {
      show: false,
      position: 'center',
    },
    labelLine: {
      show: false,
    },
    grid: {
      left: '1%',
      right: '1%',
      top: '5%',

      containLabel: true,
    },

    legend: {
      orient: 'vertical',
      left: '1%',
      icon: 'circle',
      top: '1%',
      type: 'scroll',
      textStyle: {
        color: '#02FEFF',
        fontSize: 12,
        rich: {
          a: {
            color: '#FFFFFF',
            // width: 300,
            fontSize: 12,
          },
          // b: {
          //   width: 35,
          //   fontSize: 12,
          //   color: '#FFFFFF',
          // },
        },
      },
      formatter: function (name) {
        for (var i = 0; i < chartData.value.length; i++) {
          if (name == chartData.value[i].name) {
            return `{a|${name}}`;
          }
        }
      },
    },

    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{a} <br/>{b} : {c} %',
    // },

    series: [
      {
        type: 'pie',
        radius: [40, 80],
        center: ['75%', '50%'],
        // roseType: 'area',
        labelLine: {
          show: false,
        },
        label: {
          normal: {
            show: false,
            position: 'center',
          },
        },
      },
    ],
  });

  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped></style>
