<template>
  <div class="w-100">
    <Model title="土壤污染环境">
      <Pie :chartData="chartData" height="240px" :option="option" v-if="chartData.length || chartData.length > 0" />
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Model from './model.vue';
  import Pie from '/@/components/chart/Pie.vue';

  const chartData = ref<any>([]);
  const option = ref({
    grid: {
      left: '1%',
      right: '1%',
      top: '2%',
      bottom: '35px',
      containLabel: true,
    },
    legend: {
      bottom: 0,
      show: false,
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    series: [
      {
        name: '土壤污染环境',
        type: 'pie',
        radius: '50%',
        // color: ['#FCBE00'],
      },
    ],
  });
  function init() {
    chartData.value = [
      {
        name: '超过筛选之及管控值',
        value: 0.68,
      },
      {
        name: '超过管制值地块',
        value: 3.16,
      },
      {
        name: '未超标地块',
        value: 80.42,
      },
      {
        name: '未确认',
        value: 15.28,
      },
    ];
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped></style>
