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

最新推荐文章于 2026-03-26 10:37:31 发布

原创

最新推荐文章于 2026-03-26 10:37:31 发布 · 1.6w 阅读

本文介绍了解决Echarts雷达图中文本被遮挡的问题。通过调整radius和center属性控制图表大小与位置，并利用name.textStyle.padding属性精确调整文本与边界的间距。

最近,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',