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中即可预览和更改成自己想要的。