[英]Custom Dynamic color for echarts
I am using echarts for my data visualization.... I got the solution for static data from here .. But in my case I have dynamic data and don't know how to make it work. 我正在使用echarts进行数据可视化。...我从这里获得了静态数据的解决方案..但就我而言,我拥有动态数据,并且不知道如何使其工作。 The data items changes from time to time.
数据项不时更改。 It is not always 3 items like below.
并非总是如下所示的3个项目。 It could be any number.
可以是任何数字。
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
}
};
Someone have any idea about this. 有人对此有任何想法。
Any help is appreciated. 任何帮助表示赞赏。 Thanks
谢谢
You can have an array of colors predefined and randomly pop a color from that array, for each bar you have to draw: 您可以预先定义一个颜色数组,并从该数组中随机弹出一种颜色,以便绘制每个条形:
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;
}
Then call popRandomColor()
everytime you need a color from the color bank. 然后,每当您需要颜色库中的颜色时,调用
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
}
};
Is dynamic data with different color you want? 您是否想要具有不同颜色的动态数据? check below
检查下面
// 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'
}]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.