大屏---Echart之雷达图

echart版本：5.4.0

当数据区域很小时，series.data.label会叠在一起，可以放到radar.axisName里面

axisName: { // 指示器名称配置项
   formatter: (label, indicator) => { // 指示器名称
     const val = dataList[indicator.i]
     return `${label}\n${val}车次`
   }
}

完整配置代码：

const options = {
   backgroundColor: 'transparent',
   legend: {
     show: true,
     textStyle: {
       color: '#FFf'
     }
   },
   radar: [
     {
       shape: 'polygon', // 形状
       center: ['50%', '50%'], // 圆心
       radius: 150, // 半径
       startAngle: 90, // 第一个indicator的角度
       axisName: { // 指示器名称配置项
         formatter: (label, indicator) => { // 指示器名称
           const val = dataList[indicator.i]
           return `${label}\n${val}车次`
         },
         color: '#000',
         fontStyle: 'italic', // 字体风格 normal/italic/oblique
         fontWeight: 'bold', // normal/bold/bolder/lighter
         fontFamily: 'Microsoft YaHei',
         fontsize: 16,
         lineHeight: 20,
         padding: [5, 10],
         backgroundColor: '#fff',
         borderRadius: 10
       },
       indicator: [ // 指示器
         { text: '1小时以下', i: 0, max },
         { text: '1~5小时', i: 1, max },
         { text: '5~12小时', i: 2, max },
         { text: '12~24小时', i: 3, max },
         { text: '24小时以上', i: 4, max }
       ],
       splitNumber: 5, // 间隔数
       splitLine: { // 间隔线
         lineStyle: {
           width: 2,
           color: 'blue'
         }
       },
       axisLine: {
         show: false,
         lineStyle: {
           color: 'rgba(255, 255, 255, .4)'
         }
       },
       // axisLabel: { // 每个交叉点得数值
       //   show: true,
       //   color: 'rgba(255, 255, 255, .6)'
       // }
     }
   ],
   series: [
     {
       type: 'radar',
       radarIndex: 0,
       // label: { // 同data.label
       //   show: true,
       //   position: 'top',
       //   color: 'red'
       // },
       // lineStyle: { // 同data.lineStyle
       //   width: 2,
       //   type: 'dashed',
       //   join: 'round'
       // },
       legendHoverLink: true,
       data: [
         {
           value: dataList,
           name: '占用',
             symbol: 'rect', // 形状
             symbolSize: 12,
             label: {
               show: true,
               position: 'left',
               // offset: [10, -5],
               color: 'rgba(1, 252, 255, 1)',
               fontSize: 12,
               fontWeight: 'bold',
               formatter: function (params) {
               	return  `${params.value} 车次`
               }
             },
           itemStyle: {
             color: 'rgba(70, 253, 255, 1)'
           },
           lineStyle: {
             width: 2,
             type: 'dashed',
             join: 'round',
             color: 'rgba(70, 253, 255, 1)'
           },
           areaStyle: {
             color: new echarts.graphic.RadialGradient(0.6, 0.6, 1, [
               {
                 color: 'rgba(70, 253, 255, 0)',
                 offset: 0
               },
               {
                 color: 'rgba(70, 253, 255, 1)',
                 offset: 1
               }
             ]),
              opacity: 0.5
           },
           emphasis: { // 鼠标经过高亮
             itemStyle: {},
             label: {},
             lineStyle: {},
             areaStyle: {
               color: 'red'
             }
           }
         }
       ]
     }
   ]
 }