<template>
  <view class="charts-box">
    <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const chartData = ref({})
const opts = ref({
  rotate: false,
  rotateLock: false,
  title: false,
  subtitle: false,
  color: ['#507AFC', '#F56C6C', '#FAC858', '#ea7ccc', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4'],
  padding: [5, 5, 5, 5],
  dataLabel: true,
  enableScroll: false,
  legend: {
    show: true,
    position: 'right',
    lineHeight: 25
  },
  extra: {
    ring: {
      ringWidth: 30,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: '#FFFFFF'
    }
  }
})

const getServerData = () => {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
      series: [
        {
          data: [
            { name: '正常缴费', value: 50 },
            { name: '预付费用', value: 30 },
            { name: '托收', value: 20 }
          ]
        }
      ]
    }
    chartData.value = JSON.parse(JSON.stringify(res))
  }, 500)
}

onMounted(() => {
  getServerData()
})
</script>
<style lang="scss" scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 350rpx;
  padding: 0 0 30rpx 0;
}
</style>
