vue3中echarts雷达图代码
时间: 2023-11-20 18:01:10 浏览: 20
以下是一个基本的vue3中echarts雷达图代码示例:
```
<template>
<div class="radar-chart" ref="radarChart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'RadarChart',
data() {
return {
chartData: {
legendData: ['预算分配', '实际开销'],
radarIndicator: [
{ name: '销售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研发', max: 52000 },
{ name: '市场', max: 25000 }
],
seriesData: [
{
name: '预算 vs 实际开销',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销'
}
]
}
]
}
}
},
mounted() {
this.renderChart();
},
methods: {
renderChart() {
const chart = echarts.init(this.$refs.radarChart);
chart.setOption({
tooltip: {},
legend: {
data: this.chartData.legendData
},
radar: {
indicator: this.chartData.radarIndicator
},
series: this.chartData.seriesData
});
}
}
}
</script>
<style scoped>
.radar-chart {
height: 400px;
}
</style>
```
这个示例中,我们在mounted生命周期中调用renderChart方法来渲染雷达图。在renderChart方法中,我们用echarts.init()初始化了一个echarts实例,并设置了雷达图的配置项。雷达图的数据存储在chartData中,我们可以根据需要进行修改。