colorGradualChange(data) {
let groups = [
[
"3F01S",
"3F02C",
"3F03S",
"3F04C",
"3F05S",
"3F06C",
"3F07C",
"3F09S",
"2F01S",
"2F02S",
],
[
"4F01S",
"4F02C",
"4F03C",
"4F04S",
"4F05C",
"4F06S",
"4F07C",
"4F09S",
],
["5F03C", "5F04C", "5F05C", "5F06C"],
["7F01C", "7F02S", "7F03S", "7F04C"],
];
groups.forEach((group, j) => {
const arr = [];
for (const key of group) {
data.slice(0, data.length - 2).forEach((value, index) => {
value[key]
? arr.push({
value: (value[key] + "").replace("%", ""),
key: key,
rowIndex: index,
})
: "";
});
}
this.ratio[j] = arr;
});
},
tabCellStyle({ column, rowIndex, columnIndex }) {
for (const item of this.ratio[0]) {
if (column.property === item.key && rowIndex === item.rowIndex) {
return (
" background-color: #81CE9C; background-image: linear-gradient(to right, #81CE9C, #D4EEDD " +
item.value * 100 +
"%,white 0%);"
);
}
}
for (const item of this.ratio[1]) {
if (column.property === item.key && rowIndex === item.rowIndex) {
return (
" background-color: #D70e81; background-image: linear-gradient(to right, #D70e81, #EA87BF " +
item.value * 100 +
"%,white 0%);"
);
}
}
for (const item of this.ratio[2]) {
if (column.property === item.key && rowIndex === item.rowIndex) {
return (
" background-color: #098EEF; background-image: linear-gradient(to right, #098EEF, #BEE0FA " +
item.value * 100 +
"%,white 0%);"
);
}
}
for (const item of this.ratio[3]) {
if (column.property === item.key && rowIndex === item.rowIndex) {
return (
" background-color: #6E95C9; background-image: linear-gradient(to right, #6E95C9, #D3DFEE " +
item.value * 100 +
"%,white 0%);"
);
}
}
},
效果图: