echart雷达图把文字遮挡了怎么调整,修改grid属性不起作用
通过radar>radius 完美解决 radius代表缩放比
radar: [{
indicator: [
{ text: '品牌', max: 100 },
{ text: '内容', max: 100 },
{ text: '可用性', max: 100 },
{ text: '功能', max: 100 },
{ text: '功能', max: 100 }
],
radius: 50
}
],
可以通过圆心/中心(radar.center)和半径(radar.radius)来控制雷达图的具体位置;
是使用具体像素值还是百分比都可以根据情况选择, 具体看下文档
比如:
radar: {
// 通过控制圆心和半径来控制雷达的位置,以避免和 title 文字的重合
radius: 90,
center: ['50%', '55%'],
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{name: '资格', max: 4},
{name: '知识', max: 4},
{name: '能力', max: 4},
{name: '经历', max: 4}
]
},
indicator中的text长的话,可以通过把文本换行显示
`
radar: [
{
name: {
textStyle: {
color: "#72767A",
fontSize: this.fontSize(0.3),
padding: [0, 20],
},
lineHeight: this.fontSize(0.4),
formatter(params) {
return params.replace(/\//g, "\n");
},
},
axisLine: {
lineStyle: {
color: "#C3C3C3",
width: this.fontSize(0.03),
},
},
splitLine: {
lineStyle: {
width: this.fontSize(0.03),
},
},
splitArea: {
show: true,
areaStyle: {
color: [
"rgba(255,235,217, 0.1)",
"rgba(255,235,217, 0.2)",
"rgba(255,235,217, 0.4)",
"rgba(255,235,217, 0.6)",
"rgba(255,235,217, 0.8)",
"rgba(255,235,217, 1)",
].reverse(),
},
},
center: ["50%", "56%"],
radius: "65%",
indicator: [
{ text: "专注力/运算", max: 100 },
{ text: "记忆/延迟记忆", max: 100 },
{ text: "定向", max: 100 },
{ text: "理解能力/抽象概念", max: 100 },
{ text: "视觉空间/能力", max: 100 },
],
},
],`
2 回答1.2k 阅读✓ 已解决
2 回答1.2k 阅读✓ 已解决
2 回答575 阅读✓ 已解决
1 回答998 阅读✓ 已解决
1 回答571 阅读✓ 已解决
1 回答778 阅读
1 回答1.2k 阅读
查看了对应的配置手册中对于这个字段没有位置类型的修改
radar.name
我觉得需要放大Echarts控件放置的div的大小,我在页面测试时,官方案例也是会出现这个问题。
当div过小的时候,也是会有这个问题