1.基本用法

<template>
    <radar-chart ref="radarChartRef" v-bind="option"></radar-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const radarChartRef = ref();

const indicator = [
    { name: '经营情况', max: 10 },
    { name: '发展潜力', max: 10 },
    { name: '管理能力', max: 10 },
    { name: '贡献能力', max: 10 },
    { name: '能效水平', max: 10 }
];

const seriesData = [
    [6, 8, 7, 5, 8]
];

const option = {
    indicator,
    seriesData
};

onMounted(() => radarChartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
    width: 450px;
    height: 350px;
}
</style>

2.半径设置

<template>
    <radar-chart ref="radarChartRef" v-bind="option"></radar-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const radarChartRef = ref();

const indicator = [
    { name: '经营情况', max: 10 },
    { name: '发展潜力', max: 10 },
    { name: '管理能力', max: 10 },
    { name: '贡献能力', max: 10 },
    { name: '能效水平', max: 10 },
    { name: '其他', max: 10 }
];

const seriesData = [
    [6, 8, 7, 5, 8, 8],
    [5, 3, 6, 6, 7, 7]
];

const radius = 130;

const splitNumber = 8;

const option = {
    indicator,
    seriesData,
    radius,
    splitNumber
};

onMounted(() => radarChartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
    width: 450px;
    height: 450px;
}
</style>

3.颜色设置

<template>
    <radar-chart ref="radarChartRef" v-bind="option"></radar-chart>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const radarChartRef = ref();

const indicator = [
    { name: '经营情况', max: 10 },
    { name: '发展潜力', max: 10 },
    { name: '管理能力', max: 10 },
    { name: '贡献能力', max: 10 },
    { name: '能效水平', max: 10 },
    { name: '其他', max: 10 },
    { name: '额外项', max: 10 }
];
const seriesData = [
    [8, 8, 7, 5, 8, 8, 9],
    [5, 3, 6, 6, 7, 7, 2],
    [3, 6, 6, 7, 7, 2, 3]
];
const color = ['green', 'blue', 'orange'];
const option = {
    indicator,
    seriesData,
    color,
    indicatorColor: 'red'
};

onMounted(() => radarChartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
    width: 450px;
    height: 450px;
}
</style>

属性

属性名

说明

类型

默认值

参考值

splitNumber

指示器轴的分割段数。

Number

5

5

radius

轴的半径

Number

90

90

indicator

雷达图的指示器，用来指定雷达图中的多个变量（维度），如下示例

Array

[]

[
    { name: '经营情况', max: 10 },
    { name: '发展潜力', max: 10 },
    { name: '管理能力', max: 10 },
    { name: '贡献能力', max: 10 },
    { name: '能效水平', max: 10 }
]

indicatorColor

雷达图的指示器文字颜色

String

'white'

'red'

indicatorFontSize

雷达图的指示器字号

Number

16

32

indicatorNameGap

雷达图的指示器文字与图标的间距

Number

16

16

seriesData

数据项

Array

[]

[[4, 2, 1, 5, 3], [2, 1, 5, 3, 3]]

legendData

legend 数据

Array

[]

['总能耗', '能耗照明']

color

预设颜色

Array

['rgb(48, 213, 235)']

['red', 'green', 'blue']

beforeSetOption

万能方法，图表渲染之前执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

afterSetOption

万能方法，图表渲染之后执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}