<template>
  <!-- <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/landBase/land2.png')})`"> -->
  <div>
    <!-- <h1>统计数据</h1> -->
    <div class="content">
      <div :ref="props.refs" style="width: 500px; height: 350px"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import { defineProps } from 'vue';
import { size } from 'lodash';
// 定义props
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return '暂无';
    },
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
  refs: {
    type: String,
    default: () => {
      return '';
    },
  },
});

let chart1 = ref(null);

console.log(props.refs);

let option = ref({});

watch(props.data, (data, oldata) => {
  console.log(data);
  let instance = echarts.init(chart1.value);
  instance.setOption(option.value);
});

option.value = {
  title: {
    text: props.title,
    x: 'center',
    size: 10,
  },
  // backgroundColor: '#0f375f',
  legend: {
    top: 25,
    left: '0',
    itemWidth: 20,
    itemHeight: 15,
    textStyle: {
      color: '#aab2cd',
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} <br/>面积: {c}万亩 ({d}%)',
  },
  label: {
    show: true,
    formatter: '{b}: {c}万亩',
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      center: ['40%', '60%'],
      label: {
        normal: {
          fontSize: 16,
        },
      },
      data: props.data,
    },
  ],
};

onMounted(() => {
  let instance = echarts.init(chart1.value);
  instance.setOption(option.value);
});
</script>

<style scoped lang="scss">
.custom-page {
  height: calc(100vh - 150px);
}
.m-left {
  margin-left: 6%;
}
</style>
