废话不多说直接上代码,最终展示效果在最后
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;
最终效果展示: