echarts 柱状图颜色设置

 

⭐️  作者：船长在船上
🚩 主页：来访地址船长在船上的博客
🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  
 

用demo中的代码举例：

option = {
    color: ['#c23531','#2f4554', '#61a0a8'],
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

对应显示的样式为：

这种情况下更改柱形图颜色的话，可以这样写：

option = {
	//这里就不重要了，可以删掉
    color: ['#c23531','#2f4554', '#61a0a8'],
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
            normal: {
　　　　　　　　//这里是重点
                color: function(params) {
                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                    var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                    return colorList[params.dataIndex]
                }
            }
        }
    }]
};

 如果希望自动循环已经有的颜色循环显示，可以添加一个判断：

//给大于颜色数量的柱体添加循环颜色的判断
    if (params.dataIndex >= colorList.length) {
        index = params.dataIndex - colorList.length;
    }

最终效果图：

 

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。