echarts实现多边雷达图

import React from 'react';
import ReactEchartsCore from 'echarts-for-react/lib/core';

import EmptyData from '@/components/empty-data/empty-data';

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/radar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import PublicTitle from '../echartsOption/title';

type HonorLevelRadarProps = {
  data: any[];
};

const HonorLevelRadar: React.FC<HonorLevelRadarProps> = ({ data }) => {
  data = [
    { value: 465, label: '国家级荣誉' },
    { value: 465, label: '省级荣誉' },
   { value: 465, label: '市级荣誉' },
   { value: 465, label: '区级荣誉' },
  { value: 465, label: '校级荣誉' },
   ];

  const levelText = ['国家级荣誉','省级荣誉','市级荣誉','区级荣誉','校级荣誉']

  /** 处理后台传入数据的函数 */

  const changeData = (soluteData: any[]) => {
    const value = soluteData.map((i) => i.value);
    // 深度拷贝
    const newValue = JSON.parse(JSON.stringify(value));
    // 对value值从大到小排序
    newValue.sort((a: number, b: number) => b - a);
    const name = soluteData.map((_i, index) => {
      const textData = {
        text: levelText[index],
        axisLabel: {},
        //取各个边中的最大值作为max
        max: newValue[0] <= 10 ? 10 : newValue[0],
      };
      index === 0
        ? // 让雷达图出现刻度
          (textData.axisLabel = {
            show: true,
            textStyle: { fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' },
          })
        : '';

      return textData;
    });
    return { values: value, names: name };
  };

  const showValue = changeData(data);

  const isEmpty = data && data.length;

  const getOption = () => {
    return {
      title: {
        text: '荣誉等级雷达图',
        subtext: '统计荣誉等级分布情况',
        ...PublicTitle,
      },
      color: ['#5B8FF9'],

      series: {
        name: '荣誉等级',
        type: 'radar',
        axisLabel: { show: true, textStyle: { fontSize: 12, color: 'rgba(0, 0, 0, 0.45)' } },
        tooltip: {
          trigger: 'item',
        },
        // 控制雷达图各个定点的圆点
        symbol: 'none',
        // 控制雷达图折现线条
        // lineStyle: {normal: {color:'#005AAF',width:4}},
        data: [
          {
            value: showValue.values,
            //控制雷达图填充的颜色
            areaStyle: {
              color: 'rgba(91, 143, 249, 0.1)',
            },
          },
        ],
      },
      radar: [
        {
          // 雷达图各个维度的控制
          indicator: showValue.names,
          // 控制雷达图的大小
          radius: 140,
          // 雷达图的位置
          center: ['50%', '60%'],
        },
      ],
      tooltip: {},
    };
  };

  return (
    <>
      {isEmpty ? (
        <ReactEchartsCore
          style={{ background: '#fff', height: '376px' }}
          echarts={echarts}
          option={getOption()}
        />
      ) : (
        <EmptyData description="暂无荣誉等级数据统计" />
      )}
    </>
  );
};

export default HonorLevelRadar;