Echarts雷达图根据数值确定颜色

Echarts雷达图根据数值确定颜色

示例需求：
1：小于60时返回红色
2：小于80时返回黄色
3：大于等于80时返回绿色

---

实现代码：

// 定义颜色列表，用于根据数值范围显示不同的颜色
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中即可预览和更改成自己想要的。