JS模擬實現Excel條件格式中的色階效果

更新時間：2023年05月22日 16:59:12 作者：旋渦

這篇文章主要為大家詳細介紹了如何利用JavaScript模擬實現Excel條件格式中的色階效果，文中的示例代碼講解詳細，感興趣的小伙伴可以嘗試一下

需求背景

公司做的數據分析系統中想要將Excel中的條件格式功能搬過來。原因：純表格中的數據展示只有字符沒有樣式，比較難發(fā)現更多維度的信息，當有了色階效果后分析人員可以更容易在數據中發(fā)現更多信息如：是否波動劇烈、是否呈聚合趨勢、是否有規(guī)律等。

先看Excel的標準效果：

下面我們試著分析如何實現這樣的效果。

需求分析

按列展示、要根據單元格的值自動計算出對應的色階值，將對應的顏色填充到單元格中。按此分析可以肯定的是這不是一個簡單的CSS漸變可以實現的，這里會涉及到對色值之間的色階計算、單元格需要進行計算來動態(tài)生成樣式。

實現邏輯

與上一篇數據條的實現有個相同的前提，我們要知道每列數據的最大值max和最小值min，以及計算當前值在最大最小值中的位置。

先來實現一個獲取色階顏色值的方法，關于色階的計算使用到的是線性插值的方式，有一個標準的公式，下面是 ChatGPT 回答：

實現代碼：用到了一個顏色轉換庫：Color

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},$)`
}

完整代碼

代碼使用 Vue + ElementUI

template 部分

<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>

script 部分

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 數據

不重要，感興趣可以參考

// 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;
}