首页 / 脚本样式 / Echarts / echarts 柱状图颜色设置每个柱形不一样

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;

    }