雷达图,业务能力分布echarts radar配置项内容和展示

雷达图,业务能力分布

配置项如下
      
 var opt = {
    "items":["我的评分","项目平均分"],
    "scores":[{
            "name":"我的评分",
            "value":[0.00,0.00,0.00,0.00,0.00]
        },{
            "name":"项目平均分",
            "value":[3.00,0.00,19.27,9.09,0.00]
        }],
    "stages":[{
            "max":159.00,"text":"岗前准备"
        },{
            "max":149.00,"text":"客户拓展"
        },{
            "max":887.00,"text":"客户接触"
        },{
            "max":672.00,"text":"客户转化"
        },{
               "max":217.00,"text":"业主维温"
        }]
    }

      
function contains(arr, obj) {
    var i = arr.length
    while (i--) {
      if (arr[i].text === obj) {
        return i
      }
    }
    return false
}

option = {
    legend: {
      data: opt.items,
      left: '5px',
      top: '5px',
      orient: 'vertical',
      icon: 'rect', // 矩形
      itemWidth: 10, // 设置宽度
      itemHeight: 10, // 设置高度
      textStyle: {
        fontSize: 12,
      },
    },
    radar: {
      name: {
        rich: {
          a: {
            color: '#46536C',
          },
          b: {
            color: '#FF8181',
            fontSize: 16,
            fontWeight: 'bold',
          },
          c: {
            color: '#257BFF',
            fontSize: 16,
            fontWeight: 'bold',
          },
          triggerEvent: true,
        },
        formatter: (a) => {
          let i = contains(opt.stages, a) // 处理对应要显示的样式
          return `{b| ${opt.scores[0]['value'][i]}}{c| / ${opt.scores[1]['value'][i]}}\n{a| ${a}}`
        },
      },
      splitNumber: 3,
      splitArea: {
        areaStyle: {
          color: ['#F0F6FF', '#E2EDFF'],
        },
      },
      axisLine: { show: false },
      splitLine: { show: false },
      indicator: opt.stages,
      center: ['50%', '65%'],
      radius: 70,
      triggerEvent: true,
    },
    series: [
      {
        name: '雷达图',
        type: 'radar',
        data: opt.scores,
      },
    ],
}
    
截图如下