echarts雷达图详细参数配置说明

应项目需求需要实现以下效果(当然也是最终的实现)：

接下来主要关于下面的几个参数进行设置

1. 雷达图的圈数
2. 雷达图支持绘制的类型：圆形和多角形
3. 雷达图在容器中的位置：center决定也就是雷达图中心在容器的位置
4. 雷达图每个方向的文字配置
5. 雷达图每个方向的文字到雷达图的距离：指示器名称和指示器轴的距离。
6. 雷达图中心发出的射线：坐标轴轴线相关设置
7. 雷达图每一圈，这个圈的样式： splitLine坐标轴在 grid 区域中的分隔线
8. 雷达图每一圈所分割出的区域的样式
9. 雷达图每一个焦点的样式
10. 雷达图每一个圈值，这个值组成的线的样式
11. 关于echarts图例的具体配置说明.
12. 关于echarts雷达图的具体配置项说明.

export default {
    
    
  data() {
    
    
    return {
    
    
        selfRating:[4300, 10000, 28000, 35000, 50000],
        seniorRating:[6000, 14000, 28000, 31000, 42000]
    };
  },
  created() {
    
    },
  mounted() {
    
    
    var radar = echarts.init(document.getElementById("radar_container"));
    // 绘制图表
    var option = {
    
    
      tooltip: {
    
    },
      //图例
      legend: {
    
    
        type: "plain",//图例的类型
        show: true,//是否显示图例
        data: ["自我评分", "师兄评分"],
        right: 40,
        top: 230,
        orient: "vertical",
        itemGap: 29,
        itemWidth: 19,
        itemHeight: 7,
        textStyle: {
    
    
          fontSize: 18,
          fontFamily: "Source Han Sans CN",
          fontWeight: "bold",
          color: "#333333",
        },
      },
      radar: {
    
    
        // shape: 'circle', //雷达图绘制类型(圆型和多角形)，支持 'polygon' 和 'circle',默认    是'polygon'
        splitNumber: 4, // 雷达图圈数设置
        center:[220,180],//雷达图位置：中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        name: {
    
    //每个方向的文字配置：也就是，软件，业务，技能，素质，爱好这些字的配置
            show: true,
            fontSize: 18,
            fontFamily: "Source Han Sans CN",
            fontWeight: "bold",
            color: "#333333",
            // padding: [3, 5],
        },
         nameGap = 15 //指示器名称和指示器轴的距离。
        axisLine: {
    
    
          show: false, //雷达图中心发出的射线：坐标轴轴线相关设置
        },
        splitLine: {
    
    //雷达图每一圈，这个圈的样式
            show: true,
            lineStyle: {
    
    
                type: "dashed"
            }
        },
         splitArea: {
    
    // 雷达图每一圈所分割出的区域的样式
             show: true
         },
        indicator: [
          {
    
     name: "软件", max: 6500},
          {
    
     name: "业务", max: 16000 },
          {
    
     name: "素质", max: 30000 },
          {
    
     name: "爱好", max: 38000 },
          {
    
     name: "技能", max: 52000 },
          //   { name: "市场", max: 25000 },
        ],
      },
      series: [
        {
    
    
          type: "radar",
          // areaStyle: {normal: {}},
          symbol: "circle", // 焦点的样式，还可以取值'rect','angle'等
          symbolSize: 0, // 焦点的大小

          data: [
            {
    
    
              value: this.selfRating,
              name: "自我评分",
              itemStyle: {
    
    //雷达图每一个焦点的样式
                normal: {
    
    
                  color: "rgba(252, 154, 14, 1)",
                  lineStyle: {
    
    
                    color: "rgba(252, 154, 14, 1)",
                  },
                },
              },
            },
            {
    
    
              value: this.seniorRating,
              name: "师兄评分",
              itemStyle: {
    
    
                normal: {
    
    
                  color: "rgba(46, 90, 251, 1)",
                  lineStyle: {
    
    
                    color: "rgba(46, 90, 251, 1)",
                  },
                },
              },
            },
          ],
        },
      ],
    };
    radar.setOption(option);
  },
  methods: {
    
    },
  computed: {
    
    },
};

具体的配置项说明可以参考11和12

eacharts想熟练只有一个方法，就是自己创建一个demo自己多常识：绝知此事须躬行
欢迎交流