echarts柱状图设置每根柱子颜色，随机显示颜色，固定值展示颜色

六月初六月初 Echarts 2019-01-17 10:16:20

效果预览：


问题描述：echarts柱状图设置每根柱子颜色，随机显示颜色，固定值展示颜色

实现方式：series中设置柱条颜色值

相关代码：

itemStyle: {
			            normal: {
			                // 随机显示
			                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
			                // 定制显示（按顺序）
			                color: function(params) { 
			                    var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
			                    return colorList[params.dataIndex] 
			                }
			            },
			        },

上图完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
    </head>
    <body>
        <div id="test" style="height: 500px;width: 100%;">
            
        </div>
        <script>
            var BarBOX1 = echarts.init(document.getElementById("test"));
            option = {
			    xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    
			    series: [{
			    	itemStyle: {
			            normal: {
			                // 随机显示
			                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
			                // 定制显示（按顺序）
			                color: function(params) { 
			                    var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; 
			                    return colorList[params.dataIndex] 
			                }
			            },
			        },
			        data: [120, 90, 150, 80, 70, 110, 130],
			        type: 'bar'
			    }]
			};
            BarBOX1.setOption(option);
        </script>
    </body>
</html>

echarts柱状图设置每根柱子颜色，随机显示颜色，固定值展示颜色。


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！