1.基本用法(画像app)

<template>
    <radar-chart-2 ref="radarChartRef" v-bind="option"></radar-chart-2>
</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: #fff;
    width: 375px;
    height: 375px;
}
</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

'#323233'

'red'

indicatorFontSize

雷达图的指示器字号

Number

14

32

indicatorNameGap

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

Number

8

16

seriesData

数据项

Array

[]

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

legendData

legend 数据

Array

[]

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

color

预设颜色

Array

['#0055FF']

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

scale

图表缩放比例

Number

1

2

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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