Echarts 雷达图角上的文字遮住显示不全

2024-07-13 01:17| 来源: 网络整理| 查看: 265

最近,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);

【本文地址】

公司简介

联系我们