vue3中echarts雷达图代码
时间: 2023-11-20 15:11:38 浏览: 30
以下是一个简单的Vue3中echarts雷达图的代码示例:
template代码:
```
<template>
<div class="radar-chart" ref="radarChart" style="height: 500px;"></div>
</template>
```
script代码:
```
<script>
import * as echarts from 'echarts';
export default {
mounted() {
const chartDom = this.$refs.radarChart;
const myChart = echarts.init(chartDom);
const option = {
tooltip: {},
radar: {
indicator: [
{ name: '销售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研发', max: 52000 },
{ name: '市场', max: 25000 }
]
},
series: [{
name: '预算 vs 开销',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '开销'
}
]
}]
};
myChart.setOption(option);
}
}
</script>
```
说明:
- 通过`import * as echarts from 'echarts';`语句引入echarts库。
- 在`mounted`钩子函数中初始化echarts,并设置雷达图的配置参数。
- 通过`this.$refs.radarChart`获取雷达图的DOM节点,然后将其作为echarts的容器初始化echarts。
- 最后调用`myChart.setOption(option);`方法将配置参数应用到雷达图中。