<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: 160,
      },
      {
        name: '地下水未污染地块',
        value: 458,
      },
    ];
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="less" scoped></style>
