echarts 雷达图
时间: 2023-10-19 13:36:14 浏览: 101
对于ECharts雷达图,您可以使用以下代码来创建一个基本的雷达图:
```javascript
// 引入 ECharts
import echarts from 'echarts';
// 初始化雷达图实例
var radarChart = echarts.init(document.getElementById('radarChart'));
// 配置雷达图参数
var option = {
title: {
text: '雷达图示例'
},
tooltip: {},
legend: {
data: ['数据1', '数据2']
},
radar: {
indicator: [
{ name: '类别1', max: 100 },
{ name: '类别2', max: 100 },
{ name: '类别3', max: 100 },
{ name: '类别4', max: 100 },
{ name: '类别5', max: 100 }
]
},
series: [{
name: '数据1',
type: 'radar',
data: [
{
value: [90, 80, 70, 60, 50],
name: '数据1'
}
]
}, {
name: '数据2',
type: 'radar',
data: [
{
value: [60, 70, 80, 90, 100],
name: '数据2'
}
]
}]
};
// 使用配置项显示雷达图
radarChart.setOption(option);
```
在上面的代码中,我们首先引入了ECharts,然后通过`echarts.init()`方法初始化雷达图实例,并传入一个具有唯一id的DOM元素。
接下来,我们配置了雷达图的标题、提示框、图例和雷达轴的指示器。然后,我们通过`series`数组配置了需要展示的数据系列和每个系列的值。
最后,使用`radarChart.setOption(option)`方法将配置项应用到雷达图实例上,从而显示雷达图。
您可以根据您的需求自定义雷达图的样式和数据,如修改颜色、添加更多的数据系列等。
阅读全文