<template>
  <m-card title="企业履职评分">
    <div class="chart">
      <m-radar :dataset="data" :option="option" />
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A009',
  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 },
    { name: 'class6', displayName: '企业信用计分情况', max: 100 },
  ],
  source: [
    {
      seriesName: '健康度',
      class1: 85.6,
      class2: 72.7,
      class3: 69.2,
      class4: 96.0,
      class5: 54.6,
      class6: 87.6,
    },
  ],
}
const option = {
  color: [['#F76B1C', '#FAD961']],
  legend: { show: false },
  tooltip: null,
  radar: {
    center: ['50%', '50%'],
    radius: '52%',
    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>
