<template>
  <div>
    <tiny-chart-ring :options="options"></tiny-chart-ring>
  </div>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { TinyHuichartsRing as TinyChartRing } from '@opentiny/vue-huicharts'

const options = ref({
  type: 'nulti-circle',
  position: {
    radius: ['44%', '50%'],
    center: ['35%', '50%']
  },
  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
  title: {
    text: '230',
    subtext: '总数量\n(用户数)',
    itemGap: 12,
    textStyle: {
      fontSize: 42
    },
    left: '35%',
    top: '43%',
    textAlign: 'center'
  },
  legend: {
    show: true,
    offset: '10%',
    position: {
      left: '60%',
      top: '10%'
    },
    orient: 'vertical'
  },
  data: [
    {
      name: 'VPC',
      value: 100,
      children: [
        {
          name: 'VPC_S_1',
          value: 20,
          children: [
            { name: 'VPC_T_1', value: 10 },
            { name: 'VPC_T_2', value: 10 }
          ]
        },
        {
          name: 'VPC_S_2',
          value: 80,
          children: [
            { name: 'VPC_T_3', value: 40 },
            { name: 'VPC_T_4', value: 40 }
          ]
        }
      ]
    },
    {
      name: 'IM',
      value: 80,
      children: [
        {
          name: 'IM_S_1',
          value: 30,
          children: [
            { name: 'IM_T_1', value: 10 },
            { name: 'IM_T_2', value: 20 }
          ]
        },
        {
          name: 'IM_S_2',
          value: 50,
          children: [
            { name: 'IM_T_3', value: 20 },
            { name: 'IM_T_4', value: 30 }
          ]
        }
      ]
    },
    {
      name: 'EIP',
      value: 10,
      children: [
        {
          name: 'EIP_S_1',
          value: 10,
          children: [
            { name: 'EIP_T_1', value: 5 },
            { name: 'EIP_T_2', value: 5 }
          ]
        },
        {
          name: 'EIP_S_2',
          value: 40,
          children: [
            { name: 'EIP_T_3', value: 20 },
            { name: 'EIP_T_4', value: 20 }
          ]
        }
      ]
    }
  ]
})
</script>
