JS模拟实现Excel条件格式中的色阶效果

getColor(value, min, max, colors) {
  if (value < min) return colors[0]
  if (value > max) return colors[colors.length - 1]
  // 将 hex 颜色值转换为 rgb 格式
  colors = colors.map(c => Color(c).object())
  const colorsLen = colors.length;
  // 计算当前值在最大最小值中的位置
  const rang = max - min;
  let weight = (value - min) / rang;
  // 计算颜色列表的最后一个索引值
  const endIndex = Math.max(Math.ceil((colorsLen - 1) * weight), 1);
  // 获取两个颜色最小颜色（起始色）、最大颜色（结束色）
  const minColor = colors[endIndex - 1]
  const maxColor = colors[endIndex]
  // 计算色阶比例
  weight = weight * (colorsLen - 1) - (endIndex - 1)
  // 线性插值公式
  const r = (1 - weight) * minColor.r + weight * maxColor.r
  const g = (1 - weight) * minColor.g + weight * maxColor.g
  const b = (1 - weight) * minColor.b + weight * maxColor.b
  return `rgb(${r},${g},${b})`
}

<template>
  <el-table
    :data="tableData"
    border
    stripe
    style="width: 80%"
    :cell-style="cellStyle"
  >
    <el-table-column
      v-for="item in columns"
      sortable
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
    >
      <template slot-scope="scope">
        <span class="cell-value">{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

import Color from 'color';
import { tableColumns, tableData } from './mock-data.js';
export default {
  name: 'color-scale',
  data() {
    return {
      // 数据mock部分放在下方
      columns: tableColumns,
      tableData: tableData(),
      // 红黄绿
      colors: ['#f8696b', '#ffeb84', '#63be7b'],
      // 绿黄红
      colors2: ['#63be7b', '#ffeb84', '#f8696b']
    }
  },
  methods: {
    getColor(value, min, max, colors) {
      // 同上... 
    },
    cellStyle({ row, column }) {
      const { property } = column;
      if (property !== 'car') {
        const obj = this.columns.find(item => item.prop === property);
        const min = obj.min;
        const max = obj.max;
        const cellVal = row[property]
        const colors = property === 'order' ? this.colors2 : this.colors
        return {
          background: this.getColor(cellVal, min, max, colors)
        }
      }
      return {}
    }
  }
}

// mock-data.js
export const tableColumns = [
  {
    prop: 'car',
    label: '车型',
    min: 1,
    max: 20
  },
  {
    prop: 'order',
    label: '订单量',
    min: 10,
    max: 30
  },
  {
    prop: 'sale',
    label: '销售额',
    min: 100,
    max: 120
  },
  {
    prop: 'aggregate',
    label: '呈聚合状',
    min: 10,
    max: 104
  },
  {
    prop: 'uneven',
    label: '随机数据',
    min: 50,
    max: 5000
  }
];
export const tableData = function () {
  const aggregateNums = [10, 20, 30, 40, 50, 60, 70, 80, 81, 82, 83, 84, 85, 86, 87, 100, 101, 102, 103, 104];
  return Array.from({ length: 20 }, (_, index) => ({
    car: `车型${index + 1}`,
    order: index + 10,
    sale: index + 100,
    aggregate: aggregateNums[index],
    uneven: getRandomIntInclusive(50, 5000) // 随机
  }))
}
export const getRandomIntInclusive = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}