echarts雷达图 绘制面积
时间: 2023-10-01 20:09:19 浏览: 56
要绘制Echarts雷达图的面积效果,你可以使用Echarts的`radar`组件。以下是一个简单的示例代码,演示如何绘制一个具有面积效果的雷达图:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
radar: {
shape: 'circle',
indicator: [
{ name: '销售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研发', max: 52000 },
{ name: '市场', max: 25000 }
]
},
series: [{
name: '预算 vs 开销',
type: 'radar',
areaStyle: {}, // 开启面积效果
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销'
}
]
}]
};
// 使用配置项显示图表
myChart.setOption(option);
```
在上面的示例中,我们通过`indicator`定义了雷达图的指标轴,并通过`data`设置了两组数据,分别为预算分配和实际开销。通过设置`areaStyle: {}`开启了面积效果。
你可以根据实际需求修改指标轴和数据,以及其他样式配置。希望能对你有所帮助!