echarts如何给柱形图的每个柱子设置不同颜色
程序员文章站
2022-07-13 14:25:01
...
echarts如何给柱形图的每个柱子设置不同颜
https://www.cnblogs.com/snowhite/p/9178104.html
总结下这几日用echarts库作基本图形遇到的一些问题。
echarts快速上手可参考官网：
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
在作柱形图时，如果需要给每个柱子设置不同颜色，参考以下说明：
一》
调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
默认为：
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']}
前端代码：
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
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 = {
xAxis : [
{
type : 'category',
data : [],
axisTick: {
alignWithLabel: true
},
name:'社区',
axisLabel: {
interval: 0,//让所有坐标值全部显示
rotate:30,//让坐标值旋转一定的角度
show: true,
textStyle: {
fontSize: '12'
}
},
}
],
yAxis: {
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {
textStyle: {
color: '#999',
}
},
name:'案件数',
},
//加上 只会出现一种颜色
visualMap: {
orient: 'horizontal',
left: 'center',
min: 10,
max: 100,
text: ['High Score', 'Low Score'],
dimension: 0,
inRange: {
color: ['#D7DA8B', '#E15457']
},
show:false
},
series: [
{
type: 'bar',
itemStyle: {
//加上 只会出现一种颜色
normal: {color: 'rgba(1,0,0,0.05)'}
},
barGap:'-100%',
barCategoryGap:'40%',
data:[],
animation: false
},
]
};
实例二》 设置不同颜色
xAxis : [
{
type : 'category',
// name:'额度',
//这是设置的false，就不不显示下方的x轴，默认是true的
show: false,
//这里呢，就是每个柱的name了，根据实际情况下就好了，我就先写这三个
data : ['最多','平均','最少'],
axisLabel: {
//这个是倾斜角度，也是考虑到文字过多的时候，方式覆盖采用倾斜
// rotate: 30,
//这里是考虑到x轴文件过多的时候设置的，如果文字太多，默认是间隔显示，设置为0，标示全部显示，当然，如果x轴都不显示，那也就没有意义了
interval :0
}
}
],
yAxis : [
{
type : 'value',
name:'数量',
//下面的就很简单了，最小是多少，最大是多少，默认一次增加多少
min: 0,
max: 30,
interval: 6,
//下面是显示格式化，一般来说还是用的上的
axisLabel: {
formatter: '{value} 包'
}
}
],
series : [
{
name: '数量',
type: 'bar',
itemStyle: {
normal: {
//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
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]
},
//以下为是否显示，显示位置和显示格式的设置了
label: {
show: true,
position: 'top',
// formatter: '{c}'
formatter: '{b}\n{c}'
}
}
},
//设置柱的宽度，要是数据太少，柱子太宽不美观~
barWidth:70,
data: [28,15,9,4,7,8,23,11,17]
}
]