来自 eCharts 的不同颜色条形图
[英]Different color bar chart from eCharts
问题描述
我试图创建一个不同的颜色条。 周一蓝色，周二红色，周三绿色。 请帮我看看怎么写。 Line itemStyle: {normal: {color: 'blue','red', 'green'}} ，无效。
代码来自echarts网站。
<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 个解决方案
解决方案1
34 已采纳 2018-03-08 12:24:15
这是我的解决方案：
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
}
};
解决方案2
8 2019-07-23 21:35:11
最佳解决方案对我不起作用。从他们的文档来看，似乎 lineStyle 现在有两个子元素，您可以利用“正常”和“强调”。 我不得不像这样修改它以覆盖默认颜色：
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
}
};
解决方案3
2 2019-06-10 14:51:02
我在 2019 年 6 月根据值需要不同颜色的解决方案：为不同颜色创建单独的系列，并使用堆叠图表。 例如，我需要创建一个图形，其中绿色条用于传递值，黄色条用于失败值。 这是我的实现：
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
};
解决方案4
0 2021-05-02 18:59:21
您可能有一个与您每天需要的颜色相对应的数组。
最初它可能是空的，然后你将相关的颜色推送给它，具体取决于那天！
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");
}
}
并且您为每个数据系列调用相关颜色...
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]},
}],
在这里，我根据价值制定了一个示例，但调节“一天”应该没问题。
我希望这有助于伙计。
解决方案5
0 2023-01-13 16:35:35
经过一天的研究得到了这个答案 => 添加 itemStyle 和 seriesIndex 作为参数
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
}
};
条形图中每个条形的不同颜色； 图表JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.