Different color bar chart from eCharts
Question
I was trying to create a different color bar. For Mon blue, Tue red, Wed green. Please help me how to write it. Line itemStyle: {normal: {color: 'blue','red', 'green'}} , did not work.
The code comes from the echarts site.
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
itemStyle: {normal: {color: 'blue'}},
data: [120, 200, 150],
type: 'bar'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
5 answers
solution1
34 ACCPTED 2018-03-08 12:24:15
This is my solution:
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
}
};
solution2
8 2019-07-23 21:35:11
The top solution was not working for me.From their documentation is seems lineStyle now has two children elements you can leverage 'normal' and 'emphasis'. I had to modify it like so to override the default colors:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [
{
value: 120,
itemStyle: { normal: { color: 'blue' } },
},
{
value: 200,
itemStyle: { normal: { color: 'red' } },
},
{
value: 150,
itemStyle: { normal: { color: 'green' } },
}
],
type: 'bar'
}],
graph: {
color: colorPalette
}
};
solution3
2 2019-06-10 14:51:02
My solution in June 2019 for needing different colors based on values: Create separate series for the different colors, and use a stacked chart. For example, I needed to create a graph with green bars for passing values and yellow bars for failing values. This was my implementation:
var data = {};
data.legendData = ['Sales','HR','Engineering'];
data.greenSeriesData = ['-',96.38,98.43];
data.yellowSeriesData = [44.23,'-','-'];
var option = {
title: {
text: '2019 Progress',
left: 'center'
},
xAxis: {
type: 'category',
data: data.legendData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: function (val) {
return (val) + '%';
}
}
},
series: [{
data: data.greenSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'green'
}
},
{
data: data.yellowSeriesData,
type: 'bar',
stack: 'colorbyvalue',
label: {
show: true,
position: 'insideTop',
formatter: "{c}%",
color: '#000000'
},
barWidth: 50,
itemStyle: {
color: 'yellow'
}
}],
animation: false
};
solution4
0 2021-05-02 18:59:21
you may have an array corresponding to the colors that you need for each day.
initially that could be empty and then you push the relevant color to it, depending on that day!
var cars1 = data.data_1;
var color_bar = [];
var text = "";
var i;
for (i = 0; i < cars1.length; i++)
{
if (cars1[i] < 20.35) {
color_bar.push("red");
}
else {
color_bar.push("yellow");
}
}
and the you call the relevant color for each data series...
yAxis: {
type: 'value'
},
series: [{
data:
[
{
value: data.data_1[0],
itemStyle: {color: color_bar[0]},
},{
value: data.data_1[1],
itemStyle: {color: color_bar[1]},
},{
value: data.data_1[2],
itemStyle: {color: color_bar[2]},
}],
Here I worked out an example based on value, but conditioning "day" should be ok.
I hope this helps mate.
solution5
0 2023-01-13 16:35:35
After a day of research got this answer => add itemStyle with seriesIndex as params
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [{
data: [ 120,200,150],
type: 'bar',
itemStyle: {
// HERE IS THE IMPORTANT PART
color: (seriesIndex) => yourCustomFunctionName(seriesIndex) // you will get access to array data passed and its index values
},
}],
graph: {
color: colorPalette
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.