Echarts 雷达图角上的文字遮住显示不全-实现雷达图大小缩放-位置设置以及雷达角上的文字位置调整

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