<template>
  <m-card title="小区健康度">
    <div class="chart">
      <m-radar :dataset="data" :option="option" />
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A008',
  title: '小区健康度',
  row: 1,
}
</script>
<script lang="ts" setup>
const data = {
  dimensions: [
    { name: 'class1', displayName: '行政检查', max: 100 },
    { name: 'class2', displayName: '履行行业管理', max: 100 },
    { name: 'class3', displayName: '履行物业服务规范', max: 100 },
    { name: 'class4', displayName: '投诉及处置情况', max: 100 },
    { name: 'class5', displayName: '诚信积分', max: 100 },
  ],
  source: [
    {
      seriesName: '健康度',
      class1: 85.6,
      class2: 87.6,
      class3: 54.6,
      class4: 96,
      class5: 72.7,
    },
  ],
}
const option = {
  color: [['#0078D0', '#61FAFA']],
  legend: { show: false },
  tooltip: null,
  radar: {
    radius: '60%',
    axisName: {
      formatter: function (value, { name }) {
        const key = data.dimensions.find((e) => e.displayName === name)?.name
        if (!key) return value
        const val = data.source[0][key] || 0
        let displayNum = ''
        if (val <= 60) {
          displayNum = `{b|${val}}`
        } else if (val > 60 && val <= 80) {
          displayNum = `{c|${val}}`
        } else if (val > 80) {
          displayNum = `{d|${val}}`
        }
        return [`{a|${value}}`, displayNum].join('\n')
      },
      rich: {
        a: {
          color: '#ccc',
          fontSize: '.09rem',
          lineHeight: 14,
        },
        b: {
          fontSize: '.12rem',
          fontWeight: 'bold',
          color: '#F7B500',
          align: 'center',
        },
        c: {
          fontSize: '.12rem',
          fontWeight: 'bold',
          color: '#32C5FF',
          align: 'center',
        },
        d: {
          fontSize: '.12rem',
          fontWeight: 'bold',
          color: '#42FC5A',
          align: 'center',
        },
      },
    },
  },
}
</script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'
.chart
  width 100%
  height 1.5rem
</style>
