如何让echarts柱状图的每个柱子显示不同的颜色
程序员文章站
2022-07-13 14:25:19
...
itemStyle:{
normal: {
label : {
show: true,
position:'right',
formatter: '{c}%'
},
color: function(params)
{
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
其中,
color: function(params)
{
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
这一段代码使得定义了一个list,然后根据数据去不同的值,
完整的echart代码,
var myChart = echarts.init(document.getElementById('main'));
var dataStyle = {
normal: {
label : {
show: true,
position:'right',
formatter: '{c}%'
},
color: function(params)
{
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
};
option = {
title : {
text: '舆论统计',
subtext: '数据来自网络'
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type: 'value',
show: false,
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
show: false,
data : ['客户端','微博','微信','报刊','网页','论坛']
}
],
series : [
{
type:'bar',
itemStyle : dataStyle,
data:[27, 22, 18, 13, 12, 8]
},
]
};
myChart.setOption(option);