gt_client_pad/src/components/ManagementPage/RadarChartModule.js

/*
//y轴显示数据
Data:{
  type:number, 0（实线） 1虚线（预测）  2（填充）
  name:string,
  yIndex:number, //yName的下标索引（第几个y坐标轴）
  data:string[],
}

props：{
  yName:string || string[], //y轴名称  一个或多个  
  xData:string[],  //x轴时间数据
  dataList:Data[],  //折线的数据列表
  currentType:string, //当前选择那个tabs 需要外部更新当前选中type时传入
  typeList:string[],  //图表下的选择类型列表
  onChange:(id:number)=>{}
}
*/

import { Empty } from 'antd';
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
import styles from './index.less';

//图表模块
const RadarChartModule = (props) => {
  const chartDomRef = useRef();
  const chartRef = useRef();
  const { indicator, data, name = '' } = props;
  useEffect(() => {
    chartRef.current = echarts.init(chartDomRef.current);
    window.addEventListener('resize', resetChart);
    return () => window.removeEventListener('resize', resetChart);
  }, []);

  useEffect(() => {
    if (!chartRef.current) return;
    const option = { ...defaultOption };
    option.radar.indicator = indicator;
    option.series = [{ ...option.series[0], data: data, name }];
    console.log(JSON.stringify(option));
    chartRef.current.clear();
    chartRef.current.setOption(option);
    chartRef.current.resize();
  }, [indicator, data]);

  const resetChart = () => {
    if (chartRef.current) chartRef.current.resize();
  };

  const getStyle = () => {
    if (data && data.length != 0) return { width: '100%', height: '100%' };
    else return { width: '100%', height: '100%', display: 'none' };
  };

  return (
    <div className={styles.content}>
      <div style={getStyle()} ref={chartDomRef} />
      {(!data || data.length == 0) && <Empty />}
    </div>
  );
};
export default RadarChartModule;
const colors = [
  // '#666600',
  // '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc',
];
const defaultOption = {
  color: colors,
  tooltip: {
    trigger: 'item',
  },
  radar: {
    name: {
      textStyle: {
        fontSize: 12,
      },
    },
    splitArea: {
      areaStyle: {
        color: [
          'rgba(27, 133, 168, 0.8)',
          'rgba(27, 133, 168, 0.7)',
          'rgba(27, 133, 168, 0.6)',
          'rgba(27, 133, 168, 0.4)',
          'rgba(27, 133, 168, 0.3)',
        ],
        // shadowColor: 'rgba(0, 0, 0, 0.2)',
        // shadowBlur: 10
      },
    },
    axisLine: {
      lineStyle: {
        color: '#238BB6',
      },
    },
    splitLine: {
      show: false,
    },
    indicator: [
      { name: 'Sales' },
      { name: 'Administration' },
      { name: 'Information Technology' },
      { name: 'Customer Support' },
      { name: 'Development' },
      { name: 'Marketing' },
    ],
  },
  series: [
    {
      name: '',
      type: 'radar',
      tooltip: {
        trigger: 'item',
      },
      symbol: 'none',
      // areaStyle: {},
      data: [
        {
          value: [2, 3, 0, 100, 0, 1],
        },
        {
          value: [3, 5, 10, 90, 0, 1],
        },
      ],
    },
  ],
};