Пользовательский динамический цвет для echarts

Question

Я использую echarts для своей визуализации данных .... Я получил решение для статических данных от здесь .. Но в моем случае у меня есть динамические данные и я не знаю, как заставить их работать , Элементы данных время от времени меняются. Это не всегда 3 пункта, как показано ниже. Это может быть любое число.

var option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [
        {
            value: 120,
            itemStyle: {color: 'blue'},
        },
        {
            value: 200,
            itemStyle: {color: 'red'},
        },
        {
            value: 150,
            itemStyle: {color: 'green'},
        }
    ],
    type: 'bar'
}],
  graph: {
    color: colorPalette
  }
};

У кого-то есть идеи по этому поводу.

Любая помощь приветствуется. Спасибо

Answer 1

Нужны ли динамические данные с другим цветом? проверьте ниже

// put any color you want in Array colors
var colors = [
    "blue",
    "red",
    "green"
];

// can be any length
var data = [{
    category: 'cate1',
    value: 120
}, {
    category: 'cate2',
    value: 200
}, {
    category: 'cate3',
    value: 150
}, {
    category: 'cate4',
    value: 135
}, {
    category: 'cate5',
    value: 54
}]

let category = [];

let seriesData = data.map((item, index) => {
    category.push(item.category);
    return {
        value: item.value,
        itemStyle: {
            color: colors[index % colors.length]
        }
    }
});

var option = {
    xAxis: {
        type: 'category',
        data: category
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: seriesData,
        type: 'bar'
    }]
};

Answer 2

Вы можете иметь предопределенный массив цветов и произвольно вытаскивать цвет из этого массива, для каждой полосы, которую вы должны нарисовать:

var colors = [
  "blue",
  "red",
  "yellow",
  "green",
  "purple"
];

function popRandomColor(){
  var rand = Math.random();
  var color = colors[Math.floor(rand*colors.length)];
  colors.splice(Math.floor(rand*colors.length), 1);
  return color;
}

Затем звоните popRandomColor() каждый раз, когда вам нужен цвет из банка цветов.

var option = {
xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
    type: 'value'
},
series: [{
    data: [
        {
            value: 120,
            itemStyle: {color: popRandomColor()},
        },
        {
            value: 200,
            itemStyle: {color: popRandomColor()},
        },
        {
            value: 150,
            itemStyle: {color: popRandomColor()},
        }
    ],
    type: 'bar'
}],
  graph: {
    color: colorPalette
  }
};