Skip to content

RadarAxis 雷达图坐标系

基本用法

vue
<script setup>
    import { ref } from 'vue'

    const data =[
      { text: '指标一' },
      { text: '指标二' },
      { text: '指标三' },
      { text: '指标四' },
      { text: '指标五' }
    ]
</script>
<template>
    <VueEcharts style="width:100%;height:300px;" :animationDuration='2000'>
        <RadarAxis :indicator="data" :center="['50%', '50%']" radius='80%' :startAngle='90' :splitNumber='4' shape='circle'>
            <Text prop='axisName' formatter='【{value}】' color='#72ACD1' />
            <SplitArea>
                <AreaStyle :color="['#B8D3E4', '#96C5E3', '#7DB5DA', '#72ACD1']" />
            </SplitArea>
            <AxisTick show>
                <LineStyle color='rgba(255, 255, 255, 0.8)' />
            </AxisTick>
            <Text prop='axisLabel' show color='white' />
            <AxisLine>
                <LineStyle color='rgba(255, 255, 255, 0.4)' />
            </AxisLine>
            <SplitLine>
                <LineStyle color='rgba(255, 255, 255, 0.4)' />
            </SplitLine>
        </RadarAxis>
    </VueEcharts>
</template>