在 ECharts 中,雷达图(radar)的文字展示位置可以通过配置项进行灵活设置,主要涉及坐标轴标签、指示器名称等文字的位置调整。


以下是关键的配置项说明:


  1. 指示器名称位置:通过 radar.indicator.nameLocation 控制,可选值为'start'(默认,指示器轴线起点)、'middle'(中间)、'end'(轴线终点)
  2. 指示器名称与轴线的距离:通过 radar.indicator.nameGap 设置,单位为像素
  3. 坐标轴刻度标签位置:通过 radar.axisLabel.position 控制,可选值为 'inside'(内侧)或 'outside'(外侧)


示例代码如下:


javascript

option = {
  radar: {
    // 指示器配置
    indicator: [
      { name: '攻力', max: 100, nameLocation: 'end', nameGap: 15 },
      { name: '防御力', max: 100, nameLocation: 'start', nameGap: 5 },
      { name: '速度', max: 100 },
      { name: '耐力', max: 100 },
      { name: '智力', max: 100 },
      { name: '敏捷', max: 100 }
    ],
    // 坐标轴标签位置
    axisLabel: {
      position: 'outside' // 刻度标签显示在外侧
    },
    // 其他雷达图配置
    radius: '70%',
    center: ['50%', '50%']
  },
  series: [{
    type: 'radar',
    data: [{
      value: [80, 60, 90, 70, 85, 95],
      name: '角色A'
    }]
  }]
};

通过调整这些配置项,你可以根据实际需求将文字展示在雷达图的不同位置,以获得最佳的视觉效果和可读性。如果需要更复杂的文字布局,还可以考虑使用富文本(rich text)配置来自定义文字样式和位置。