<template>
  <div class="age-ratio" id="age-ratio" />
</template>

<script setup>
  import * as echarts from 'echarts'
  import { fitChartSize } from '@/utils/dataUtil'

  let ageChart = null

  const init = () => {
    // 基于准备好的dom，初始化echarts实例
    ageChart = echarts.init(document.getElementById('age-ratio'))
    ageChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: '60%',
        y: 'center',
        data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
        itemHeight: fitChartSize(8),
        itemWidth: fitChartSize(8),
        itemGap: fitChartSize(10),
        formatter: function (name) {
          return '{title|' + name + '}'
        },
        textStyle: {
          rich: {
            title: {
              color: '#fff',
              fontSize: fitChartSize(14)
            },
            value: {
              color: '#00D5F6',
              fontSize: fitChartSize(14)
            }
          }
        }
      },
      series: [
        {
          type: 'pie',
          center: ['30%', '50%'],
          radius: ['50%', '70%'],
          itemStyle: {
            borderColor: 'transparent',
            borderRadius: fitChartSize(2),
            borderWidth: fitChartSize(2)
          },
          label: {
            show: false,
            color: '#D3F0FE',
            fontSize: fitChartSize(12)
          },
          labelLine: {
            normal: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          data: [
            { value: 484, name: '19岁以下' },
            { value: 300, name: '18-30岁' },
            { value: 1048, name: '30-40岁' },
            { value: 580, name: '40-60岁' },
            { value: 735, name: '60岁以上' }
          ]
        }
      ]
    })
    window.addEventListener('resize', resize)
  }
  const resize = () => {
    if (ageChart) {
      ageChart.dispose()
      ageChart = null
      init()
    }
  }

  onMounted(() => {
    init()
  })
</script>

<style lang="scss" scoped>
  .age-ratio {
    width: vw(253);
    height: vh(120);
  }
</style>
