雷達(dá)圖又稱為極坐標(biāo)圖，是一種用來展示多個(gè)維度數(shù)據(jù)的圖表。Vue框架可以很好地支持雷達(dá)圖的添加，下面就來具體介紹Vue如何添加雷達(dá)圖。 首先，在Vue項(xiàng)目中需要使用一個(gè)可以支持雷達(dá)圖的圖表庫，這里我們選擇ECharts。在項(xiàng)目目錄中通過npm安裝ECharts：

npm install echarts -S

接著，在需要使用雷達(dá)圖的組件中引入echarts，創(chuàng)建一個(gè)div容器并設(shè)置其寬高用于顯示圖表：

import echarts from 'echarts';

mounted () {
let chartContainer = this.$refs.chartContainer;
let chartWidth = chartContainer.clientWidth;
let chartHeight = chartContainer.clientHeight;
this.chart = echarts.init(chartContainer);
this.chart.resize({
width: chartWidth,
height: chartHeight
});
}

然后，根據(jù)需求設(shè)置雷達(dá)圖的配置項(xiàng)options和數(shù)據(jù)data：

data () {
return {
chart: null,
options: {
title: {
text: '雷達(dá)圖'
},
tooltip: {},
legend: {
data: ['維度1', '維度2', '維度3', '維度4', '維度5']
},
radar: {
indicator: [
{name: '維度1', max: 100},
{name: '維度2', max: 100},
{name: '維度3', max: 100},
{name: '維度4', max: 100},
{name: '維度5', max: 100}
],
center: ['50%', '50%'],
radius: '80%'
},
series: [{
name: '數(shù)據(jù)',
type: 'radar',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: [
{
value: [60,73,85,40,60],
name: '維度1'
},
{
value: [85,90,70,75,95],
name: '維度2'
},
{
value: [70,68,55,75,60],
name: '維度3'
},
{
value: [35,46,66,23,35],
name: '維度4'
},
{
value: [45,23,50,30,25],
name: '維度5'
}
]
}]
}
}
}

最后，在組件的destroyed鉤子中銷毀echarts實(shí)例：

destroyed () {
this.chart.dispose();
}

至此，Vue添加雷達(dá)圖的過程就完成了，通過以上的配置可以輕松地創(chuàng)建出一個(gè)渲染多個(gè)維度數(shù)據(jù)的雷達(dá)圖。