Echarts雷达图一个模版搞定(详细注释)

 效果图：

代码：

option = {
  //背景色
  // backgroundColor: 'rgba(204,204,204,0.7)',
  //雷达图大标题
  title: {
    text: 'Basic Radar Chart',
    textStyle:{
      color:'#000000',
      fontSize: 20,
    },
  },
  //图例设置
  legend: {
    icon: 'roundRect', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    orient :'horizontal', // 'horizontal',''.
    top:'20%', 
    left:'35%', 
    textStyle:{
      color:'#000000',
      fontSize: 15,
      // fontWeight: 'bold',
    },
    data: ['Allocated Budget', 'Actual Spending'],
  },
  radar: {
    //雷达图大小缩放
    radius: '40%',
    //雷达部分背景颜色
    // splitArea:{
    //   show:true,
    //   areaStyle:{
    //     color : 'rgba(255, 164, 140, 0.1)',
    //   }
    // },
    // 雷达图圈圈形状设置
    // shape: 'circle',
    // 雷达图圈数设置
    splitNumber: 3, 
    // 雷达图圈圈宽度和颜色
    splitLine:{
      show:true,
      lineStyle:{
        width:1,
        color: '#a1a3a6',
      },
    },
    //雷达图坐标轴宽度和颜色
    axisLine:{
      lineStyle:{
        width:1,
        color: '#a1a3a6',
      },
    },
    // 坐标轴刻度大小
    // axisLabel:{
    //   show : true,
    //   fontSize: 10,
    // },
    // 坐标轴category字体大小（通过调radius也可）
    // name: {
    //   textStyle: {
    //     fontSize: 15,
    //   }
    // },
    // 坐标轴设置
    indicator: [
      { name: 'Sales',  max: 4000, color:'#007d65'},
      { name: 'Administration', max: 16000 , color:'#007d65'},
      { name: 'Information Technology', max: 30000, color:'#007d65' },
      { name: 'Customer Support', max: 38000, color:'##007d65' },
      { name: 'Development', max: 52000, color:'#007d65' },
      { name: 'Marketing', max: 25000, color:'#007d65' }
    ],
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        // model 1  -------------------------------------------------
        {
          // 各category的值
          value: [2000, 3000, 20000, 35000, 50000, 18000],
          // 模型名称
          name: 'Allocated Budget',
          //在拐点处显示相应的label
          label: {
              show: true,
              fontSize: 15,
              formatter: (params: any) => {
                if (params.value == 2000){
                  return 'Yes'
                }
              }
          },
          //设置边框颜色
					itemStyle:{
            color:'rgba(255, 164, 140, 1)', 
            opacity: 1.0,
          },
          //设置区域颜色
          areaStyle:{
            opacity: 0.5, //透明度
            color: 'rgba(255, 164, 140, 1)',
          }
				},
        // model 2  -------------------------------------------------
        {
          value: ['No', 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};