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;