最近,Echarts实现雷达图,发现雷达图角上文字被边线遮掩显示不全,原本想着通过grid控制图形位置显示,发现一顿操作没有效果,差点怀疑人生了.
后面发现这是一个坑,跟Echarts其他图不一样,雷达图Grid不会生效的,至少我实践是这个样子,图的位置边距以及缩放等都没有改变效果.
最后,虽然没有找到为什么gird在雷达图的说法,但是找到了另一种解决方法,通过半径radius和对齐center值设置图的大小和位置.(感觉这个可能在饼图中也可以借鉴这种,未实践)
通过radar>radius 完美解决 radius代表缩放比, 通过radar>center 控制图形的位置
var myChart1 = echarts.init($('#LAY-index-pageone_2').children('div')[0]);
option7 = {
radar: [
{
indicator: [
{ text: '非常满意', max: 100 },
{ text: '满意', max: 100 }
],
radius: 85,//缩放
center: ['50%', '50%'],//位置
}
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item',
confine: true
},
areaStyle: {},
data: [
{
value: stares,
name: '满意度分布'
}
]
}
]
}
myChart1.setOption(option7);
上面这个方法基本可以通过缩放或位置,实现图形的可控配置,让雷达角上的文字完全显示. 但是后面另一图的出现,让我发现还不完美,上面的做法适合图形或容器较大时的操作,如果容器不是很大的情况,你通过缩放操作发现文字是可以实现不被遮掩,但是雷达图也变得比较小,这对小容器小图来说就比较矛盾了,图太小了,效果太差了,那还有没有什么方法呢?
雷达图我们已经尽可能去控制了,所以我们的思路得换成能不能把文字变小,这个方法应该是可行的,不过一不小心,发现了一个可以控制雷达图和文字边距的配置.
通过radar>name>textStyle>padding (默认是应该是0,我们想要让文字往里面走肯定得给负值)这个就绝了,配合上面的设置,基本天下无敌,完美解决文字显示问题了.(后面发现其实,通过边距控制,很多时候都不一定还需要去控制图的缩放)
var myChart1 = echarts.init($('#LAY-index-pageone_2').children('div')[0]);
option7 = {
radar: [
{
indicator: [
{ text: '非常满意', max: 100 },
{ text: '满意', max: 100 }
],
//radius: 85,//缩放
//center: ['50%', '50%'],//位置
name: {
textStyle: {
padding: [-10, -12] // 控制文字padding
}
}
}
],
series: [
{
type: 'radar',
tooltip: {
trigger: 'item',
confine: true
},
areaStyle: {},
data: [
{
value: stares,
name: '满意度分布'
}
]
}
]
}
myChart1.setOption(option7);