我正在使用echarts进行数据可视化....我从here获得静态数据的解决方案..但在我的情况下,我有动态数据,不知道如何使它工作。数据项不时变化。它并不总是如下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
}
};
有人对此有任何想法。
任何帮助表示赞赏。谢谢
对于您必须绘制的每个条形图,您可以预定义一组颜色并随机弹出该数组中的颜色:
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
}
};
您想要的动态数据是否具有不同的颜色?检查下面
// 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'
}]
};