效果

image.png

代码

  1. import { useRef, useEffect } from 'react';
  2. import * as echarts from 'echarts';
  3. import _ from 'lodash';
  5. const data = [
  6.   {
  7.     text: '第一项',
  8.     num: 100,
  9.   },
  10.   {
  11.     text: '第二项',
  12.     num: 55,
  13.   },
  14.   {
  15.     text: '第三项',
  16.     num: 88,
  17.   },
  18.   {
  19.     text: '第四项',
  20.     num: 66,
  21.   },
  22.   {
  23.     text: '第五项',
  24.     num: 46,
  25.   },
  26. ];
  28. const max = _.maxBy(data, (item) => item.num)?.num;
  30. const option: echarts.EChartsOption = {
  31.   normal: {
  32.     backgroundColor: '',
  33.   },
  34.   tooltip: {
  35.     show: true,
  36.     trigger: 'item',
  37.     axisPointer: {
  38.       type: 'shadow',
  39.     },
  40.     backgroundColor: 'rgba(0, 0, 0, 0.6)',
  41.     borderWidth: 1,
  42.     borderColor: '#798CB2',
  43.     textStyle: {
  44.       fontSize: 24,
  45.       color: '#fff',
  46.     },
  47.   },
  48.   radar: {
  49.     // shape: 'circle',
  50.     radius: "60%", // 大小
  51.     center: ["50%", "50%"], // 图的位置
  52.     nameGap: 10, // 图中工艺等字距离图的距离
  53.     name: { // 配置名称
  54.       rich: { // 配置名称样式
  55.         a: {
  56.           color: '#fff',
  57.           fontSize: 14,
  58.         },
  59.         b: {
  60.           color: 'rgba(255, 255, 255, 0.6)',
  61.           fontSize: 14,
  62.         },
  63.       },
  64.       formatter: (value: string, indicator: any) => {
  65.         return `{a|${value}}\n{b|（${indicator.count}）}`;
  66.       },
  67.     },
  68.     splitArea: {
  69.       areaStyle: {
  70.         color: ['transparent'],
  71.       },
  72.     },
  73.     indicator: data.map((item) => ({
  74.       text: item.text,
  75.       max,
  76.       num: item.num,
  77.     })),
  78.   },
  79.   series: [
  80.     {
  81.       name: '标题名称',
  82.       symbol: 'none',
  83.       areaStyle: {
  84.         color: 'rgba(109, 200, 236, 0.4)',
  85.       },
  86.       itemStyle: {
  87.         color: 'rgba(109, 200, 236, 1)',
  88.       },
  89.       lineStyle: {
  90.         color: 'rgba(109, 200, 236, 1)',
  91.         width: 2,
  92.       },
  93.       type: 'radar',
  94.       data: [data.map((item) => item.num)],
  95.     },
  96.   ],
  97. };
  99. export default () => {
  100.   const chartRef = useRef<HTMLDivElement>(null);
  101.   const myChart = useRef<echarts.ECharts>();
  103.   const initChart = () => {
  104.     if (!myChart.current && chartRef?.current) {
  105.       myChart.current = echarts.init(chartRef.current);
  106.       myChart.current.setOption(option);
  107.     }
  108.   };
  110.   useEffect(() => {
  111.     initChart();
  112.   }, []);
  114.   return (
  115.       <div style={{ width: 300, height: 300 }} ref={chartRef} />
  116.   );
  117. };

注意

雷达图的 grid 不生效，可以使用 radar: { radius: "60%", center: ["50%", "50%"]} 调整大小和位置。