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

您可以预定义一个颜色数组，并为您必须绘制的每个条形从该数组中随机弹出一种颜色：

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