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\'
        }
      ]
    }
  ]
};