话不多说,直接上配置案例,欢迎留言分享交流
option ={
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',"y","q","y","u"]
},
yAxis: {
type: 'value'
},
series: [
{
itemStyle: {
normal: {
// barBorderRadius: [20, 20, 0, 0], // 加圆角 对应(顺时针左上,右上,右下,左下)
// 这里的color指的是每个颜色的回调函数
color: function (params) {
console.log('颜色参数', params); //这里我们有七个柱状图,七份数据,所以会打印7次。
// params.dataIndex指的是每个柱状图的索引下标 分别为0 1 2 3 4 5 6 7 8 9
let colorArr = [
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc',
"#FF0033",
"#09F7F7"
]; //colorArr.length 为3,通过取模的方式就可以循环使用颜色了
return colorArr[params.dataIndex % colorArr.length];
}
}
},
data: [120, 200, 150, 80, 70, 110, 130,20,50,80,140],
type: 'bar',
showBackground:true
}
]
}
🚵♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————