前端数据处理的问题

Question

下面是后端返回的数据

option: [
    { id: 1, dataValue: '248.6', unit: '万吨', dataName: '近一年采购总量' },
    { id: 2, dataValue: '39.48', unit: '亿元', dataName: '近一年采购总额' },
    { id: 3, dataValue: '212.5', unit: '万吨', dataName: '近一年销售总量' },
    { id: 4, dataValue: '77.6', unit: '亿元', dataName: '近一年销售总额' },
    { id: 1, dataValue: '74.286', unit: '万吨', dataName: '近一年国际销售量' },
    { id: 2, dataValue: '28.261', unit: '亿元', dataName: '近一年国际销售额' },
    { id: 3, dataValue: '138.21', unit: '万吨', dataName: '近一年国内销售量' },
    { id: 4, dataValue: '49.34 ', unit: '亿元', dataName: '近一年国内销售额' },
],

这是我想要的数据各式

option: [
    { id: 1, dataValue: '248.6', unit: '万吨', dataName: '近一年采购总量', color: 'color:#64B7EC' },
    { id: 2, dataValue: '39.48', unit: '亿元', dataName: '近一年采购总额', color: 'color:#F56E6A' },
    { id: 3, dataValue: '212.5', unit: '万吨', dataName: '近一年销售总量', color: 'color:#F69E0D' },
    { id: 4, dataValue: '77.6', unit: '亿元', dataName: '近一年销售总额', color: 'color:#6EC71E' },
    { id: 1, dataValue: '74.286', unit: '万吨', dataName: '近一年国际销售量', color: 'color:#818AF8' },
    { id: 2, dataValue: '28.261', unit: '亿元', dataName: '近一年国际销售额', color: 'color:#FFCC00' },
    { id: 3, dataValue: '138.21', unit: '万吨', dataName: '近一年国内销售量', color: 'color:#BE55E1' },
    { id: 4, dataValue: '49.34 ', unit: '亿元', dataName: '近一年国内销售额', color: 'color:#31DE9B' },
],

该如何处理？这些颜色我已经在data中定义了

Answer 1

咱也不知道你需求,咱也不敢乱写,反正基本思路是这样

const list = [
    { id: 1, dataValue: '248.6', unit: '万吨', dataName: '近一年采购总量' },
    { id: 2, dataValue: '39.48', unit: '亿元', dataName: '近一年采购总额' },
    { id: 3, dataValue: '212.5', unit: '万吨', dataName: '近一年销售总量' },
    { id: 4, dataValue: '77.6', unit: '亿元', dataName: '近一年销售总额' },
    { id: 1, dataValue: '74.286', unit: '万吨', dataName: '近一年国际销售量' },
    { id: 2, dataValue: '28.261', unit: '亿元', dataName: '近一年国际销售额' },
    { id: 3, dataValue: '138.21', unit: '万吨', dataName: '近一年国内销售量' },
    { id: 4, dataValue: '49.34 ', unit: '亿元', dataName: '近一年国内销售额' },
]

const colorMap = {
    近一年采购总量: '#64B7EC',
    近一年采购总额: '#F56E6A',
    近一年销售总量: '#F69E0D',
    近一年销售总额: '#6EC71E',
    近一年国际销售量: '#818AF8',
    近一年国际销售额: '#FFCC00',
    近一年国内销售量: '#BE55E1',
    近一年国内销售额: '#31DE9B' 
}

console.log(list.map(v => {
    v.color = `color: ${colorMap[v.dataName]}`
    return v
}))

Answer 2

这个问题是需要加颜色，也说了颜色在 data 中，但是怎么加颜色（规则）并没有说。而且颜色在 data 中是怎么存的也没给，所以只能假设

const data = [
    "#64B7EC", "#F56E6A", "#F69E0D", "#6EC71E",
    "#818AF8", "#FFCC00", "#BE55E1", "#31DE9B"
];

这咱情况下应该是轮选颜色，那就是在循环中根据当前 index 除以颜色数取余来选取颜色

option.forEach((it, i) => it.color = `color:${data[i % data.length]}`);

还有一种规则，是根据销售量来选择颜色，颜色会以一个列表的方式来保存，而且存的肯定还有阈值，比如

const data = [
    [0, "#64B7EC"],
    [50, "#F56E6A"],
    [100, "#F69E0D"],
    [200, "#6EC71E"],
    [500, "#818AF8"],
    [1000, "#FFCC00"]
];

const colorMap = [...data].reverse();
function chooseColor(sValue) {
    const value = parseFloat(sValue);
    return colorMap.find(([min]) => value > min)[1];
}

option.forEach(it => {
    it.color = `color:${chooseColor(it.dataValue)}`;
});

当然，从给出的结果来看，应该不是这个需求。

Answer 3

        let option = [
            { id: 1, dataValue: "248.6", unit: "万吨", dataName: "近一年采购总量" },
            { id: 2, dataValue: "39.48", unit: "亿元", dataName: "近一年采购总额" },
            { id: 3, dataValue: "212.5", unit: "万吨", dataName: "近一年销售总量" },
            { id: 4, dataValue: "77.6", unit: "亿元", dataName: "近一年销售总额" },
            { id: 1, dataValue: "74.286", unit: "万吨", dataName: "近一年国际销售量" },
            { id: 2, dataValue: "28.261", unit: "亿元", dataName: "近一年国际销售额" },
            { id: 3, dataValue: "138.21", unit: "万吨", dataName: "近一年国内销售量" },
            { id: 4, dataValue: "49.34 ", unit: "亿元", dataName: "近一年国内销售额" },
        ];
        let colors = ["#64B7EC", "#F56E6A", "#F69E0D", "#6EC71E", "#818AF8", "#FFCC00", "#BE55E1", "#31DE9B"];
        option.forEach((item, index) => (item.color = `color:${colors[index]}`));
        console.log(option);