<template>
  <div ref="radarRef" class="radar" :style="{ height: (props.record?.itemHeight || 400) + 'px' }"></div>
</template>

<script setup name="FormRadar">
import * as echarts from 'echarts';
import { ref, onMounted, nextTick } from 'vue';

const props = defineProps({
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: {}
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:value', 'onChange']);

// 仪表盘配置
const option = ref({
  title: {
    text: props.record?.itemLabelName
  },
  legend: {
    left: 'center',
    data: ['A Phone', 'Another Phone']
  },
  radar: [
    {
      indicator: [
        { text: 'Look', max: 100 },
        { text: 'Photo', max: 100 },
        { text: 'System', max: 100 },
        { text: 'Performance', max: 100 },
        { text: 'Screen', max: 100 }
      ],
    }
  ],
  series: [
    {
      type: 'radar',
      areaStyle: {},
      symbol: 'none',
      data: [
        {
          value: [85, 90, 90, 95, 95],
          name: 'A Phone'
        },
        {
          value: [95, 80, 95, 90, 93],
          name: 'Another Phone'
        }
      ]
    }
  ]
});

// ref
const radarRef = ref(null);

const myChart = ref(null);

onMounted(() => {
  initEcharts();
});

//初始化仪表盘
const initEcharts = () => {
  nextTick(() => {
    myChart.value = echarts.getInstanceByDom(radarRef.value);
    if (myChart.value == null) {
      myChart.value = echarts.init(radarRef.value);
    }
    // option.value.series[0].data[0].value = dataValue.value;
    myChart.value.setOption(option.value);
  });
};
</script>

<style>
.radar {
  width: 100%;
}
</style>
