gráfico de radar echarts descripción detallada de la configuración de parámetros

En respuesta a los requisitos del proyecto, se deben lograr los siguientes efectos (por supuesto, también es la realización final):

A continuación, se establecen principalmente los siguientes parámetros

1. Número de círculo del gráfico de radar
2. El gráfico de radar admite tipos de dibujo: círculo y polígono
3. La posición del gráfico de radar en el contenedor: el centro determina la posición del centro del gráfico de radar en el contenedor
4. La configuración de texto en cada dirección del gráfico de radar
5. La distancia desde el texto en cada dirección del gráfico de radar al gráfico de radar: la distancia entre el nombre del indicador y el eje del indicador.
6. El rayo emitido desde el centro del gráfico de radar: ajustes relacionados del eje de coordenadas
7. Cada círculo del gráfico de radar, el estilo de este círculo: splitLine La línea divisoria del eje de coordenadas en el área de la cuadrícula
8. El patrón del área dividida por cada círculo del gráfico de radar.
9. El estilo de cada foco del gráfico de radar.
10. Para cada valor de círculo del gráfico de radar, el estilo de la línea compuesta por este valor
11. Acerca de las instrucciones de configuración específicas de la leyenda echarts .
12. Descripción de los elementos de configuración específicos del gráfico de radar 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: {
    
    },
};

La descripción del elemento de configuración específico puede referirse a 11 y 12

Solo hay una forma en que eacharts quiere ser competente, y es crear una demostración usted mismo. Sentido común: debe conocer este asunto por sí mismo.
Bienvenido al intercambio