脚本宝典收集整理的这篇文章主要介绍了Echarts雷达图一个模版搞定(详细注释),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
效果图:
代码:
option = {
//背景色
// backgroundColor: 'rgba(204,204,204,0.7)',
//雷达图大标题
title: {
text: 'Basic Radar Chart',
textStyle:{
color:'#000000',
fontSize: 20,
},
},
//图例设置
legend: {
icon: 'roundRect', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
orient :'horizontal', // 'horizontal',''.
top:'20%',
left:'35%',
textStyle:{
color:'#000000',
fontSize: 15,
// fontWeight: 'bold',
},
data: ['Allocated Budget', 'Actual Spending'],
},
radar: {
//雷达图大小缩放
radius: '40%',
//雷达部分背景颜色
// splitArea:{
// show:true,
// areaStyle:{
// color : 'rgba(255, 164, 140, 0.1)',
// }
// },
// 雷达图圈圈形状设置
// shape: 'circle',
// 雷达图圈数设置
splitNumber: 3,
// 雷达图圈圈宽度和颜色
splitLine:{
show:true,
lineStyle:{
width:1,
color: '#a1a3a6',
},
},
//雷达图坐标轴宽度和颜色
axisLine:{
lineStyle:{
width:1,
color: '#a1a3a6',
},
},
// 坐标轴刻度大小
// axisLabel:{
// show : true,
// fontSize: 10,
// },
// 坐标轴category字体大小(通过调radius也可)
// name: {
// textStyle: {
// fontSize: 15,
// }
// },
// 坐标轴设置
indicator: [
{ name: 'Sales', max: 4000, color:'#007d65'},
{ name: 'Administration', max: 16000 , color:'#007d65'},
{ name: 'Information Technology', max: 30000, color:'#007d65' },
{ name: 'Customer Support', max: 38000, color:'##007d65' },
{ name: 'Development', max: 52000, color:'#007d65' },
{ name: 'Marketing', max: 25000, color:'#007d65' }
],
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
// model 1 -------------------------------------------------
{
// 各category的值
value: [2000, 3000, 20000, 35000, 50000, 18000],
// 模型名称
name: 'Allocated Budget',
//在拐点处显示相应的label
label: {
show: true,
fontSize: 15,
formatter: (params: any) => {
if (params.value == 2000){
return 'Yes'
}
}
},
//设置边框颜色
itemStyle:{
color:'rgba(255, 164, 140, 1)',
opacity: 1.0,
},
//设置区域颜色
areaStyle:{
opacity: 0.5, //透明度
color: 'rgba(255, 164, 140, 1)',
}
},
// model 2 -------------------------------------------------
{
value: ['No', 14000, 28000, 26000, 42000, 21000],
name: 'Actual Spending'
}
]
}
]
};
以上是脚本宝典为你收集整理的Echarts雷达图一个模版搞定(详细注释)全部内容,希望文章能够帮你解决Echarts雷达图一个模版搞定(详细注释)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。