echarts 雷达图 斑马纹
时间: 2023-12-28 18:25:42 浏览: 125
根据引用[1]中提供的链接,我们可以使用ECharts库来创建雷达图,并通过设置背景色和线条颜色来实现斑马纹效果。下面是一个示例代码:
```javascript
option = {
backgroundColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#000' // 背景色为黑色
}, {
offset: 1, color: '#fff' // 背景色为白色
}],
globalCoord: false
},
radar: {
indicator: [
{ name: '销售', max: 6500 },
{ name: '管理', max: 16000 },
{ name: '信息技术', max: 30000 },
{ name: '客服', max: 38000 },
{ name: '研发', max: 52000 },
{ name: '市场', max: 25000 }
],
shape: 'circle',
splitNumber: 5,
name: {
textStyle: {
color: 'rgba(255, 255, 255, 0.6)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
},
series: [{
name: '预算 vs 开销',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
],
areaStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'rgba(255, 255, 255, 0.5)' // 线条颜色为白色
}, {
offset: 1, color: 'rgba(0, 0, 0, 0.5)' // 线条颜色为黑色
}],
globalCoord: false
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这段代码会创建一个雷达图,并将背景色设置为黑白相间的斑马纹效果,线条颜色也是黑白相间的斑马纹效果。
阅读全文