tyyx_chart/src/pages/home/radars.vue

<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps<{
  ecahrtsData: object
}>()

const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    title: {
      text: props.ecahrtsData.title_text,
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
      confine: true,
    },
    legend: {
      date: props.ecahrtsData.legend_date,
      top: '7%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    // grid: {
    //   top: '30%',
    //   bottom: '0%',
    // },
    color: ['#11a597', '#ff8366', '#eff410'],
    radar: {
      // shape: 'circle',
      indicator: props.ecahrtsData.radar_indicator,
      center: ['50%', '57%'],
      radius: '70%',
    },
    series: props.ecahrtsData.series,
  })
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>