<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'
      },
      series: [
        {
          type: 'pie',
          radius: ['30%', '40%'],
          itemStyle: {
            borderColor: 'transparent',
            borderRadius: fitChartSize(2),
            borderWidth: fitChartSize(2)
          },
          label: {
            color: '#D3F0FE',
            fontSize: fitChartSize(12)
          },
          labelLine: {
            normal: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          data: [
            { value: 484, name: '19岁以下', labelLine: { length: 2 } },
            { value: 300, name: '18-30岁', labelLine: { length: 2 } },
            { value: 1048, name: '30-40岁', labelLine: { length: 2 } },
            { value: 580, name: '40-60岁', labelLine: { length: 2 } },
            { value: 735, name: '60岁以上', labelLine: { length: 2 } }
          ]
        }
      ]
    })
    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(100);
  }
</style>
