Echarts雷达图根据数值确定颜色
Echarts雷达图根据数值确定颜色
示例需求：
1：小于60时返回红色
2：小于80时返回黄色
3：大于等于80时返回绿色
实现代码：
javascript
// 定义颜色列表，用于根据数值范围显示不同的颜色
const colorList = ['#F1606C', '#EBAC23', '#6DF8A3']; // 红色、黄色、绿色
// 数据名称数组，每个元素代表一个数据项的名称
const dataName = ['运行质量', '利用率', '运行效率', '运行环境', '运行性能'];
// 每个数据项的最大值，这里统一设置为100
const dataMax = [100, 100, 100, 100, 100];
// 数据值数组，每个元素对应dataName中的数据项的实际值
const dataValue = [57, 63, 85, 75, 70];
// 标题文本
const titleText = 80;
// 根据titleText确定标题颜色
const titleColor = getColor(titleText);
// 初始化雷达图指示器数组
const indicator = [];
for (let i = 0; i < dataName.length; i++) {
// 将每个数据项的名称和最大值加入到indicator数组中
indicator.push({ name: dataName[i], max: dataMax[i] });
}
/**
* 判断对象是否存在于数组中。如果存在，返回其索引；否则返回false。
* @param arrays - 要检查的数组
* @param obj - 要查找的对象
* @return {boolean|number} - 如果找到，则返回索引位置；未找到则返回false
*/
function contains(arrays, obj) {
let i = arrays.length;
while (i--) {
if (arrays[i] === obj) {
return i;
}
}
return false;
}
/**
* 根据给定的数值选择对应的颜色。
* @param value - 需要判断颜色的数值
* @returns {string} - 返回对应的颜色字符串
*/
function getColor(value) {
if (value < 60) {
return colorList[0]; // 小于60时返回红色
} else if (value < 80) {
return colorList[1]; // 小于80时返回黄色
}
return colorList[2]; // 大于等于80时返回绿色
}
// ECharts图表配置项
option = {
backgroundColor: '#0E1327', // 设置图表背景颜色为深色
title: {
text: titleText, // 标题文本，即最大的数据值
subtext: '', // 副标题，这里为空
x: 'center',
y: 'center', // 标题的位置设置为中心
textStyle: {
color: titleColor,
fontSize: 50,
fontWeight: 'bold',
fontFamily: 'PingFangSC-Medium, PingFang SC, serif'
}
},
tooltip: {
show: true, // 显示提示框组件
trigger: 'item', // 触发类型为数据项触发
formatter(params) {
// 自定义提示框内容格式
let html = '';
for (let i = 0; i < dataName.length; i++) {
html +=
`<div style="width: 130px; line-height: 20px; display: flex; justify-content: space-between;">` +
`<span>${dataName[i]}</span>` + // 数据项名称
`<span style="color:${getColor(dataValue[i])}">${dataValue[i]}</span>` + // 对应的数据值和颜色
'</div>';
}
return html;
}
},
radar: {
center: ['50%', '50%'], // 雷达图中心位置
radius: '63%', // 半径大小
splitNumber: 5, // 分割段数
nameGap: 4, // 文字距离图形的距离
splitArea: {
areaStyle: {
color: [
'rgba(227,227,227,0.1)',
'rgba(227,227,227,0.2)',
'rgba(227,227,227,0.3)',
'rgba(227,227,227,0.4)',
'rgba(227,227,227,0.5)',
'rgba(227,227,227,0.6)'
].reverse()
}
}, // 区域填充颜色
startAngle: 90, // 开始角度
axisLabel: { show: false }, // 是否显示标签
axisLine: { show: false, lineStyle: { color: 'transparent' } }, // 坐标轴线样式
splitLine: { show: false, lineStyle: { color: 'transparent' } }, // 分割线样式
name: {
formatter(value) {
const i = contains(dataName, value); // 获取当前指标在dataName中的索引
const percent = dataValue[i];
const name = dataName[i];
let b = percent < 60 ? 'b1' : percent < 80 ? 'b2' : 'b3'; // 根据百分比确定样式
return `{${b}|${percent}} \n {a1|${name} }`; // 返回格式化后的文本
},
textStyle: {
rich: {
a1: { fontSize: 18, color: '#fff', align: 'center', padding: 0 },
b1: {
fontSize: 18,
align: 'center',
color: colorList[0],
padding: 0
},
b2: {
fontSize: 18,
color: colorList[1],
align: 'center',
padding: 0
},
b3: { fontSize: 18, align: 'center', color: colorList[2], padding: 0 }
}
}
},
indicator: indicator // 使用之前初始化好的indicator数组
},
series: [
{
name: '综合评分',
type: 'radar',
symbol: 'circle',
symbolSize: 3,
areaStyle: { normal: { color: titleColor, opacity: 0.1 } },
itemStyle: {
color: titleColor,
opacity: 0.5,
borderColor: titleColor,
borderWidth: 1
},
lineStyle: { normal: { color: titleColor, width: 2, opacity: 0.5 } },
data: [dataValue]
}
]
};以上代码直接复制到Echarts中即可预览和更改成自己想要的。
