echarts雷达图在react中的使用及其配置

废话不多说直接上代码,最终展示效果在最后 

 
import React, { useCallback, useState, useEffect } from "react";
import { CaretRightOutlined } from '@ant-design/icons';
import { history } from 'umi'
// import echarts from "echarts/lib/echarts"; 由于我们echarts有存cdn所以这几项不需要引入,如果你们没有则需要引入
// import "echarts/lib/chart/radar";
// import "echarts/lib/component/tooltip";
// import "echarts/lib/component/title";
// import "echarts/lib/component/markPoint";
// import "echarts/lib/component/legend";
import styled from '../../index.less'
import styles from './style.less'
import IndexSelector from "@/components/IndexSelector";
import * as cn from 'classnames'
import moment from 'moment'

const MONTHS = [
    '',
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sept',
    'Oct',
    'Nov',
    'Dec'
]

const Radar = () => {

    const [myEcharts, setMyEcharts] = useState({});
    useEffect(() => {
        const myEcharts = handleGenRadar();
        setMyEcharts(myEcharts);
        window.addEventListener("resize", handleChangeSize);
        return () => {
            window.removeEventListener("resize", handleChangeSize);
        };
    }, [])


    // 窗口大小改变时重新渲染雷达图
    const handleChangeSize = () => {
        setTimeout(() => {
            const dom = document.getElementById('radar');
            dom?.removeAttribute("_echarts_instance_");
            handleGenRadar();
        }, 1);
    };

    // 图表的配置项
    let option = {
        title: {
            // text: '52.10 %', //如果需要标题则把注释打开
            // textStyle: {
            //     color: "#35425E",
            //     fontSize: 16,
            //     lineHeight: 16,
            //     fontFamily: 'PingFangSC-Semibold'
            // },

        },
        // tooltip: {  //如果需要鼠标hover时出提示框则把注释打开
        //     position: function (pos, params, dom, rect, size) {
        //         // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        //        
        //         // var obj = { top: 60 };
        //         // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        //         // return obj;
        //     }
        // },
        //  {  position: [20, 40] },// 鼠标hover指标的提示框
        legend: {  // 图例组件
            data: [{   //图例的名称,我这里设了两个动态的时间,你们可以直接写要展示的名称
                name: MONTHS[moment().format('M') - 2 > 0 ? moment().format('M') - 2 : moment().format('M') + 10], 
            }, { name: MONTHS[moment().format('M') - 1 > 0 ? moment().format('M') - 1 : moment().format('M') + 12] }, { name: '近五年均值' }],
            top: '93px', // 图例距离顶部边距
            left: '300px', // 图例距离左侧边距
            itemWidth: 4, // 图例标记的图形宽度。[ default: 25 ]
            itemHeight: 4, // 图例标记的图形高度。[ default: 14 ]
            itemGap: 4, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            orient: 'vertical',
            // itemColor: ['#40A6DF', 'blue', 'red'],
            // 图例列表的布局朝向,'horizontal'为横向,''为纵向.
            textStyle: { // 图例的公用文本样式。
                fontSize: 14,
                height: 50,
                color: '#35425E'
            },
        },
        radar: {
            triggerEvent: true,
            // shape: 'circle',
            center: ['58.5%', '49%'], //中心坐标
            radius: [0, 98], // 圆的半径，数组的第一项是内半径，第二项是外半径。
            nameGap: 2, // 指示器名称和指示器轴的距离。[ default: 15 ]
            splitNumber: 3,  // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
            splitLine: { // (这里是指所有圆环线)坐标轴在 grid 区域中的分隔线。
                lineStyle: {
                    color: '#C3C6CA', // 分隔线颜色
                    width: 1, // 分隔线线宽
                }
            },
            splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: true,
                areaStyle: { // 分隔区域的样式设置。
                    color: '#EFF2F7 ',  // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                }
            },
            // radiusAxis: {
            //     min: 0,
            //     max: 395568.18000000005,
            //     show: true
            // },
            // polar: {
            //     radius: "75%",
            //     show: true
            // },
            name: {
                // width: '20px',
                textStyle: {
                    // color: '#4A5774',
                    color: '#9199AC',
                    // color: 'pink',
                    backgroundColor: '#EFF2F7',
                    // borderRadius: 3,
                    // padding: [1, 2],
                    opacity: 0.5,
                    fontFamily: 'PingFangSC- Regular',
                    fontSize: 7,
                    // overflow: 'truncate',

                    // ellipsis: 'true'
                    // lineHeight: '8px'
                },
                formatter: function (value) {
                    let list = value.split("");
                    let result = "";
                    for (let i = 1; i <= list.length; i++) {
                        if (!(i % 4) && list[i] != undefined) {
                            result += list[i - 1] + '\n';
                        } else {
                            result += list[i - 1];
                        }
                    }
                    return result;
                },
                // formatter: function (value: string) {
                //     if (value.length > 3) {
                //         return `${value.slice(0, 2)}...`;
                //     }
                //     return value;
                // }
            },
            // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
            indicator: [
                { name: '销售', max: 6500, min: 0 },
                { name: '研发', max: 22000, min: 0 },
                { name: '市场1', max: 45000, min: 0 },
                { name: '市场2', max: 55000, min: 0 },
                { name: '市场3', max: 55000, min: 0 },
            ]
        },
        series: [{
            // name: '三项比较',
            type: 'radar',
            symbol: 'none',
            //下面注释的这部分可以设统一的样式,也可以分开设各自的样式
            // areaStyle: { // 单项区域填充样式
            //     normal: {
            //         color: '#17A785' // 填充的颜色。[ default: "#000" ]
            //     }
            // },
            // itemStyle: { // 折线拐点标志的样式。
            //     normal: { // 普通状态时的样式
            //         lineStyle: {
            //             width: 1,
            //             color: ['#40A6DF', '#17A785', 'blue']
            //         },
            //         // opacity: 0.2
            //     },
            //     emphasis: { // 高亮时的样式
            //         lineStyle: {
            //             width: 2
            //         },
            //         opacity: 1
            //     }
            // },
            data: [  //数据
                {
                    value: [4300, 10000, 28000, 35000, 50000, 19000],
                    name: MONTHS[moment().format('M') - 2 > 0 ? moment().format('M') - 2 : moment().format('M') + 10],
                    // symbol: 'circle',
                    // symbolSize: 5,
                    areaStyle: { // 单项区域填充样式
                        normal: {
                            color: 'rgba(64,166,223,0.14)',// 填充的颜色。[ default: "#000" ]
                        },
                        emphasis: {
                            color: 'rgba(64,166,223,0.60)',// 填充的颜色。[ default: "#000" ]
                        }
                    },
                    lineStyle: {
                        width: 1,
                        color: '#40A6DF'
                    },
                    itemStyle: {
                        normal: {
                            color: '#40A6DF',
                            width: 1,
                        }
                    },


                },
                {
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: MONTHS[moment().format('M') - 1 > 0 ? moment().format('M') - 1 : moment().format('M') + 12],
                    areaStyle: {
                        normal: {
                            color: 'rgba(23,167,133,0.14)'
                        },
                        emphasis: {
                            color: 'rgba(23,167,133,0.60)',// 填充的颜色。[ default: "#000" ]
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#17A785',
                        }
                    },
                    lineStyle: {
                        width: 1,
                        color: '#17A785'
                    },
                },
                {
                    value: [1000, 5000, 8000, 12000, 22000, 12000],
                    name: '近五年均值',
                    areaStyle: {
                        normal: {
                            color: 'rgba(52,87,196,0.14)'
                        },
                        emphasis: {
                            color: 'rgba(52,87,196,0.60)',// 填充的颜色。[ default: "#000" ]
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#3457C4',
                        },
                    },
                    lineStyle: {
                        width: 1,
                        color: '#3457C4',
                        type: 'dashed'
                    },
                }
            ]
        }]
    };
    const handleGenRadar = () => {
        const dom = document.getElementById('radar');
        const myChart = echarts.init(dom);  //计入dom初始化实例
        myChart.setOption(option);
        return myChart
    };

    return <div className={styles.radar}  >
        <div id='radar' style={{ height: "538px", width: "100%" }}></div>

    </div>;
};

export default Radar;

最终效果展示: