首页 > 其他 > 详细

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

时间:2019-06-13 00:23:29      阅读:854      评论:0      收藏:0      [点我收藏+]

 

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

 

 

效果图

技术分享图片

 

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

原文:https://www.cnblogs.com/gilbert/p/11013430.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!