Echart Radar 自定义inicator

背景：数据展示要求类似下图左侧的显示效果，在echart官网例子上看，没有自定义indicater的例子，所以尝试捣鼓一下，在网上看了些参考和官方的例子之后，实现了以下效果

自定义的话，主要有几个点

inidcator的内容，在axisName这个配置项里面修改。要改成多行的话，用formatter重新生成内容 echarts.apache.org/zh/option.h… 但是设计稿里面还要显示两个有颜色的点，所有还要用到rich，来自定义样式，再用echart的语法来合成即可

成品可用下面的代码在echart官网上测试，附链接

echarts.apache.org/examples/zh…

option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: 'Customized Radar Chart'
  },
  legend: {},
  radar: [
    {
      indicator: [
        { text: 'Indicator1', num: 1, num2: 3 },
        { text: 'Indicator2' },
        { text: 'Indicator3' },
        { text: 'Indicator4' },
        { text: 'Indicator5' }
      ],
      center: ['25%', '50%'],
      radius: 120,
      startAngle: 90,
      splitNumber: 4,
      shape: 'circle',
      // 主要是这里
      axisName: {
        // 自定义formatter
        formatter: function(params, indicator) {
          return `${params}` + "\n"+ "{dot1|}" + `${indicator.num}` + "{dot2|}" + `${indicator.num2}`
        },
        // rich里面自定义样式
        rich: {
          dot1: {
            borderRadius: 50,
            height:5,
            width: 5,
            backgroundColor: 'green'
          },
          dot2: {
            color: 'yellow',
            borderRadius: 50,
            height:5,
            width: 5,
            backgroundColor: 'yellow'
          }
        },
        color: 'black'
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(211, 253, 250, 0.8)'
        }
      }
    },
    {
      indicator: [
        { text: 'Indicator1', max: 150 },
        { text: 'Indicator2', max: 150 },
        { text: 'Indicator3', max: 150 },
        { text: 'Indicator4', max: 120 },
        { text: 'Indicator5', max: 108 },
        { text: 'Indicator6', max: 72 }
      ],
      center: ['75%', '50%'],
      radius: 120,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ],
  series: [
    {
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [100, 8, 0.4, -80, 2000],
          name: 'Data A'
        },
        {
          value: [60, 5, 0.3, -100, 1500],
          name: 'Data B',
          areaStyle: {
            color: 'rgba(255, 228, 52, 0.6)'
          }
        }
      ]
    },
    {
      type: 'radar',
      radarIndex: 1,
      data: [
        {
          value: [120, 118, 130, 100, 99, 70],
          name: 'Data C',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'dashed'
          },
          label: {
            show: true,
            formatter: function (params: any) {
              return params.value as string;
            }
          }
        },
        {
          value: [100, 93, 50, 90, 70, 60],
          name: 'Data D',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
              {
                color: 'rgba(255, 145, 124, 0.1)',
                offset: 0
              },
              {
                color: 'rgba(255, 145, 124, 0.9)',
                offset: 1
              }
            ])
          }
        }
      ]
    }
  ]
};

参考： www.cnblogs.com/chen-yi-yi/…