echarts 柱状图颜色设置

• 2019-05-05
  在使用echarts时，遇到一个问题，就是本来应该直接在color中设置的多个颜色不起左右，只显示第一个颜色

用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;
	}

最终效果图：