echart雷达图把文字遮挡了怎么调整

图片描述

echart雷达图把文字遮挡了怎么调整,修改grid属性不起作用

阅读 16.6k
4 个回答

查看了对应的配置手册中对于这个字段没有位置类型的修改
radar.name
我觉得需要放大Echarts控件放置的div的大小,我在页面测试时,官方案例也是会出现这个问题。

当div过小的时候,也是会有这个问题

图片描述

通过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 },
        ],
      },
    ],`
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏