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: [], }]

 

 

效果图

 

作者:陈哲Gilbert
出处:http://gilbert.cnblogs.com
版权声明:
本文版权归作者所有,欢迎转载,请在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

posted @ 2019-06-12 23:21  陈哲Gilbert  阅读(793)  评论(0编辑  收藏  举报