目录
雷达图(radar)需求[1] 复制案例[2] 色调统一[3] 配置项实现代码
雷达图(radar)
需求
[1] 复制案例
如上图，先复制一个最简单的雷达图
[2] 色调统一
直角系坐标都是使用xAxis/yAxis配置项，但是雷达图使用的是radar配置项配置坐标系。
配置项注解区域splitNumber指示器轴的分割段数,默认为5段splitArea配置指示器分隔区域的相关设置splitLine分割线相关设置axisLine坐标轴轴线相关设置
数据折线，区域等配置在series中
配置项注解区域symbol是否存在拐点itemStyle折线拐点标志的样式lineStyle折线标志的样式与itemStyle的区别是itemStlye包括拐点areaStyle区域填充样式
调整雷达图颜色统一如下
option = {
radar: {
splitArea: {
areaStyle: { color: 'rgba(255, 175, 0,.4)' }
},
axisLine: {
lineStyle: { color: 'rgba(255, 175, 0,.4)' }
},
splitLine: {
lineStyle: { color: 'rgba(255, 175, 0,.4)' }
},
indicator: [
{ name: '数学' },{ name: '语文' },{ name: '英语' },
{ name: '物理' },{ name: '化学' }, { name: '生物' }
]
},
series: [
{
type: 'radar',
symbol:'none',
lineStyle: { color: "#FEAE01" },
areaStyle:{
color:'#FEAE01',
opacity:1 //默认存在透明度
},
data: [{value: [4200, 3000, 20000, 35000, 50000, 18000]}
]
}
]
};
[3] 配置项
如上图配置项，配置项默认值为indicator数组元素的name属性；配置项的默认颜色和坐标轴颜色相同。
修改文本颜色：若是仅仅修改配置项文本颜色，可以通过indicator数组元素的color属性去修改。 修改文本内容：修改文本内容可以使用axisName属性，axisName存在 formatter属性去调整文本样式。需要注意的是配置项中的formatter不识别html标签！。 如上图，此处的formatter不能识别html标签，会将html标签识别为普通字符串 若是想要设置样式，可以使用rich副文本编辑 如上图，可以设置三种不同的样式。 由于在radar配置项中的formatter只能获取到配置项的name值，获取不带其他值，因此我将占据百分比设置成一个数组遍历将数据填入。
实现代码
let precent = [90,60,70,50,90,19 ];
const max = 100
let i = -1
option = {
radar: {
splitArea: {
areaStyle: { color: 'rgba(255, 175, 0,.4)' } // 由于设置透明度会造成背景穿透
},
axisLine: {
lineStyle: { color: 'rgba(255, 175, 0,.4)' }
},
splitLine: {
lineStyle: { color: 'rgba(255, 175, 0,.4)' }
},
indicator: [
{ name: '数学', max}, // 设置max，否则展示比例可能存在展示不正确的存在
{ name: '语文', max },
{ name: '英语', max},
{ name: '物理', max },
{ name: '化学', max },
{ name: '生物', max }
],
radius:'58%', // 半径
axisName:{
formatter(value){
i++
return `{a|''}{b|${value}}\n{c|${precent[i]}%}`
},
rich: {
a: {
width: 2,
height: 11,
backgroundColor:'#FEAE01'
},
b: {
color: '#333',
padding:[0,0,0,4]
},
c:{
fontSize:14,
fontWeight:600,
lineHeight:18,
textAlign:'center'
}
},
},
},
series: [
{
type: 'radar',
symbol:'none',
lineStyle: { color: "#FEAE01" },
areaStyle:{
color:'#FEAE01',
opacity:1 //默认存在透明度
},
data: [{value: [90,60,70,50,90,19]}
]
}
]
};
相关阅读
您阅读本篇文章共花了：
发表评论