echarts 默认柱状图每根柱子显示不同颜色（随机显示和定制显示）

 

series: [{
    name: '请求数',
    type: 'bar',
    //barGap: 60,
    barWidth: 140,//柱图宽度
    //stack: 'sum',//堆叠效果
    itemStyle: {
        normal: {
            color: function (params) { 
                //定制显示（按顺序,可避免clolrList索引超出）
                var colorList = ['#dc3545', '#ffc107', '#007bff', '#28a745', '#20c997', '#e83e8c', '#17a2b8', '#92d1ea'];
                var index = params.dataIndex > (colorList.length - 1) ? params.dataIndex - colorList.length : params.dataIndex;
                return colorList[index];
//随机显示
                //return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
            },
        }
    },
    label: {
        normal: {
            show: true,
            position: 'top',
            textStyle: {
                color: 'black'
            }
        }
    },
    data: [],
}]

 

 

效果图

 

转载于:https://www.cnblogs.com/gilbert/p/11013430.html