ui效果如下图：
echarts使用极坐标+雷达+南丁玫瑰实现效果如下：
废话不多说，直接上图上代码
const arr = [ // series所需名称，数据值和底色
{
name: '本底指数',
value: 80,
color: {
type: 'radial',
x: 0.25,
y: 1,
r: 1,
colorStops: [
{
offset: 0,
color: '#00D17A09', // 0% 处的颜色
},
{
offset: 1,
color: '#00D17AFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
{
name: '生境指数',
value: 100,
color: {
type: 'radial',
x: 0,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: '#00D17A09', // 0% 处的颜色
},
{
offset: 1,
color: '#00D17AFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
{
name: '生物指数',
value: 88,
color: {
type: 'radial',
x: 0.25,
y: 0,
r: 1,
colorStops: [
{
offset: 0,
color: '#00D17A09', // 0% 处的颜色
},
{
offset: 1,
color: '#00D17AFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
{
name: '价值指数',
value: 62,
color: {
type: 'radial',
x: 0.75,
y: 0,
r: 1,
colorStops: [
{
offset: 0,
color: 'rgba(23, 119, 255, 0.1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(23, 119, 255, 0.75)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
{
name: '舒适指数',
value: 99,
color: {
type: 'radial',
x: 1,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: '#00D17A09', // 0% 处的颜色
},
{
offset: 1,
color: '#00D17AFF', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
{
name: '资源指数',
value: 40,
color: {
type: 'radial',
x: 0.75,
y: 1,
r: 1,
colorStops: [
{
offset: 0,
color: 'rgba(217, 145, 0, 0.1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(217, 145, 0, 0.75)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
}
},
];
const series = [{
z: 9,
type: 'pie',
radius: [50, '80%'], // 半径设置
startAngle: 90, // 起始角度
roseType: 'area',
clockwise: true, // 顺时针
label: { // 不在玫瑰色块显示label
show: false,
},
data: []
}];
arr.forEach((e, index) => {
series[0].data.push({
name: e.name,
value: e.value + 5, // 注意：这里需要调整+5，因为玫瑰图内部直径与极坐标图相差10
itemStyle: {
color: e.color
}
});
});
option = {
// 极坐标图设置刻度和刻度值以及环和环外突出的4个顶点刻度
polar: {
radius: [63, '80%'], // 半径设置内环直径比玫瑰图多10
z:5,
},
radiusAxis: {
min: 0,
max: 100,
interval: 20,
z: 10,
axisLine: {
show: true,
lineStyle: {
color: 'rgba(134, 144, 156, 0.5)'
}
},
axisLabel: {
color: '#86909C',
fontSize: 11,
fontFamily: 'AlibabaPuHuiTi_3_55_Regular'
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(134, 144, 156, 0.2)',
}
}
},
angleAxis: {
type: 'category',
data: ['a', 'b', 'c', 'd'],
clockwise: true,
startAngle: 0,
splitNumber: 5,
axisLine: {
show: false,
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(134, 144, 156, 0.50)'
}
},
},
// 雷达图
radar: [
// 设置环外的label和环内的分隔面的样式，以及label的起始角度
{
indicator: [
{ max: 100, text: '本底指数', color: '#86909C' },
{ max: 100, text: '资源指数', color: '#86909C' },
{ max: 100, text: '舒适指数', color: '#86909C' },
{ max: 100, text: '价值指数', color: '#86909C' },
{ max: 100, text: '生物指数', color: '#86909C' },
{ max: 100, text: '生境指数', color: '#86909C' },
],
center: ['50%', '50%'],
radius: [53, '80%'], //预警环（红）
startAngle: 360 / arr.length,
splitNumber: 5,
shape: 'circle',
splitArea: {
areaStyle: {
color: ['#ffffff'],
shadowBlur: 0
}
},
axisLine: {
show: false,
},
axisName: {
show: true
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
z: 6
},
// 设置雷达图的虚线分割线，将整个圆切分成12份
{
indicator: [
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
],
center: ['50%', '50%'],
radius: [53, '80%'],
startAngle: 0,
splitNumber: 5,
shape: 'circle',
splitArea: {
areaStyle: {
color: ['#ffffff'],
shadowBlur: 0
}
},
axisLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(134, 144, 156, 0.2)'
}
},
axisName: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(134,144,156,0.15)'
}
},
axisLabel: {
show: false
},
z: 7
},
// 将雷达图切分成4份，以实现分隔
{
indicator: [
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
{ max: 100, text: '', color: '#262626' },
],
center: ['50%', '50%'],
radius: [53, '80%'],
startAngle: 0,
splitNumber: 5,
shape: 'circle',
splitArea: {
areaStyle: {
color: ['#ffffff'],
shadowBlur: 0
}
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(134, 144, 156, 0.3)'
}
},
axisName: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
z: 7
}
],
// 南丁玫瑰图设置
series: series,
};
